What is Bootstrap?

• Bootstrap is a front-end frame work for easier web development.
• Bootstrap consist of HTML and CSS based design for forms, tables, button, navigation, image carousels and many other to be continued.
• Bootstrap is used to create responsive designs.
• Responsive Web designs creates web styles that automatically get adjusted on all devices, from small screen device to large screen desktop.

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?

• Download Bootstrap from getbootstrap.com.
• We can include Bootstrap from Content delivery network(CDN).

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

• .container class with fixed width container
• .container-fluid class with full width container

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

• .container-sm
• .container-md
• .container-lg
• .container-xl

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>