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.

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.

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 mdbootstrap.com:

Available snippets