Bhabani Sankar

Posted on Mar 24

Bootstrap: A Complete Guide

#webdev #programming #bootstrap #beginners

What is Bootstrap?

Bootstrap is a toolkit that allows developers to build responsive websites faster.
It provides components & plugins for easy design, extend, debug, test and deploy.
It provides tools required form building interactive UI from web and native apps.

How to Use Bootstrap?

Adding Bootstrap to Your Project
There are two main ways to add Bootstrap to your project:
A. Using CDN (Quickest Method)
Add the following lines inside your <head> tag:

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS (Optional, for interactive components) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

B. Installing via NPM

npm install bootstrap

Then, import Bootstrap in your project:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Architecture of Bootstrap
Bootstrap is built using the following technologies:

HTML5 – Defines the structure of the webpage.
CSS3 – Provides styles and responsive layout mechanisms.
JavaScript (Vanilla JS in Bootstrap 5) – Used for interactive components like modals, tooltips, and carousels.
Sass (SCSS) – A CSS preprocessor used for customization.

Bootstrap Classes

Bootstrap provides a set of pre-defined classes that allow to configure various styles for elements.

Container Classes

These classes are configured with pre-defined media queries.
You can use for various devices.

.container small devices [mobile]
.container-sm tab
.container-md PC
.container-lg Laptop
.container-xl Laptop Large Screen
.container-xxl Wide screen devices
.container-fluid It can adjust according to device.

Box Model Classes
a) Margins

.margin-{break-point} all directions, break-point can be 1 to 4
.me-{ } end [right]
.ms-{ } start [left]
.mx-{ } left & right
.mt-{ } top
.mb-{ } bottom
.my-{ } top & bottom

Syntax:
              <div  class="ms-4">
                <span class="mx-3">

b) Padding
.p-{ } all directions 1 to 4
.pe-{ }
.ps-{ }
.px-{ }
.pb-{ }
.pt-{ }
.py-{ }

c) Border
.border base class
.border-{contextual} primary, secondary, danger, warning, success
info, dark, light etc.
.border-{size} 1 to 4

d) width
.w-{ } 25, 50, 100

e) height

.h-{ } 50, 100

f) border radius

.rounded base class
.rounded-{ }
.rounded-circle
.rounded-pill

Position Classes

.position-static
.position-relative
.position-absolute
.position-fixed
.position-sticky
.top-{ }
.start-{ } => 0, 50, 100
.end-{ }
.bottom-{ }

Background & Text Color

.bg-{contextual} .text-{contextual}

Syntax:
    <div class="bg-danger text-light">

Display Classes

.d-none
.d-block
.d-inline
.d-inline-block
.d-flex
.flex-wrap
.flex-row
.flex-column
.justify-content-between
.justify-content-evenly
.justify-content-center
.align-items-center
.align-items-baseline
.align-items-end

Grid System

.row row
.col responsive column
.col-{ } column with 12 break points

Syntax:
        <div class="row">
            <div class="col-2"> </div>
            <div class="col-10"> </div>
        </div>

Text & Font Classes

fs-{ } font size 1 to 7
h{ } heading size 1 to 6
fw-bold font weight
fs-italic font style
text-start left align
text-center center align
text-end right
text-justify justified
text-decoration-underline
text-decoration-overline
text-decoration-linethrough

Ex-

<body class="container-fluid">
     <div class="fs-1 fw-bold text-decoration-underline text-center">Bootstrap</div>
     <span class="h1">Welcome</span> to Bootstrap
</body>

Button Classes

.btn .btn-{contextual} .btn-outline-{contextual} .btn-group .btn-toolbar .btn-close .btn-link .btn-group-vertical .btn-sm .btn-lg

Syntax:
        <button  class="btn btn-primary btn-lg"> Text  </button>

Form Classes

.form-control text, email, url, password, textarea, date & time, number
.form-range range
.form-select dropdown, listbox
.form-check-input radio, checkbox
.form-check-label labels for radio & checkbox
.form-label labels
.form-control-color color
.form-control-file file
.form-switch radio & checkbox container

Input Group Classes

.input-group .input-group-text .input-group-sm | lg

