Bootstrap

Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
Bootstrap also gives you the ability to easily create responsive designs

Bootstrap
Advantages of Bootstrap:


Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap

Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops

Mobile-first approach: In Bootstrap, mobile-first styles are part of the core framework

Browser compatibility: Bootstrap 5 is compatible with all modern browsers (Chrome, Firefox, Edge, Safari, and Opera).

Note that if you need support for IE11 and down, you must use either BS4 or BS3.
  1. Stater Template
    Stater Template
    One advantage of using the Bootstrap 5 CDN:

    Many users already have downloaded Bootstrap 5 from jsDelivr when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.



    JavaScript? Bootstrap 5 uses JavaScript for different components (like modals, tooltips, popovers etc). However, if you just use the CSS part of Bootstrap, you don't need them. 
                         
                        <!DOCTYPE html>
                        <html lang="en">
                          <head>
                            <meta charset="UTF-8" />
                            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
                            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                            <title>Document</title>
                            <!-- Bootstrap CSS -->
                            <link
                              href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
                              rel="stylesheet"
                              integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
                              crossorigin="anonymous"
                            />
                          </head>
                          <body>
                        
                        
                        
                        
                            <!-- Bootstrap JS -->
                            <script
                              src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
                              integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
                              crossorigin="anonymous"
                            ></script>
                          </body>
                        </html>
  2. Separate css and js cdn 
                                         
                                        
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
                                        
        
                 
                

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  3. Containers
    Containers
    Containers are used to pad the content inside of them, and there are two container classes available:

    The .container class provides a responsive fixed width container
    The .container-fluid class provides a full width container, spanning the entire width of the viewport

    1. Fixed Container:Use the .container class to create a responsive, fixed-width container. Note that its width (max-width) will change on different screen sizes:
      Extra small
      <576px       		Small
      ≥576px       		Medium
      ≥768px       		Large
      ≥992px       		Extra Large
      ≥1200px       		XXL
      ≥1400px
      max-width 100% 540px 720px 960px 1140px 1320px
    2. Fluid Container: Use the .container-fluid class to create a full width container, that will always span the entire width of the screen (width is always 100%)

    Fixed container

                     
                <div class="container">
    
  </div>

    fluid container

                     
                <div class="container-fluid">
    
                </div>
  4. Grid System
    Grid System
    Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.
    If you do not want to use all 12 columns individually, you can group the columns together to create wider columns

    The grid system is responsive, and the columns will re-arrange automatically depending on the screen size.
    Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns).


    The Bootstrap 5 grid system has six classes:

    .col- (extra small devices - screen width less than 576px)
    .col-sm- (small devices - screen width equal to or greater than 576px)
    .col-md- (medium devices - screen width equal to or greater than 768px)
    .col-lg- (large devices - screen width equal to or greater than 992px)
    .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
    .col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)
    The classes above can be combined to create more dynamic and flexible layouts.

    Tip: Each class scales up, so if you want to set the same widths for sm and md, you only need to specify sm.


    span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
     span 4  span 4  span 4
    span 4 span 8
    span 6 span 6
    span 12 
        
        <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
  5. Text/Typography
    Text/Typography
    Bootstrap 5 Default Settings
    Bootstrap 5 uses a default font-size of 1rem (16px by default), and its line-height is 1.5.

    In addition, all

    elements have margin-top: 0 and margin-bottom: 1rem (16px by default).

    Class Description
    .lead Makes a paragraph stand out
    .text-start Indicates left-aligned text
    .text-break Prevents long text from breaking layout
    .text-center Indicates center-aligned text
    .text-decoration-none Removes the underline from a link
    .text-end Indicates right-aligned text
    .text-nowrap Indicates no wrap text
    .text-lowercase Indicates lowercased text
    .text-uppercase Indicates uppercased text
    .text-capitalize Indicates capitalized text
    .initialism Displays the text inside an <abbr> element in a slightly smaller font size
    .list-unstyled Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well)
    .list-inline Places all list items on a single line (used together with .list-inline-item on each <li> elements) 
        
       
<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>
  6. Colours
    Colours

    Text Colors:.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light


    Background Colors: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.


    .text-bg-color used for background colors
    Primary
    Secondary
    Success
    Danger
    Warning
    Info
    Light
    Dark

    text colour

        
        <div class="text-primary"></div>

    background colour

        
        <div class="bg-primary"></div>

    text background colour

    
    <div class="text-bg-color"></div>