Visual Studio Code snippets for MDB 5 Standard

Introduction

An extension that allows you to add useful snippets of the most popular MDB 5 components to Visual Studio Code.

Note: Visual Studio Code is one of the most popular and best code editors that most MDB developers use. This is the editor we use and we sincerely recommend it.

Download Visual Studio Code

Video tutorial

MDB 5 - Bootstrap 5 & Material Design 2.0

Installation

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

Additionally, check also:

GitHub repository VSC page

Available snippets

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
Forms
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