One of the key features of Bootstrap is its grid system, which allows developers to create responsive layouts that automatically adjust to various screen sizes and devices.

This helps ensure that websites built with Bootstrap are easily accessible and user-friendly across different platforms, such as desktops, tablets, and smartphones.

By using Bootstrap, developers can streamline the process of creating visually appealing and functional websites, as it provides a solid foundation for building modern and responsive web applications. It also offers a wide range of customization options and themes, making it a versatile tool for developers of all skill levels.

Key versions of Bootstrap so far:

There are four known versions of Bootstrap so far, Bootstrap 2, Bootstrap 3, Bootstrap 4 and Bootstrap 5. However, Bootstrap 3, 4, and 5 are major versions of the Bootstrap framework, each with its own set of features and improvements.

Bootstrap 3

Bootstrap 3 was one of the earlier versions to adopt a mobile-first approach and this one of the stable version.

Visit website »

Bootstrap 4

Bootstrap 4 continued Bootstrap 3 trend and further improved mobile responsiveness and flexibility.

Visit website »

Bootstrap 5

Bootstrap 5 removed the dependency on jQuery, resulting in a lighter and more modern framework.

Visit website »

Bootstrap 3

Setting up Bootstrap 3 involves a few different methods, depending on your preferred approach and development environment. Here's a general guide:

Using Bootstrap CDN: One of the simplest ways to get started with Bootstrap 3 is by using the Bootstrap CDN. You can include the necessary Bootstrap CSS and JavaScript files directly in your HTML file.

Add the following lines to the head section of your HTML file:

 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity=
"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

 

Downloading Bootstrap: You can download Bootstrap 3 from the official Bootstrap website. After downloading the files, include the necessary CSS and JavaScript files in your project manually.

Using package managers: If you are using package managers like npm or yarn, you can install Bootstrap 3 through these tools and then import the necessary files into your project.

Bootstrap 4

Setting up Bootstrap 4 involves several methods, including using a content delivery network (CDN), downloading the Bootstrap files, or using package managers like npm or yarn.

Here's a general guide for setting up Bootstrap 4:

Using Bootstrap CDN: The easiest way to get started with Bootstrap 4 is by using the Bootstrap CDN. Include the following lines in the section of your HTML file:

 

CSS setup

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
crossorigin="anonymous">

 

JS setup

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.

 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" 
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" 
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"
></script>

 

Bootstrap 5

Using Bootstrap CDN: You can include the Bootstrap 5 CSS and JavaScript files directly in your HTML file using the CDN. Add the following lines to the section of your HTML file:

 

CSS setup

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

 

JS setup

Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and Popper. Place one of the following <script>s near the end of your pages, right before the closing </body> tag, to enable them.

 

Bundle setup

 

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

 

Separate setup

 

Include every Bootstrap JavaScript plugin and dependency with one of our two bundles. Both bootstrap.bundle.js and bootstrap.bundle.min.js include Popper for our tooltips and popovers. For more information about what’s included in Bootstrap, please see our contents section.

 

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Explore

Navigate

Recently added

Key differences of three versions of Bootstrap:

  1. Mobile-first approach:

    • Bootstrap 3 was one of the earlier versions to adopt a mobile-first approach, emphasizing the importance of designing for mobile devices first.
    • Bootstrap 4 continued this trend and further improved mobile responsiveness and flexibility.
    • Bootstrap 5 continued to prioritize mobile-first design while introducing a more modern approach and emphasizing customization and performance improvements.

  2. jQuery dependency:

    • Bootstrap 3 and Bootstrap 4 relied on jQuery for some of its components and functionalities.
    • Bootstrap 5 removed the dependency on jQuery, resulting in a lighter and more modern framework.

  3. Utility classes:

    • Bootstrap 4 introduced utility classes that made it easier to apply quick styles to elements, improving customization options.
    • Bootstrap 5 expanded the utility classes and introduced additional built-in utility functions, providing more flexibility and control over the design and layout of elements.

  4. Customization and theming:

    • Bootstrap 4 allowed for some level of customization and theming through SASS variables and mixins.
    • Bootstrap 5 further enhanced customization capabilities, allowing developers to easily modify the default design system to create unique and personalized designs.

  5. Component updates:

    • Each version of Bootstrap introduced updates and improvements to various components, such as the grid system, forms, buttons, navigation, and other UI elements.
    • Bootstrap 5 refined existing components and introduced new components, such as off-canvas navigation and improved modal functionality.

  6. Performance optimization:

    • Bootstrap 5 put a significant emphasis on performance optimization and reducing dependencies, resulting in faster load times and improved overall performance compared to its predecessors.