MDB jQuery Visual Studio Snippets
Add visual studio code snippets for MDB jQuery Bootstrap UI KIT to your code editor and boost your coding productivity. Start using VSCode shortcuts instead of writing the whole code.
Installation
Step 1: Launch Visual Studio Code Visual Studio Marketplace
Step 2: Go to extensions tab - Ctrl-Shift-X (Windows, Linux) or Cmd-Shift-X (OSX)
Step 3: Search for 'mdbsnippets'
Step 4: Choose the extension
Step 5: Install extension and reload Visual Studio Code
Usage
Type part of snippet selector and press enter.
Alternatively, press Ctrl+Space (Windows, Linux) or Cmd+Space (Mac OS) to display snippets list.
Here you can find list of available HTML snippets below:
General
| Snippets | Description |
|---|---|
| a-mdb-button | MDB Button component |
Alerts
| Snippets | Description |
|---|---|
| !mdb-alert-primary | MDB Primary Alert |
| !mdb-alert-secondary | MDB Secondary Alert |
| !mdb-alert-success | MDB Success Alert |
| !mdb-alert-danger | MDB Danger Alert |
| !mdb-alert-warning | MDB Warning Alert |
| !mdb-alert-info | MDB Info Alert |
| !mdb-alert-light | MDB Light Alert |
| !mdb-alert-dark | MDB Dark Alert |
Buttons
| Snippets | Description |
|---|---|
| !mdb-button-primary | Primary Btn |
| !mdb-button-secondary | Secondary Btn |
| !mdb-button-succces | Succes Btn |
| !mdb-button-danger | Danger Btn |
| !mdb-button-warning | Warning Btn |
| !mdb-button-info | Info Btn |
| !mdb-button-light | Light Btn |
| !mdb-button-dark | Dark Btn |
| !mdb-button-link | Link Btn |
| !mdb-button-gr-pe | Gradient Peach Btn |
| !mdb-button-gr-bl | Gradient Blue Btn |
| !mdb-button-gr-aq | Gradient Aqua Btn |
| !mdb-button-ou-pr | Outline Primary Btn |
| !mdb-button-lg | Large Btn |
| !mdb-button-sm | Small Btn |
| !mdb-button-bloc | Block Btn |
| !mdb-button-check | Checkbox Btn |
| !mdb-button-radio | Radio Btn |
Cards
| Snippets | Description |
|---|---|
| !mdb-card | Basic Card |
Dropdowns
| Snippets | Description |
|---|---|
| !mdb-dropdown-primary | MDB Primary Dropdown |
Loaders
| Snippets | Description |
|---|---|
| !mdb-loader | Material Loader |
| !mdb-loader-df | Default Loader |
Panels
| Snippets | Description |
|---|---|
| !mdb-panel | Basic Panel |
Breadcrumbs
| Snippets | Description |
|---|---|
| !mdb-breadcrumb | Basic Breadcrumb |
Footer
| Snippets | Description |
|---|---|
| !mdb-footer | Basic Footer |
Hamburger Menu
| Snippets | Description |
|---|---|
| !mdb-hamburger-menu | Hamburger Menu |
Mega Menu
| Snippets | Description |
|---|---|
| !mdb-megamenu | Mega Menu |
Navs
| Snippets | Description |
|---|---|
| !mdb-nav | MDB Nav |
Navbar
| Snippets | Description |
|---|---|
| !mdb-navbar | MDB Navbar |
Scrollspy
| Snippets | Description |
|---|---|
| !mdb-scrollspy | Scrollspy |
Sidenav
| Snippets | Description |
|---|---|
| !mdb-side-nav | Sidenav |
Checkbox
| Snippets | Description |
|---|---|
| !mdb-checkbox | Material Checkbox |
| !mdb-checkbox-default | Default Checkbox |
| !mdb-checkbox-inline | Inline Checkboxes |
Inputs
| Snippets | Description |
|---|---|
| !mdb-input | Material Input |
Slider
| Snippets | Description |
|---|---|
| !mdb-slider | Basic Slider |
Switch
| Snippets | Description |
|---|---|
| !mdb-switch | Material Switch |
Basic Modals
| Snippets | Description |
|---|---|
| !mdb-modal | Basic Example |
Advanced Modals
| Snippets | Description |
|---|---|
| !mdb-modal-cookies | Modal Cookies |
Basic Tables
| Snippets | Description |
|---|---|
| !mdb-table | Basic Example |
| !mdb-table-striped | Striped Table |
| !mdb-table-bordered | Bordered Table |
Why is it so great?
Productivity
Boost efficiency of your coding time, easily generate a code of specific component.Availability
Available for a huge number of component to use directly in your HTML code editor.Usefulness
Reduce repetitive statements and can reduce overuse injuries with your hands.