Table Classes

.table .table-hover .table-bordered .table-striped .table-{contextual} .table-responsive .caption-top

Syntax:
    <table  class="table table-hover table-bordered table-dark">

    </table>

Note: Bootstrap 5 requires a container to keep responsive table.

<div class="table-responsive">

        <table>

        </table>

    </div>

List Style & List Group Classes

.list-unstyled removes numbering or bullets
.list-group It removes list style and groups items.
.list-group-item Individual list item
.list-group-item-{contextual} colors
.list-group-horizontal

Syntax:
        <ol class="list-unstyled">
        <ul class="list-group">
          <li class="list-group-item list-group-item-danger">  </li>
        </ul>

Bootstrap Components

A component comprises of 3 basic elements

a) Design
b) Styles
c) Functionality

Design is created with HTML.
Styles are defined with CSS.
Functionality is configured using JavaScript/jQuery.
Bootstrap provides several free components like

alerts
carousel
navbar
progress
spinners
nav tabs etc..

alert

It is a message box embedded into page.
It is used for displaying messages dynamically.
It allows to open or close message dynamically.

Classes:

.alert .alert-{contextual} .alert-dismissible .alert-title .alert-link

Attributes:

data-bs-toggle It refers to component name to use when button clicked.
data-bs-dismiss It attaches close functionality for component.

data-bs-target It refers to the ID of component.

Syntax:
    <div class="alert alert-dismissible">
        <button  data-bs-dismiss="alert"> </button>
    </div>

Modal

It defines a popup dialog box.
Dialog opens with content in backdrop.

Classes:

.modal .modal-dialog .modal-content .modal-header .modal-body .modal-footer .modal-dialog-centered .modal-dialog-scrollable .modal-fullscreen .fade [animation]

Syntax:
    <div class="modal">
       <div class="modal-dialog">
        <div class="modal-content">
             // header
            // body
            // footer
        </div>
       </div>
    </div>

Attributes:

data-bs-toggle data-bs-target data-bs-dismiss

Note: A page may contain several modals, hence every modal must have a reference ID. [Identification]

Offcanvas

It is similar to a modal but have various directions.
You can popup with content in backdrop but the direction can be left, right, top or bottom. [start=left, end=right]

Classes:

.offcanvas .offcanvas-start | end | top | bottom .offcanvas-title .offcanvas-header .offcanvas-body

Syntax:
    <div class="offcanvas offcanvas-start">
        <div class="offcanvas-header">
        </div>
        <div class="offcanvas-body">
        </div>
    </div>

Carousel

It allows to create sliding and fading content in page.
You can control manually and auto.

Basic Carousel Classes:

.carousel .carousel-inner .carousel-item .active .carousel-fade .slide

Syntax:
    <div class="carousel">
        <div class="carousel-inner">
            <div class="carousel-item"> </div>
            ... several items ...
        </div>
    </div>

-- Make sure that any one carousel-item is active.
<div class="carousel-item active"> </div>

--Carousel need to start explicitly by using the attribute "data-bs-ride".
<div class="carousel" data-bs-ride="carousel">

--Carousel requires "slide" class to configure slide animation.
<div class="carousel slide">

--You can also define fade animation using "carousel-fade" class.
<div class="carousel carousel-fade">

Carousel Controls:

Controls allow to navigate between items.
You can move to next or previous item.

Classes :-

.carousel-control-prev .carousel-control-prev-icon .carousel-control-next .carousel-control-next-icon

Attributes :-

data-bs-slide="prev" data-bs-slide="next" data-bs-target="#carousel_id"

--Carousel controls can be light or dark, to apply dark style
data-bs-theme="dark" latest version
carousel-dark pervious version [deprecated]

Syntax:
        <div class="carousel" data-bs-theme="dark">

Carousel Indicators:

Indicators allow random navigation.
You can navigate to any specific item directly.

Class:
.carousel-indicators

Attributes:
data-bs-slide-to-{ } index number starts with 0 = first item.
data-bs-target it refers to carouse id.

Syntax:
    <div class="carousel-indicators">
        <button></button>            // every button refers to a carousel item
        <button></button>    
    </div>

