Introduction to Bootstrap

Bootstrap is the world's most popular front-end open source toolkit. It features Sass variables and mixins, a highly responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

Why Use Bootstrap?

Build Fast

Quickly design and customize responsive mobile-first sites. No need to write CSS from scratch for basic components.

CSS & JS Included

Comes with dozens of styled UI components (Cards, Modals, Accordions) and the JavaScript required to animate them instantly.

Consistency

Provides a rigid design system so a team of developers can produce perfectly matching UI elements without conflicting styles.

How to Install & Use Bootstrap

Method 1: via CDN (Fastest)CSS (Required)

index.html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Method 1: via CDN (Fastest)JavaScript Bundle (Optional)

index.html

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmxc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

Method 2: via NPM (React / Node environments)Installation

Terminal

npm i bootstrap@5.3.3

Method 2: via NPM (React / Node environments)Import Entry Point

App.js

import 'bootstrap/dist/css/bootstrap.min.css';
// If you need Javascript components:
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Official Learning Resources

The best way to master Bootstrap is by reading its incredible official documentation. While this cheatsheet provides you with the most commonly used components, the official website offers hundreds of interactive variations, SCSS custom variable overrrides, and deep component APIs!

Visit Official Bootstrap 5.3 Documentation