Free UI/UX design course

Learn how to create exceptional designs by reading my new tutorial.

Start learning

Tutorial title

Jumping between the documentation and the editor to copy the code of a given component is cumbersome.

That's why MDB provides a useful extension to the VSC editor that will give you easy access to the most important MDB components directly in your editor.

YYou just start typing the component name in Visual Studio Code and our extension will suggest and autocomplete all the code you are looking for.

MDB 5 - Bootstrap 5 & Material Design
Step 1 - install Visual Studio Code

If you don't already have Visual Studio Code installed, I strongly recommend you to do so. It is a free and powerful editor that is now the standard among programmers around the world.

Download it from the official site.

Step 2 - install MDB snippet extension

Launch Visual Studio Code and in the top menu click View and then Extensions™:

Then in the search box in the upper left corner, type "MDB 5 Standard snippets" and select the official extension, where the author is MDBootstrap.

Then click the "Install" button.

When the installation is complete, close and restart Visual Studio Code.

Step 3 - test if it works

Open index.html and start typing, for example mdbcard. If you see the suggestions list, it works as expected. Simply click enter or tab to select the suggestion you want to use.

MDB 5 - Bootstrap 5 & Material Design

See how quickly and without looking at the documentation you can create a basic project by using VSC snippets.

Thanks to snippets, you can create a website like this demo in less than 40 seconds, without having to search for component code on

Available snippets
Snippet Description
s-mdb-html-starter MDB HTML starter
s-mdb-basic-layout MDB Basic 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
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
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
s-mdb-modal MDB Modal
s-mdb-list-icons-arrow MDB List with arrow icons
s-mdb-list-icons-check MDB List with check icons
s-mdb-list-icons-question MDB List with question icons
s-mdb-modal MDB Modal
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
Snippet Description
s-mdb-table MDB Table
Snippet Description
s-mdb-embed MDB Embed
s-mdb-ripple-color MDB Ripple color
s-mdb-divider MDB Divider

John Doe

About author

Michal Szymanski

Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.