-- Make sure that any one button is active.
Note: The active must match with the carousel-item that is active.

Carousel Timing:

You can control the timing for items.
Timing refers to interval between items.
You can use the attribute "data-bs-interval".

Syntax:
    <div class="carousel-item" data-bs-interval="3000">

1000 = 1second

Collapse

It is used to show or hide any content dynamically.

Classes:
.collapse .show

Attributes:
data-bs-target data-bs-toggle

Syntax:
    <div class="collapse show"  id="p1">  </div>

    <button data-bs-toggle="collapse" data-bs-target="#p1">

Accordion

It is a set of items with show & hide functionality.
Accordion can show or hide using "Mutex" [Mutual Exclusion].
If any one item is open then others are hidden.

Classes:
.accordion .accordion-item .accordion-header .accordion-body .accordion-button .accordion-collapse

Attributes
data-bs-target data-bs-toggle data-bs-parent It is defined for collapse in accordion, it refers to parent ID.

Syntax:
    <div class="accordion-collapse collapse"  data-bs-parent="#accordion_id">

Nav with tabs

It is used for creating tab based navigation.
In one page you can display multiple categories using tabs.
User can switch between tabs.

Classes:
.nav-tabs .nav-pill .nav-item .nav-link .nav-text [obsolete] .nav-item-text .tab-content .tab-pane .nav [base class] .active

Syntax:
    <ul class="nav nav-tabs">
        <li  class="nav-item">
        <a class="nav-link">
            <span class="nav-item-text"> </span>
        </a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane">
        </div>
    </div>

Navbar

It is used to design responsive navigation bar.
It uses media query and changes according device width.

Classes:
.navbar .navbar-expand-{lg | sm} .navbar-nav .navbar-collapse .navbar-dark | light .nav-menu .nav-item .nav-link .nav-item-text .navbar-brand .navbar-toggler .navbar-toggler-icon

Progress Bar

It is used to show status of any task performed in page.

Classes:
.progress .progress-bar .progress-bar-striped .progress-bar-animated

Syntax:
    <div class="progress">
        <div class="progress-bar"> </div>
        ..... multiple progress bars ...
    </div>

The size of progress is defined by using "width".
Width is configured with style attribute and it is defined in "%".

Spinners
classes:
.spinner-grow .spinner-grow-sm|lg .spinner-border .spinner-border-sm | lg

Syntax:
    <span class="spinner-border text-danger"> </span>

Pagination
classes:
.pagination .page-item .page-link .page-item-text .active .disabled

Dropdown

It allows to configure a list that can open in various directions.
List allows complex format of content.

Classes:
.dropdown .dropup .dropend .dropstart .dropdown-toggler .dropdown-menu .dropdown-item .dropdown-item-text .dropdown-divider

Attributes:
data-bs-toggle data-bs-theme="dark"

Syntax:
    <div class="dropdown">
        <button class="dropdown-toggler"> Text </button>
        <ul class="dropdown-menu">
        <li class="dropdown-item"> <span class="dropdown-item-text"> </span></li>
        </ul>
    </div>

Scroll Spy

It is used for intra document navigation.
It can identify the scrolling content and highlight relative titles or menu items.

Attributes:
data-bs-spy="scroll" data-bs-target data-bs-smooth-scroll="true" data-bs-offset="0"

Syntax:
    <nav>
        <div class="list-group"  id="topics">
        <a class="list-group-item list-group-action" href="#topic1"> </a>
        </div>
    </nav>
     <div data-bs-spy="scroll" data-bs-smooth-scroll="true" data-bs-target="#topics">

        .... design headings with ID and content below heading scrollable...

     </div>

Cards
Classes:
.card .card-header .card-body .card-footer .card-title .card-subtitle .card-img-top .card-img-bottom .card-img-overlay

Badge
-It is used to highlight any content in a container.

Class:
.badge

Toast

It is similar to alert.
It can show or hide tips dynamically in page.

Classes:
.toast .toast-header .toast-body .toast-container .show .fade

Amplify your impact where it matters most — building exceptional apps.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started