How to install Bootstrap

Created

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Bootstrap is among the most starred projects on GitHub, with more than 142,000 stars

Installation

You can download the latest version of Bootstrap from the GitHub releases or use a Bootstrap CDN.

GitHub

Latest:2021-08-29 16:16:32
License:MIT License
Cloning with HTTPS URLs
git clone https://github.com/twbs/bootstrap.git
Cloning with SSH URLs
git clone [email protected]:twbs/bootstrap.git
Cloning with GitHub CLI
gh repo clone twbs/bootstrap

NPM

Version:5.1.0
Publish Time:2021-08-04 23:47:32
Unpacked Size:8.17 MB
Next Version:5.0.0-beta3
Publish Time:2021-03-24 00:31:55
Unpacked Size:7.93 MB
Downloading and installing packages locally
npm i bootstrap
npm install bootstrap
yarn add bootstrap
Downloading and installing packages globally
npm i -g bootstrap
yarn global add bootstrap
Install Specific Version of a Package
npm install [email protected]
Bower
bower install bootstrap

For more information about Bootstrap see https://getbootstrap.com/docs.

Why Bootstrap?

  • checkPreprocessors - Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source.
  • checkOne framework, every device - Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.
  • checkFull of features - With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.

Basic template

Copy the HTML below to begin working with a minimal Bootstrap document.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
    -->
  </body>
</html>