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 tag:

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:
              
                



    Enter fullscreen mode
    


    Exit fullscreen mode
    




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 4d) width
          .w-{ }             25, 50, 100e) height
            .h-{ }                  50, 100f)  border radius.rounded             base class
   .rounded-{ }
   .rounded-circle
      .rounded-pillPosition 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:
    



    Enter fullscreen mode
    


    Exit fullscreen mode
    




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-endGrid System.row   row
.col   responsive column
.col-{ }    column with 12 break points

Syntax:
        
             
             
        



    Enter fullscreen mode
    


    Exit fullscreen mode
    




Text & Font Classesfs-{ }            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-


     Bootstrap
     Welcome to Bootstrap




    Enter fullscreen mode
    


    Exit fullscreen mode
    




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

Syntax:
         Text  



    Enter fullscreen mode
    


    Exit fullscreen mode
    




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 containerInput 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:
    

    



    Enter fullscreen mode
    


    Exit fullscreen mode
    




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



        

        

    



    Enter fullscreen mode
    


    Exit fullscreen mode
    




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:
        
        
            
        




    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  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-linkAttributes: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:
    
         
    




    Enter fullscreen mode
    


    Exit fullscreen mode
    




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:
    
       
        
             // header
            // body
            // footer
        
       
    



    Enter fullscreen mode
    


    Exit fullscreen mode
    




Attributes:data-bs-toggle
    data-bs-target
    data-bs-dismissNote: 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:
    
        
        
        
        
    



    Enter fullscreen mode
    


    Exit fullscreen mode
    




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:
    
        
             
            ... several items ...
        
    



    Enter fullscreen mode
    


    Exit fullscreen mode
    




-- Make sure that any one carousel-item is active.
 --Carousel need to start explicitly by using the attribute "data-bs-ride".
--Carousel requires "slide" class to configure slide animation.
--You can also define fade animation using "carousel-fade" class.
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-iconAttributes :-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:
        



    Enter fullscreen mode
    


    Exit fullscreen mode
    




Carousel Indicators:
Indicators allow random navigation.
You can navigate to any specific item directly.
Class:
.carousel-indicatorsAttributes:
data-bs-slide-to-{ }        index number starts with 0 = first item.
    data-bs-target            it refers to carouse id.

Syntax:
    
                    // every button refers to a carousel item
            
    



    Enter fullscreen mode
    


    Exit fullscreen mode
    




-- 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:
    



    Enter fullscreen mode
    


    Exit fullscreen mode
    




1000 = 1secondCollapse
It is used to show or hide any content dynamically.
Classes:
.collapse
    .showAttributes:
data-bs-target
    data-bs-toggle

Syntax:
      

    



    Enter fullscreen mode
    


    Exit fullscreen mode
    




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-collapseAttributes
data-bs-target
    data-bs-toggle
    data-bs-parent   It is defined for collapse in accordion, it refers to parent ID.

Syntax:
    



    Enter fullscreen mode
    


    Exit fullscreen mode
    




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:
    
        
        
             
        
        
    
    
        
        
    



    Enter fullscreen mode
    


    Exit fullscreen mode
    




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-iconProgress Bar
It is used to show status of any task performed in page.
Classes:
.progress
    .progress-bar
    .progress-bar-striped
    .progress-bar-animated

Syntax:
    
         
        ..... multiple progress bars ...
    



    Enter fullscreen mode
    


    Exit fullscreen mode
    





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:
     




    Enter fullscreen mode
    


    Exit fullscreen mode
    




Pagination
classes:
.pagination
    .page-item
    .page-link
    .page-item-text
    .active
    .disabledDropdown
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-dividerAttributes:
data-bs-toggle
data-bs-theme="dark"

Syntax:
    
         Text 
        
          
        
    



    Enter fullscreen mode
    


    Exit fullscreen mode
    




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:
    
        
         
        
    
     

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

     



    Enter fullscreen mode
    


    Exit fullscreen mode
    




Cards
Classes:
.card
        .card-header
        .card-body
        .card-footer
        .card-title
        .card-subtitle
        .card-img-top
        .card-img-bottom
        .card-img-overlayBadge
 -It is used to highlight any content in a container.Class:
.badgeToast
It is similar to alert.
It can show or hide tips dynamically in page.
Classes:
.toast
        .toast-header
        .toast-body
        .toast-container
        .show
        .fade