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

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

---

Versions

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!