Introduction
An extension that allows you to add useful snippets of the most popular MDB 5 components to Visual Studio Code.
Note: Visual Studio Code is one of the most popular and best code editors that most MDB developers use. This is the editor we use and we sincerely recommend it.
Video tutorial
Installation
- Launch Visual Studio Code
-
Go to extensions tab -
Ctrl
-Shift
-X
(Windows, Linux) orCmd
-Shift
-X
(OSX) - Search for 'MDB 5 Standard snippets'
- Choose the extension
- Install extension and reload Visual Studio Code
Additionally, check also:
GitHub repository VSC pageAvailable snippets
Fundamentals
Snippet | Description |
---|---|
s-mdb-html-starter |
MDB HTML starter |
s-mdb-basic-layout |
MDB Basic layout |
Layout
Snippet | Description |
---|---|
s-mdb-grid-2col |
MDB Grid 2 columns |
s-mdb-grid-3col |
MDB Grid 3 columns |
s-mdb-grid-4col |
MDB Grid 4 columns |
s-mdb-grid-centered |
MDB Grid centered column |
s-mdb-section |
MDB Section |
Content & styles
Snippet | Description |
---|---|
s-mdb-hover-effects |
MDB Hover effects |
s-mdb-icon |
MDB Icon |
s-mdb-note |
MDB Note |
Navigation
Snippet | Description |
---|---|
s-mdb-footer |
MDB Footer |
s-mdb-header-jumbotron |
MDB Header with jumbotron |
s-mdb-header-image |
MDB Header with image |
s-mdb-navbar |
MDB Navbar |
s-mdb-pagination |
MDB Pagination |
s-mdb-pills |
MDB Pills |
Components
Snippet | Description |
---|---|
s-mdb-button |
MDB Button |
s-mdb-button-link |
MDB Button link |
s-mdb-button-floating |
MDB Button floating |
s-mdb-button-social |
MDB Button social |
s-mdb-card |
MDB Card |
s-mdb-card-empty |
MDB Card empty |
s-mdb-card-image |
MDB Card image |
s-mdb-card-complex |
MDB Card complex |
s-mdb-list-group |
MDB List group |
s-mdb-modal |
MDB Modal |
Forms
Snippet | Description |
---|---|
s-mdb-form |
MDB Form |
s-mdb-checkbox |
MDB Checkbox |
s-mdb-radio |
MDB Radio |
s-mdb-input |
MDB Input |
s-mdb-textarea |
MDB Textarea |
Data
Snippet | Description |
---|---|
s-mdb-table |
MDB Table |
Utilities
Snippet | Description |
---|---|
s-mdb-embed |
MDB Embed |
s-mdb-ripple-color |
MDB Ripple color |
s-mdb-divider |
MDB Divider |