What is Bootstrap

---

Bootstrap is an open-source css framework or library for fast web development

It has some pre-made html/css,we can use these pre-compiled css in our html document to add css in our webpage

Key feature of bootstrap is to helps developers quickly create responsive and mobile-first website

It also has extensive documentation and community support,which can help developers quickly get up to speed with the framework

How to install Bootstrap

---

To install bootstrap,we may have few options:

1. Using a CDN -We can simply include the bootstrap CSS in your project by linking to a CDN (Content Delivery Network)

This is the easiest and quickiest way to get started with bootstrap

1. Downloading the Bootstrap files: -We can simply include the bootstrap CSS in your project by linking to a CDN (Content Delivery Network)

We can also download the bootstrap file and include them in your project

Why do we use Bootstrap

---

In order to style any HTML tag, like the one shown below, we will need to apply a lot of CSS

But by using Bootstrap, we simply need to write the class name and the browser will request and add the CSS from the CDN server.

HTML

                        
  <button class=“bt”>Click here</button>
      
                    

copy

CSS

                            
.bt{
    border-radius:12px;
    background-color:#dc3545;
    padding:12px;
    color:white;
    border:none;
    width:110px;
    height:50px;
    }
                                    
          
                        

copy

While using bootstrap classes we need to simply write:

            
<button class=“btn btn-danger”>Click here</button>


        

copy

Output of both will be same as:

Click here

Let us discuss each classes of bootstrap one by one:

TYPOGRAPHY

---

Bootstrap provides set of typography styles to create customized headings,inline subheadings ,lists,paragraph,and adding more design-oriented font styles

Here are some commonly used typography classes in bootstrap

Heading Classes

---

These classes are used to create headings of different sizes,they are from class “.h1” to class “.h6”

There are default HTML heading elements also as shown below:

                    
<h1>This is heading1</h1>
<h2>This is heading2</h2>
<h3>This is heading3</h3>
<h4>This is heading4</h4>
<h5>This is heading5</h5>
<h6>This is heading6</h6>
        
                

copy

It is used when you want to match the font styling of a heading but cannot use the associated HTML element then we can use heading classes

For example:

                    
<p class="h1">This is bootstrap heading of class h1</p>
<p class="h2">This is bootstrap heading of class h2</p>
<p class="h3">This is bootstrap heading of class h3</p>
<p class="h4">This is bootstrap heading of class h4</p>
<p class="h5">This is bootstrap heading of class h5</p>
<p class="h6">This is bootstrap heading of class h6</p>
        
                

copy

Display Classes

---

It is used to create large headings with a specific font size

It consist of classes from “display-1” to “display-4”

“display-1” is the largest heading size in bootstrap,it is used for the main heading of a page or section

“display-4” is the smallest heading size in bootstrap

For example:

                    
<p class="display-1">This is bootstrap display-1</p>
<p class="display-2">This is bootstrap display-2</p>
<p class="display-3">This is bootstrap display-3</p>
<p class="display-4">This is bootstrap display-4</p>
        
                

copy

Lead Classes

---

This class is used to add extra spacing and larger font size to a paragraph

It is represented as “lead” class in html document For example:

                    
<p class="lead">This is bootstrap class lead</p>

        
                

copy

Text uppercase and lowercase

---

These classes are used to make the case of text to either uppercase or lowercase For example:

                    
<p class="text-uppercase">this text is all in lowercase</p>
<p class="text-lowercase">THIS TEXT IS ALL IN UPPERCASE</p>
        
                

copy

text-primary, text-success, text-danger,text-warning,text-info-

---

These classes are used to style text with different colors For example:

                    
<p class="text-primary">This text is in primary color</p>
<p class="text-success">This text is in success color</p>
<p class="text-danger">This text is in danger color</p>
<p class="text-warning">This text is in warning color</p>
<p class="text-info">This text is in info color</p>
        
                

copy

text-center, text-left ,text-right

---

These classes are used to align text in center,left and right For example:

                    
<p class="text-center">This text is aligned center</p>
<p class="text-left">This text is aligned left</p>
<p class="text-right">This text is aligned right</p>
                      
        
                

copy

Table Classes

---

Here “.table” class is used to create responsive tables for our website.

Bootstrap tables are designed to be fully responsive,meaning it will adjust layout and appearance to fit different screen sizes and devices

For example:

            
<!DOCTYPE html>
<html>
<head>
    <title>My First website</title>
    <meta name="description" content="This is a description of my first website">
</head>

