There are multiple ways to get started using Bootstrap CSS Framework. You can choose to include Bootstrap via a CDN, a package manager such as NPM, Yarn, and Composer, or simply just download the files and include it in your project.
Before showing you all of the methods on how you can use Bootstrap, I recommend using the minified version of the framework when including it into your templates.
Normally, you shouldn’t have to work with the actual Bootstrap styles and scripts, but rather override them or modify them using the Sass variables or mixins.
Using Bootstrap via CDN
The advantage of using a CDN is that this resource will most likely already be cached for the browser of your user making your website faster. It is also a very quick way to include Bootstrap into your project.
Include the following stylesheet into your project:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
And also add the following to scripts:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
Using Bootstrap via direct download
Another easy way to get started using Bootstrap is by just downloading it. You will get both the source code and the compiled files.
Using Bootstrap via a Package Manager
This is more of a preferential option for those of you who prefer using a certain package manager. Bootstrap is available in most of the popular Package Manager’s out there and will require a Sass compiler and Autoprefixer to start properly using it.
NPM
Install the latest stable version of Bootstrap into your Node.js powered app with the following command:
npm install bootstrap
Yarn
Install Bootstrap with the following Yarn package:
yarn add bootstrap
RubyGems
We recommend you installing Bootstrap using Bundler and RubyGems by adding the following code to your Gemfile:
gem 'bootstrap', '~> 4.5.2'
If you’re not using Bundler, you can also install the gem by running the following command:
gem install bootstrap -v 4.5.2
Composer
Bootstrap can also be installed using the Composer Package Manager by running the following command:
composer require twbs/bootstrap:4.5.2
NuGet
Last but not least, if you develop in .NET you can also install Bootstrap’s CSS or Sass using NuGet:
Install-Package bootstrap
Install-Package bootstrap.sass
Working with CSS or Sass variables and mixins
If you have successfully installed Bootstrap with one of the methods above, you can now decide whether to use plain old CSS or use the powerful Sass variables and mixins that can speed up your development process and customize your interface much faster.
We wrote a very detailed article on how you can get started with using Gulp 4, Bootstrap Sass, and BrowserSync to create a simple, but an efficient working environment to use Bootstrap.
Bootstrap themes and templates
You can save a lot of time and benefit from professionally designed templates by downloading or purchasing some of our free and premium Bootstrap templates, themes, and UI kits from Themesberg.
Each theme uses the recommended Gulp, Bootstrap Sass, and BrowserSync stack environment. Our newest themes that use Bootstrap 5 also no longer require jQuery as a dependency, rendering your website faster and easier to work with.
Top comments (1)
I made my website 35% faster!
How?
By not using bootstrap.