MDB 5 Standard Code Snippets
This extension adds snippets for MDB 5 Standard - Material Design for Bootstrap 5 UI KIT
Usage
Type part of snippet selector and press enter.
Alternatively, press Ctrl+Space (Windows, Linux) or Cmd+Space (Mac OS) to display snippets list.
Snippets list
You can find list of available snippets below:
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 |
| 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 |
Installation
- Launch Visual Studio Code
- Go to extensions tab -
Ctrl-Shift-X (Windows, Linux) or Cmd-Shift-X (OSX)
- Search for 'MDB 5 Standard snippets'
- Choose the extension
- Install extension and reload Visual Studio Code
| |