<body>
<table class="table">
<thead>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
</thead>
    <tbody>
        <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
        <td>Row 1, Column 3</td>
        </tr>
        <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
        <td>Row 2, Column 3</td>
        </tr>
        <tr>
        <td>Row 3, Column 1</td>
        <td>Row 3, Column 2</td>
        <td>Row 3, Column 3</td>
        </tr>
    </tbody>
    </table>
</body>

</html>
            

        

copy

Striped and bordered tables:Use “table-striped” class to create tables with striped and bordered rows,which can help make your tables more visually appealing and easier to read

For example:

                        
<!DOCTYPE html>
<html>
<head>
    <title>My First website</title>
    <meta name="description" content="This is a description of my first website">
</head>

<body>
<table class="table table-striped">
<thead>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
</thead>
    <tbody>
        <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
        <td>Row 1, Column 3</td>
        </tr>
        <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
        <td>Row 2, Column 3</td>
        </tr>
        <tr>
        <td>Row 3, Column 1</td>
        <td>Row 3, Column 2</td>
        <td>Row 3, Column 3</td>
        </tr>
    </tbody>
    </table>
</body>

</html>
                        
            
                    

copy

Hover and active states:”table-hover” class provides creating hover and active table rows within table body,making it easier to read

For example:

                         
<!DOCTYPE html>
<html>
<head>
    <title>My First website</title>
    <meta name="description" content="This is a description of my first website">
</head>

<body>
<table class="table table-hover">
<thead>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
</thead>
    <tbody>
        <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
        <td>Row 1, Column 3</td>
        </tr>
        <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
        <td>Row 2, Column 3</td>
        </tr>
        <tr>
        <td>Row 3, Column 1</td>
        <td>Row 3, Column 2</td>
        <td>Row 3, Column 3</td>
        </tr>
    </tbody>
    </table>
</body>

</html>
    
             
                     

copy

Table bordered:“.table-bordered” class adds border on all the sides of the table and cells

For example:

                              
<!DOCTYPE html>
<html>
<head>
    <title>My First website</title>
    <meta name="description" content="This is a description of my first website">
</head>

<body>
<table class="table table-bordered">
<thead>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
</thead>
    <tbody>
        <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
        <td>Row 1, Column 3</td>
        </tr>
        <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
        <td>Row 2, Column 3</td>
        </tr>
        <tr>
        <td>Row 3, Column 1</td>
        <td>Row 3, Column 2</td>
        <td>Row 3, Column 3</td>
        </tr>
    </tbody>
    </table>
</body>

</html>
                              
                  
                          

copy

Table responsive:“.table-responsive” used to create responsive tables.The table will then scroll horizontally on small devices

For example:

                              
<!DOCTYPE html>
<html>
<head>
    <title>My First website</title>
    <meta name="description" content="This is a description of my first website">
</head>

<body>
<table class="table table-responsive table-bordered">
<thead>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
</thead>
    <tbody>
        <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
        <td>Row 1, Column 3</td>
        </tr>
        <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
        <td>Row 2, Column 3</td>
        </tr>
        <tr>
        <td>Row 3, Column 1</td>
        <td>Row 3, Column 2</td>
        <td>Row 3, Column 3</td>
        </tr>
    </tbody>
    </table>
</body>

</html>
                              
                  
                          

copy

Contextual Classses:classes-These are used to color tables,table rows or individual cells

For example:

                              
    <table class="table table-responsive table-primary">
        <thead>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </thead>

    </table>

    <table class="table table-responsive table-secondary">
        <thead>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </thead>

    </table>

    <table class="table table-responsive table-success">
        <thead>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </thead>
    </table>

    <table class="table table-responsive table-danger">
        <thead>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </thead>
    </table>

    <table class="table table-responsive table-warning">
        <thead>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </thead>
    </table>
                  
                          

copy

Form-Control

---

Bootstrap provide classes to adjust the size of input fields

These classes are used with ‘form-control’ class to adjust the width of input fields.The available size classes are:

• ‘form-control-sm’-It is used to create smaller input fields
• ‘form-control-lg’-It is used to create larger input fields

“form-group”-This class is used to group each form elements

Alert

---

Alert class in bootstrap can be used to display important messages to the user

