
What is Bootstrap?
Example for Bootstrap
<div class="container-fluid pt-5 bg-dark text-white border"> <p>Bootstrap Page</p> </div> <div class="container pt-5"> <div class="row"> <div class="col"> <h6>column1</h6> <p>Here we are going to learn about Bootstrap Styling for web pages</p> </div> <div class="col"> <h6>column2</h6> <p>we will learn how to make web pages responsive</p> </div> </div> </div>
How to use Bootstrap?
//Latest complied and minified css <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> //Latest complied Javascript <script src="https://cdn.jsdelivr.net/npm/bootst[email protected]/dist/js/bootstrap.bundle.min.js">/script>
Containers
//Example for container class <div class="container pt-5 border> <p>welcome to Bootstrap</p> </div> //Example for container-fluid class <div class="container-fluid pt-5 border> <p>welcome to Bootstrap</p> </div>
Container padding
Container padding has default left, right padding but it doesn't have have top and bottom padding, hence we make use of spacing utilities for example top padding which can be provided as pt-5.
Container Border and color- Adds color and border
<div class="container pt-5 bg-primary text-white border"> <p>welcome to Bootstrap</p> </div>
Responsive containers
Bootstrap5 Grid
Bootstrap5 grid is built with flexbox, Bootstrap5 grid is responsive and the columns will get re-arranged automatically according to screen size
Equal Columns
//Example that creates equal column <div class="container pt-5"> <div class="row"> <div class="col">column1</div> <div class="col">column2</div> </div> </div>
Responsive Columns
//Example that creates responsive columns <div class="container pt-5"> <div class="row"> <div class="col-sm-3">column1</div> <div class="col-sm-3">column2</div> </div> </div>
Unequal Columns
//Example that creates various width column <div class="container pt-5"> <div class="row"> <div class="col-sm-4">column1</div> <div class="col-sm-8">column2</div> </div> </div>
Bootstrap5 Cards
Card is a bordered box which consist of Header, Content, Footer
<div class="card"> <div class="card-header">Consist of header part</div> <div class="card-body bg-primary">consist body part of the card</div> <div class="card-footer">consist footer part of the card</div> </div>