Bootstrap

Published Jun 26, 2021Updated Oct 14, 2022

Bootstrap is an open-source CSS framework created to help style web pages with mobile-first considerations in mind. It was created internally at Twitter in 2011 as a way to solve issues with design consistency across their engineering team. Since its creation, Bootstrap has become one of the most commonly used tools on web pages today.

Bootstrap utilizes web technologies like HTML, CSS, and JavaScript to provide aesthetic improvements to the Document Object Model (DOM) elements on a web page. Additional user interface elements such as dialog boxes, tooltips, and carousels are also available to users.

Installation

There are several ways to install Bootstrap and its source files.

For JavaScript, Bootstrap can be used with a package manager like npm or Yarn:

## npm
npm install bootstrap

## yarn
yarn add bootstrap

For Ruby applications, it can be installed as a gem with a dependency tool like Bundler:

gem 'bootstrap', '~> 5.0.2'

Another way to install Bootstrap for Ruby, but without a tool like Bundler, is with the following command:

gem install bootstrap -v 5.0.2

Instead of being downloaded, Bootstrap’s source files can be linked directly into an HTML file via CDN:

<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
  crossorigin="anonymous"
/>
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
  crossorigin="anonymous"
></script>

Themes

As its popularity grew, people started creating templates based on Bootstrap in order to accelerate the web development process even further. There are many websites out there dedicated to sharing and buying custom templates based on Bootstrap.

Here are the official themes built or reviewed by Bootstrap’s creators: https://themes.getbootstrap.com

Example: Normal Button vs Bootstrap Button

In the example below, Bootstrap is linked into an HTML document via CDN and used with jQuery to provide a button for positive actions.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>

  <body>
    <div class="container">
      <h2>Button</h2>
      <p>The .btn-success class indicates a successful or positive action:</p>

      <button type="button" class="btn btn-success">
        Bootstrap Styled Button
      </button>
      <button type="button">Normal Button</button>
    </div>
  </body>
</html>