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:
- 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>
- Or Downloading the Bootstrap5 from https://getbootstrap.com/
Classes in Bootstrap5:
-
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. -
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>
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
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:
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
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
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
In navs_tabs.html there are all practical examples of navs and tabs classes in bootstrap5:
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
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
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