How to install Bootstrap in Visual Studio Code

Learn how to run Bootstrap in Visual Studio Code, by installing Bootstrap Globally and us the it’s powerful tools, from the Visual Studio Code Bootstrap Extension to create quick and easy to use code Snippets which will speed up coding.

Why should you use the VS Code Bootstrap Extension, mainly because it includes templates, powerful utility snippets, and much more like…

Get Visual Studio Code for Windows and Mac OS

vs code link

Bootstrap Extension Features

This Extension Features are:

• Templates one tab away
• Powerful utilities and on demand components
  and also
• Font Awesome icons ! but we will mainly concentrate on Bootstrap in this tutorial!

How to get Bootstrap Extension for Visual Studio Code

Open up Visual Studio Code,if you don’t have VS Code then check out my tutorial on my chanel on how to get Visual studio Code, now from the “Extensions” tag in the Search bar search for Bootstrap. You should see multiple Bootstrap extensions aper. Choose the mouset recent one, dis tutorial is based on the Bootstrap 5 & Font Awesome Snippets version. You can also find it on the internet by following this link:

Bootstrap 5 & Font Awesome Snippets

Click on install and after the installation is don you may or may not need to restart VS Code!

Using Bootstrap Extension in Visual Studio Code

Now that you have installed the Bootstraps Visual Studio Code Extension, you can start using it by using it’s build in triggers.

Bootstrap Triggers

!b5-script – This will give you bough CDN’s for Bootstrap CSS and JS.

!b5-$ – Shortcut creating an HTML document with the CDN scripts included.

b5- – Main component snippets. You can extend this to many components like:

b5-nav – for a simple nav bar witch is also completely responsive, then use the build in bootstrap classes,

.container.mx-auto – to create a generic div with the class of container & margin on the x axis of auto,

.row.row-cols-3 – to create a row class witch will restric to 3 col every card you will create by using the,

b5-card snippet, used to create a card class with a definably with of…, lets say 300px,

now add a class of .col and copy it 6 times

Use Bootstrap Templates in Visual Studio Code

Use Bootstrap Templates in Visual Studio Code to create quick website templates for

!templates – Gives a list of all of the Bootstrap templates.

!template
!BlogTemplate
!AlbumTemplate
!productTemplate
!CarouselTemplate

Learn more about Bootstrap and Font Awesome

If you wish to learn more about Bootstrap and Font Awesome then feal free to check out my videos and tutorials on my YouTube Chanel and my Blog for there source code.