mdbsnippets README

Visual Studio Code extension with MDBootstrap snippets.

What is MDB-VSCode-snippets extension?

MDB-VSCode-snippets is a MDBootstrap users toolkit for boosting working with MDB products.

With MDB-VSCode-snippets you can use shortcuts instead of writing whole code.

!mdb-breadcrumb

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active">Data</li>
  </ol>
</nav>

Instalation

1. Launch Visual Studio Code
2. Go to extensions tab - Ctrl-Shift-X (Windows, Linux) or Cmd-Shift-X (OSX)
3. Search for 'mdbsnippets'
4. Choose the extension
5. Install extension and reload Visual Studio Code

---

Shortcuts

• General
• Components
  • Alerts
  • Buttons
  • Cards
  • Dropdowns
  • Loaders
  • Panels
• Navigation
  • Breadcrumbs
  • Footer
  • Hamburger Menu
  • Mega Menu
  • Navs
  • Navbar
  • Scrollspy
  • Sidenav
• Forms
  • Checkbox
  • Inputs
  • Slider
  • Switch
• Tables
  • Basic Tables
• Modals
  • Basic Modals
  • Advanced Modals
• Plugins
  • iFrame
  • Edge Header

General

Name of component	Shortcut
MDB HTML Template	!mdb

Alerts

Name of component	Shortcut
MDB Primary Alert	!mdb-alert-primary
MDB Secondary Alert	!mdb-alert-secondary
MDB Success Alert	!mdb-alert-success
MDB Danger Alert	!mdb-alert-danger
MDB Warning Alert	!mdb-alert-warning
MDB Info Alert	!mdb-alert-info
MDB Light Alert	!mdb-alert-light
MDB Dark Alert	!mdb-alert-dark

Buttons

Name of component	Shortcut
Primary Btn	!mdb-button-primary
Secondary Btn	!mdb-button-secondary
Succes Btn	!mdb-button-succces
Danger Btn	!mdb-button-danger
Warning Btn	!mdb-button-warning
Info Btn	!mdb-button-info
Light Btn	!mdb-button-light
Dark Btn	!mdb-button-dark
Link Btn	!mdb-button-link
Gradient Peach Btn	!mdb-button-gr-pe
Gradient Blue Btn	!mdb-button-gr-bl
Gradient Aqua Btn	!mdb-button-gr-aq
Outline Primary Btn	!mdb-button-ou-pr
Large Btn	!mdb-button-lg
Small Btn	!mdb-button-sm
Block Btn	!mdb-button-bloc
Checkbox Btn	!mdb-button-check
Radio Btn	!mdb-button-radio

Cards

Name of component	Shortcut
Basic Card	!mdb-card

Dropdowns

Name of component	Shortcut
MDB Primary Dropdown	!mdb-dropdown-primary

Loaders

Name of component	Shortcut
Material Loader	!mdb-loader
Default Loader	!mdb-loader-df

Panels

Name of component	Shortcut
Basic Panel	!mdb-panel

Breadcrumbs

Name of component	Shortcut
Basic Breadcrumb	!mdb-breadcrumb

Footer

Name of component	Shortcut
Basic Footer	!mdb-footer

Hamburger Menu

Name of component	Shortcut
Hamburger Menu	!mdb-hamburger-menu

Mega Menu

Name of component	Shortcut
Mega Menu	!mdb-megamenu

Navs

Name of component	Shortcut
MDB Nav	!mdb-nav

Navbar

Name of component	Shortcut
MDB Navbar	!mdb-navbar

Scrollspy

Name of component	Shortcut
Scrollspy	!mdb-scrollspy

Sidenav

Name of component	Shortcut
Sidenav	!mdb-side-nav

Checkbox

Name of component	Shortcut
Material Checkbox	!mdb-checkbox
Default Checkbox	!mdb-checkbox-default
Inline Checkboxes	!mdb-checkbox-inline

Inputs

Name of component	Shortcut
Material Input	!mdb-input

Slider

Name of component	Shortcut
Basic Slider	!mdb-slider

Switch

Name of component	Shortcut
Material Switch	!mdb-switch

Basic Modals

Name of component	Shortcut
Basic Example	!mdb-modal

Advanced Modals

Name of component	Shortcut
Modal Cookies	!mdb-modal-cookies

Basic Tables

Name of component	Shortcut
Basic Example	!mdb-table
Striped Table	!mdb-table-striped
Bordered Table	!mdb-table-bordered

IFrame

Name of component	Shortcut
YouTube iFrame	!mdb-iFrame-yt
Vimeo iFrame	!mdb-iFrame-vimeo

Edge Header

Name of component	Shortcut
Edge Header	!mdb-edge-header

---

Versions

[1.4.7]

Update template to MDB 4.19.1 version.

[1.4.6]

Update template to MDB 4.19.0 version.

[1.4.5]

Update template to MDB 4.18.0 version.

[1.4.4]

Update template to MDB 4.17.0 version.

1.4.3

Update template to MDB 4.16.0 version.

1.4.2

Update template to MDB 4.15.0 version.

1.4.1

Update template to MDB 4.14.1 version.

1.4.0

Update template to MDB 4.14.0 version.

1.3.0

New snippets for MDB components and update template to MDB 4.13.0 version.

1.2.0

New snippets for MDB components and update template to MDB 4.12.0 version.

1.1.0

New snippets for MDB components.

1.0.0

Initial release of MDBootstrap-VSCode-snippets.

---

For more information

• Visit MDBootstrap Page.
• Get MDB FREE.
• Get MDB PRO.

Enjoy!