boostrap5-basics

The Bootstrap5-basics is the repo about the basics of this magical framework. It can also be used as a torurial.

Installation: Boostrap5 is the latest version and there are two ways t install:

1. With CDN we directly paste these two links within the head secstion of HTML. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

If you go with this option, you need to place JavaScript link too within the head section or at the bottom of the body section. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

2. Or Downloading the Bootstrap5 from https://getbootstrap.com/

Description

Classes in Bootstrap5:

1. Container

      Boostrap5 requires container which holds the whole content in. There are two types of container
      classes:
      1. container: provides a fixed width size container.
      2.container-fluid: provides a full width size container.
      The container.html files contains examples of both containers. in bootstrap5.
   

2. Grid System

      Bootstrap allows us 12 column on a page and the grid system has 12 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)
      Example, a row of four columns that each covers quarter of the page:
   <div class="row">
      <div class="col"><h2>HTML</h2>
      <p>Column 1</p>
      </div>
      <div class="col"><h2>CSS</h2> 
      <p>Column 2</p>
      </div>
      <div class="col"><h2>Bootstrap5</h2>
      <p>Column 3</p>
      </div>
      <div class="col"><h2>JavaScript</h2>
      <p>Column 4</p>
      </div>  
    </div>
        Creating 4 equal columns:
     <div class="row">
         <div class="col-sm-3">column 1</div>
         <div class="col-sm-3">column 2</div>
         <div class="col-sm-3">column 3</div>
         <div class="col-sm-3">column 4</div>
     </div>  
        Creating 2 anequal columns:
     <h1 style="text-align:center">How to create 2 anequal columns?</h1>
     <div class="row">
         <div class="col-sm-4">Small Column</div>
         <div class="col-sm-8">Large Column</div>
     </div>
   

Typography

     In typography.html file you will find the following classes and elements:
     1: h1-h6                            6: <kbd></kbd>              11: .text-end          
     2: <display></display>              7: <lead></lead>            12: .list-inline
     3: <small></small>                  8: .text-center             13: .list-inline-item
     4: <mark></mark>                    9: .text-start              14: <blockquote></blockquote>
     5: <pre></pre>                      10: <del></del>             15: <blockquote-footer></blockquote-footer>
                                                                     16: .text-truncate

Colors

     In colors.html file you can find all the classes for .text-colors, bg-colors, and opacity for dark and white colors:
     background Colors:

text-colors:

Tables

  In tables.html you can find all the bootstrap classes for creating tables:
     1: .table                  6: .table-striped                              11: .table-sm                  16: .table-responsive-xl
     2: .table-striped          7: .table .table-dark .table-hover             12: .table-responsive          17: .table-responsive-xxl
     3: .table-bordered         8: .table-borderless                           13: .table-responsive-sm
     4: .table-hover            9: .table-bordered                             14: .table-responsive-md
     5: .table-dark             10: .table-warning                             15: .table-responsive-lg

Images

  The images.html file contains all the image classes in bootstrap 5 as follows:
     1: .img-thumbnail                        |   gives a 1px border around the image
     2: .rounded                              |   gives a rounded corner to the image
     3: .rounded-circle                       |   makes an image absloutely rounded
     4: .rounded mx-auto d-block              |   positions an image at the center
     5: .img-fluid                            |   makes an image responsive which scales to the parent element width
     6: .rounded float-start                  |   floats an image to the left
     7: .rounded float-end                    |   floats an image to the right

Alerts

  In alerts.html all alert classes are included:
  1: .alert alert-success                        6: alert alert-warning         11: Closing alert
  2: .alert alert-secondary                      7: .alert alert-light          12: Additional elements to the alert classes
  3: .alert alert-success                        8: .alert alert-dark
  4: .alert alert-danger                         9: .alert-link
  5: .alert alert-warning                        10: Icons in Alerts

Navs & Tabs

  In navs_tabs.html there are all practical examples of navs and tabs classes in bootstrap5:

Navbar

  This foloder conists of three files:
  The offcanvas_navbar.html contains a practical example of offcanvas navbar.
  
  The top-bottom-navbars.html contains two examples of fixed-top and fixed-bottom navbars.

  The navbars.html contains the practical examples of the following classes:
  1: Horizontal navbar      |      navbar navbar-expand
  2: Vertical navbar        |      navbar
  3: Centered navbar        |      justify-content-center
  4: Colored navbar         |      bg-primary, bg-warning, bg-success, bg-light, bg-info, bg-danger, bg-secondary, bg-dark, 
  5: Barnd/logo             |      navbar-brand
  6: Vertical allingment    |      navbar-text
  7: Dropdown               |      navbar-toggler
  8: Sticky navbar          |       sticky-top, sticky-bottom etc...    
  9: Navbar Form and Button |      Combination of classes

Cards

  The cards.html file includes all available classes for cards in Bootstrap5 such as:
  1: .card                                    9: .card-header
  2: .card-body                               10: .card-footer
  3: .card-title                              11: .card-img-top
  4: .card-subtitle                           12: .card-img-bottom
  5: .card-text                               13: .card-img-overlay
  6: .list-group                              14: .card-group
  7: .list-group-flush                        
  8: .list-group-item                         

Placeholder

  Placeholders can be used to enhance the experience of your application. They are built only with HTML and CSS.
  The placeholders.html files discusses how to create, how to change the size, width, colors, and animation with
  the following classes:
  1: .placeholder
  2: .placeholder-glow
  3: .placeholder-wave
  4: .placceholder-lg
  5: .placeholder-sm
  6: .placeholder-xs