web
mobile

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.


Versions

jQuery

Available (current version)


MORE SNIPPETS
Angular

Available


USE ANGULAR
React

Coming soon...


JOIN WAITING LIST
Vue

Coming soon...


JOIN WAITING LIST

Waiting lists

Get notified about new Visual Studio Snippets and receive guaranteed discount for future purchase.

I agree to receive the newsletter and information on chosen topics from MDB. The administrator is StartupFlow s.c. located in Kijowska 7, Warsaw. The administrator processes data following the Privacy Policy.

Specify your preferences