Introduction to Bootstrap

Bootstrap is a popular CSS framework used to build responsive and modern websites quickly.

It provides:

• Ready-made components
• Responsive grid system
• Utility classes
• JavaScript components
• Faster UI development

Why Use Bootstrap?

• Responsive Design
• Faster Development
• Mobile First
• Prebuilt Components
• Easy Customization

Breakpoints

Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively.

How they work

Containers are the most basic layout element in Bootstrap and are required when using our default grid system.

Bootstrap comes with three different containers:

• .container, which sets a max-width at each responsive breakpoint
• .container-fluid, which is width: 100% at all breakpoints
• .container-{breakpoint}, which is width: 100% until the specified breakpoint

Grid System

Bootstrap grid uses:

• 12 columns
• Flexbox

Basic Structure

<div class="container">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
  </div>
</div>

Column Sizes

col-6
col-4
col-3

Responsive Grid

<div class="col-md-6 col-lg-4">

Meaning:

• Medium screen → 6 columns
• Large screen → 4 columns

Auto Columns

<div class="col">

Automatically shares space.

Row Gap & Column Gap

g-3
gx-4
gy-5

Typography

Headings

<h1>Heading</h1>


<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

Text Alignment

text-center
text-start
text-end

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading a larger, slightly more opinionated heading style.

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Font Weight

fw-bold
fw-light
fw-semibold

Text Transform

text-uppercase
text-lowercase
text-capitalize

Colors & Backgrounds

Text Colors

text-primary
text-success
text-danger
text-warning

Background Colors

bg-primary
bg-dark
bg-light

Opacity

text-opacity-50
bg-opacity-75

Spacing Utilities

Bootstrap spacing uses:

• m → margin
• p → padding

Scale:

0 → 5

Examples

mt-5
mb-3
ms-4
me-2
p-5
px-3
py-4

Sizing Utilities

Width

w-25
w-50
w-75
w-100

Height

h-25
h-50
h-100

Viewport

vh-100
min-vh-100

Borders & Shadows

Borders

border
border-0
border-top
border-danger

Rounded

rounded
rounded-circle
rounded-pill

Shadows

shadow
shadow-sm
shadow-lg

 Display Utilities

d-block
d-inline
d-inline-block
d-flex
d-none

Responsive Display

d-md-none
d-lg-block

Flexbox Utilities

Bootstrap provides flexbox classes.

Enable Flex

d-flex

Direction

flex-row
flex-column

Justify Content

justify-content-center
justify-content-between
justify-content-around

Align Items

align-items-center
align-items-start

Flex Wrap

flex-wrap

Position Utilities

position-relative
position-absolute
position-fixed
position-sticky

Position Values

top-0
start-0
end-0
bottom-0

Translate Middle

translate-middle

Bootstrap Icons

Official icon library.

CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">

Example:

<i class="bi bi-house"></i>

Navbar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>

Buttons

<button class="btn btn-primary">Click</button>

Button Types

btn-success
btn-danger
btn-warning
btn-outline-primary

Cards

<div class="card">
  <img src="img.jpg" class="card-img-top">

  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <p>Content</p>
  </div>
</div>

Forms

Input

<input type="text" class="form-control">

Label

<label class="form-label">Name</label>

Select

<select class="form-select"></select>

Checkbox

<input class="form-check-input">

Validation

is-valid
is-invalid

Tables

<table class="table">

Table Classes

table-striped
table-bordered
table-hover
table-dark

Responsive Table

<div class="table-responsive">

Alerts & Badges

Alerts

<div class="alert alert-success">
  Success
</div>

Dismissible Alert

alert-dismissible
btn-close

Badges

<span class="badge bg-primary">New</span>

 Progress Bars & Spinners

Progress Bar

<div class="progress">
  <div class="progress-bar w-75"></div>
</div>

Spinner

<div class="spinner-border"></div>

Accordion & Collapse

Accordion

<div class="accordion">

Used for FAQs.

Collapse

data-bs-toggle="collapse"

Modals

Popup component.

<button data-bs-toggle="modal" data-bs-target="#exampleModal">

Important Parts

• modal
• modal-dialog
• modal-content
• modal-header
• modal-body
• modal-footer

Carousel

Image slider.

<div id="carouselExample" class="carousel slide">

Features

• Auto slide
• Indicators
• Controls 

Offcanvas

Sidebar menu.

<div class="offcanvas offcanvas-start">

Directions:

• start
• end
• top
• bottom

Advanced Utilities

Overflow

overflow-hidden
overflow-scroll

Visibility

visible
invisible

Z-index

z-1
z-2
z-3