Content

• Bootstrap Introduction
• Advantages of Bootstrap
• How to get Bootstrap Files ?
• Bootstrap container, row and grid system
• Bootstrap Tables
• Bootstrap Images
• Bootstrap Jumbotron

Bootstrap Introduction

• Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.
• Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.
• 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

---

Advantages of Bootstrap

• Easy to use: It requires only basic knowledge of HTML and CSS
• Responsive design: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
• Highly customizable: We can add our own css OR we can customize the existing bootstrap css
• Browser compatibility: Bootstrap is compatible with all modern browsers

---

How to get Bootstrap files ?

There are two ways to start using Bootstrap on your own web site.

• Download Bootstrap from getbootstrap.com (Official website)
• Include Bootstrap from a CDN

Example : Bootstrap CDN references

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  

---

Bootstrap container, row and grid system

• .container class provides a responsive fixed width container
• .container-fluid class provides a full width container, spanning the entire width of the viewport
• .row provides the columns a place to live.
• Bootstrap's grid system allows up to 12 columns across the page.
• If you do not want to use all 12 column individually, you can group the columns together to create wider columns
• Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size

Bootstrap Grid Classes

• xs (for phones - screens less than 768px wide)
• sm (for tablets - screens equal to or greater than 768px wide)
• md (for small laptops - screens equal to or greater than 992px wide)
• lg (for laptops and desktops - screens equal to or greater than 1200px wide)

Example : Structure of Bootstrap Grid

<div class="container">
    <div class="row">
        <div class="col-*-*"></div>
        <div class="col-*-*"></div>
    </div>
    <div class="row">
        <div class="col-*-*"></div>
        <div class="col-*-*"></div>
        <div class="col-*-*"></div>
    </div>
    <div class="row">
    ...
    </div>
</div>

---

Example : Bootstrap Grid

Output :

---

Code :

<div class="container">
    <div class="row">
        <div class="col-md-4 my-2">
            <img src="https://revolutionit.in/img/slider/e2.jpg" class="img-fluid" >
        </div>
        <div class="col-md-4 my-2">
            <img src="https://revolutionit.in/img/slider/e1.jpg" class="img-fluid" >
        </div>
        <div class="col-md-4 my-2">
            <img src="https://revolutionit.in/img/slider/e3.jpg" class="img-fluid" >
        </div>
    </div>
</div>

Note: mx (left and right margin) and my (top and bottom margin) are margin clasees in bootstrap, here we have applied my-2 class i.e. top and bootom margin

---

.table class adds basic styling to a table

Example

Output:

Firstname	Lastname	Email
ABC	PQR	abc@example.com
DEF	HIJ	def@example.com
XYZ	ZXY	xyz@example.com

---

Code :

<table class="table">
<thead>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>ABC</td>
        <td>PQR</td>
        <td>abc@example.com</td>
    </tr>
    <tr>
        <td>DEF</td>
        <td>HIJ</td>
        <td>def@example.com</td>
    </tr>
    <tr>
        <td>XYZ</td>
        <td>ZXY</td>
        <td>xyz@example.com</td>
    </tr>
</tbody>
</table>

.table-striped class adds zebra-stripes to a table

Example

Output:

Firstname	Lastname	Email
ABC	PQR	abc@example.com
DEF	HIJ	def@example.com
XYZ	ZXY	xyz@example.com

---

Code :

<table class="table table-striped">
<thead>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>ABC</td>
        <td>PQR</td>
        <td>abc@example.com</td>
    </tr>
    <tr>
        <td>DEF</td>
        <td>HIJ</td>
        <td>def@example.com</td>
    </tr>
    <tr>
        <td>XYZ</td>
        <td>ZXY</td>
        <td>xyz@example.com</td>
    </tr>
</tbody>
</table>

.table-bordered class adds borders to table

Example

Output:

Firstname	Lastname	Email
ABC	PQR	abc@example.com
DEF	HIJ	def@example.com
XYZ	ZXY	xyz@example.com

---

Code :

<table class="table table-bordered">
<thead>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>ABC</td>
        <td>PQR</td>
        <td>abc@example.com</td>
    </tr>
    <tr>
        <td>DEF</td>
        <td>HIJ</td>
        <td>def@example.com</td>
    </tr>
    <tr>
        <td>XYZ</td>
        <td>ZXY</td>
        <td>xyz@example.com</td>
    </tr>
</tbody>
</table>