The ‘alert’ component comes in several different variations like success,info,warning and danger

                        
<div class="alert alert-primary" >
    A simple primary alert—check it out!
    </div>

    <div class="alert alert-secondary" >
    A simple secondary alert—check it out!
    </div>

    <div class="alert alert-success" >
    A simple success alert—check it out!
    </div>

    <div class="alert alert-danger" >
    A simple danger alert—check it out!
    </div>

    <div class="alert alert-warning" >
    A simple warning alert—check it out!
    </div>

    <div class="alert alert-info" >
    A simple info alert—check it out!
    </div>

    <div class="alert alert-light" >
    A simple light alert—check it out!
    </div>

    <div class="alert alert-dark" >
    A simple dark alert—check it out!
    </div>
            
                    

copy

Buttons

---

Bootstrap provides a number of classes for creating button with different styles and size

“btn”-This class create a basic button.it set up basic styles such as padding and content alignment.

By default “.btn” have a transparent border and background color

                            
<button type="button" class="btn">Base class</button>

                
                        

copy

Here “btn” is used are used in conjunctions with our button variants

Variants

Different button variants to create buttons with different styles and color like btn-primary,btn-success

                            
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
                
                        

copy

We can also create different size buttons by:

1. “btn-lg”-This class is used to create a large button
2. “btn-sm”-This class is used to create small buttons

                            
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
                
                        

copy

Disabled state

This is used to create disabled button,prevents users from clicking on button

To create a disabled button,add the “disabled” attribute to the button element

                        
<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
            
                    

copy

Containers

---

A container class is used to contain and center the content of a webpage

It is used to wrap the entire HTML content of a page and provides a responsive fixed width container

It is represented by a class named as “container” .

            
<div class="container">
    <h1 class="display-1">This is heading with class as display-1</h1>
    <p class="lead">This is paragraph with class as lead</p>
</div>

        

copy

Grid System

---

In the bootstrap grid system, a row is a horizontal grouping of columns

Each row must be contained within a container or container-fluid element.

Columns are used to create the actual layout within a row.

It uses 12-column layout ,which means that each row can be divided into upto 12 columns.

                                    
<div class="container">
<div class="row">
        <div class="col-8">This is first div</div>
        <div class="col-2">This is second div</div>
        <div class="col-2">This is third div</div>
    </div>
</div>
                        
                                

copy

Bootstrap also provides several column sizes for different screen sizes.These column sizes are using classes such as ‘col-sm-’, ‘col-md-’, ‘col-lg-’,etc.These classes can be used to create responsive layouts

                                        
        <div class="container">
        <div class="row">
            <div class="col-md-6">This is first div</div>
            <div class="col-md-6">This is second div</div>
        </div>
    </div>
                            
                                    

copy

Spacing

---

Bootstrap provides set of classes for adding margin and padding to the elements on our webpage

These classes can quickly add spacing between elements or adjust the spacing between them

Here are some of the most common spacing classes:

‘m’-Adds margin to an element on all sides
‘mt’-Adds margin to the top of an element
‘mb’-Adds margin to the bottom of an element
‘ml’-Adds margin to the left of an element
‘mr’-Adds margin to the right of an element
‘mx’-Adds horizontal margin ,that is from top and bottom margin of an element
‘my’-Adds vertical margin ,that is from top and bottom margin of an element

                                        
                                         
    <div class="container">
        <div class="m-3">
            This element has margin on all sides.
        </div>
    </div>
    <div class="container">
        <div class="mt-3 mb-4">
            This element has margin on the top and bottom.
        </div>
        </div>

    <div class="container">
        <div class="mx-3">
            This element adds vertical margin i.e left and right
        </div>
    </div>

    <div class="container">
        <div class="my-3">
            This element adds horizontal margin i.e top and bottom
        </div>
    </div>
                            
                                    

copy

Each of these classes can be used with a number from 0 to 5 to specify the amount of spacing

For example ‘mt-2’ adds a margin of 2 units from the top of an elementv

Navbar

---

Bootstrap navbar is used to create a responsive navigation menu for our website

This navbar is designed to work on both desktop and mobile device

It also provide many in-build features such as support for dropdown menu,forms

To use the navbar component in Bootstrap,you can follow these steps:

1. Add the required Bootstrap CSS and JavaScript files to your HTML document

2. Create a <nav>> element with the class 'navbar' and any additional classes you want to use for styling.

3. Add a branding element to the navbar using the class navbar-brand.

4. Add a button to toggle the visibility of the navigation links on smaller screens using the classes 'navbar-toggler' and 'navbar-toggler-icon'.

5.Add a <div> element with the class collapse navbar-collapse and an ID that matches the data-target attribute of the toggler button. Inside this element, add the navigation links using the <ul> and <li> elements with the class nav-item and nav-link

Example:

                                            
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">My Website</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
            </ul>
        </div>
        </nav>
                                
                                        

copy