Content

  • Bootstrap Introduction
  • Advantages of Bootstrap
  • How to get Bootstrap files ?
  • Bootstrap container, row and grid system
  • Bootstrap tables
  • Bootstrap images

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
  • 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, maximum columns allowed in row is 12.
Bootstrap's grid system allows up to 12 columns across the page.
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" style="height: 250px;background-color: rgb(233, 120, 120);"></div>
    <div class="col-md-4" style="height: 250px;background-color: rgb(238, 189, 98);"></div>
    <div class="col-md-4" style="height: 250px;background-color: yellowgreen;"></div>
    </div>
</div>

Bootstrap tables

.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 and .table-bordered classes adds extra styling to .table

Bootstrap images

Output Code
Rounded Corners :
 
<img src="https://revolutionit.in/img/slider/e2.jpg"  class="rounded" style="height: 100px;"  alt="">
Image in circle :
 
<img src="https://revolutionit.in/img/slider/e5.jpg"  class="rounded-circle" style="height: 100px;" alt="">
Bordered Image :
 
<img src="https://revolutionit.in/img/slider/e1.jpg"  class="img-thumbnail" style="height: 100px;" alt="">