Getting Started with Bootstrap

Installation Methods

1. CDN (Content Delivery Network)

The easiest way to include Bootstrap in your project is via CDN:


<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" 
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

Note: The bootstrap.bundle.min.js file includes Popper, which is required for dropdowns, popovers, and tooltips.

2. Package Managers

For more control and integration with build tools:


# npm
npm install bootstrap@5.3.2

# yarn
yarn add bootstrap@5.3.2

Then import Bootstrap in your JavaScript:


// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'

// Or import only what you need
import { Modal, Tooltip } from 'bootstrap'

And import Bootstrap's Sass files in your main Sass file:


// Import Bootstrap's Sass
@import "~/node_modules/bootstrap/scss/bootstrap";

// Or import only what you need
@import "~/node_modules/bootstrap/scss/functions";
@import "~/node_modules/bootstrap/scss/variables";
@import "~/node_modules/bootstrap/scss/mixins";
@import "~/node_modules/bootstrap/scss/grid";
@import "~/node_modules/bootstrap/scss/utilities";

3. Download

You can download the compiled and minified CSS and JS files directly from the Bootstrap website.

Basic Template

Here's a starter template that includes Bootstrap via CDN:


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <h1>Hello, world!</h1>
      <p>This is a Bootstrap 5 template.</p>
      <button class="btn btn-primary">Click me</button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Important: Always include the viewport meta tag to ensure proper responsive behavior on mobile devices.

Bootstrap's Grid System Basics

Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive.

Key Concepts

Containers - Center and horizontally pad your content
Rows - Wrappers for columns with negative margins to align content
Columns - Content containers with padding that specify width across breakpoints
Gutters - Padding between columns for spacing content

Basic Grid Example


<div class="container">
  <div class="row">
    <div class="col-sm-4">
      Column 1
    </div>
    <div class="col-sm-4">
      Column 2
    </div>
    <div class="col-sm-4">
      Column 3
    </div>
  </div>
</div>

This creates a row with three equal-width columns on small screens and larger.

Responsive Breakpoints

Bootstrap includes six default breakpoints for responsive design:

Breakpoint	Class Infix	Dimensions
Extra small	None	<576px
Small	`sm`	≥576px
Medium	`md`	≥768px
Large	`lg`	≥992px
Extra large	`xl`	≥1200px
Extra extra large	`xxl`	≥1400px

Use these breakpoints in your grid classes to control how your layout responds at different screen sizes:


<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <!-- Full width on extra small, half width on medium, one-third on large -->
      Content
    </div>
  </div>
</div>

Container Types

1. Fixed-width Container


<div class="container">
  <!-- Content here -->
</div>

Width changes at each breakpoint:

100% width until 576px
540px from 576px
720px from 768px
960px from 992px
1140px from 1200px
1320px from 1400px

2. Fluid Container


<div class="container-fluid">
  <!-- Content here -->
</div>

100% width at all breakpoints.

3. Responsive Containers


<div class="container-sm">
  <!-- 100% wide until sm breakpoint, then fixed width -->
</div>

<div class="container-md">
  <!-- 100% wide until md breakpoint, then fixed width -->
</div>

<div class="container-lg">
  <!-- 100% wide until lg breakpoint, then fixed width -->
</div>

<div class="container-xl">
  <!-- 100% wide until xl breakpoint, then fixed width -->
</div>

<div class="container-xxl">
  <!-- 100% wide until xxl breakpoint, then fixed width -->
</div>

Pro Tip: Use container-fluid for full-width layouts and container for centered, fixed-width layouts. Use responsive containers when you want the container to be full-width until a specific breakpoint.