Industrial Training

Content

Bootstrap Alerts
Bootstrap Buttons
Bootstrap Badges
Bootstrap Spinners
Bootstrap Pagination
Bootstrap List Groups
Bootstrap Cards

Bootstrap reference used in session

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" >

Bootstrap Alerts

Bootstrap provides an easy way to create predefined alert messages

Example : Bootstrap Alerts

Output :

Success! This alert box could indicate a successful or positive action.

Info! This alert box could indicate a neutral informative change or action.

Warning! This alert box could indicate a warning that might need attention.

Danger! This alert box could indicate a dangerous or potentially negative action.

Primary! Indicates an important action.

Secondary! Indicates a slightly less important action.

Dark! Dark grey alert.

Code :

<div class="alert alert-success">
    <strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
    <strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class="alert alert-warning">
    <strong>Warning!</strong> This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger">
    <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
<div class="alert alert-primary">
    <strong>Primary!</strong> Indicates an important action.
</div>
<div class="alert alert-secondary">
    <strong>Secondary!</strong> Indicates a slightly less important action.
</div>
<div class="alert alert-dark">
    <strong>Dark!</strong> Dark grey alert.
</div>

Bootstrap Buttons

Output	Code
	`<button type="button" class="btn btn-primary ">Primary</button>`
	`<button type="button" class="btn btn-success">Success</button>`
	`<button type="button" class="btn btn-info">Info</button>`
	`<button type="button" class="btn btn-warning">Warning</button>`
	`<button type="button" class="btn btn-danger">Danger</button>`

Bootstrap Badges

Badges are used to add additional information to any content.

Example : Bootstrap Badges

Output :

Primary Secondary Success Danger Warning Info Light Dark

Code :

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

Bootstrap Spinners

Bootstrap Spinners can be used to show loader

Example : Bootstrap Spinners

Output:

Code:

<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>

Bootstrap Pagination

If you have a web site with lots of pages, you may wish to add some sort of pagination to each page.

Example:Bootstrap Pagination

Output:

Code:

<ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

Bootstrap List Groups

We can design HTML lists using bootstrap

Example:Bootstrap List Groups

Output:

Success item
Secondary item
Info item
Warning item
Danger item
Primary item
Dark item
Light item

Code:

<ul class="list-group">
    <li class="list-group-item list-group-item-success">Success item</li>
    <li class="list-group-item list-group-item-secondary">Secondary item</li>
    <li class="list-group-item list-group-item-info">Info item</li>
    <li class="list-group-item list-group-item-warning">Warning item</li>
    <li class="list-group-item list-group-item-danger">Danger item</li>
    <li class="list-group-item list-group-item-primary">Primary item</li>
    <li class="list-group-item list-group-item-dark">Dark item</li>
    <li class="list-group-item list-group-item-light">Light item</li>
</ul>

Bootstrap Cards

A card in Bootstrap is a bordered box with some padding around its content. It includes options for headers, footers, content, colors, etc.

Example:Bootstrap Cards

Output:

Data Center

Data Center

Some example text some example text. Google has own Data Center

Learn More

Code:

<div class="card">
    <div class="card-header">Data Center</div>
    <img class="card-img-top" src="https://revolutionit.in/img/slider/e2.jpg" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">Data Center</h4>
      <p class="card-text">Some example text some example text. Google has own Data Center</p>
    </div>
    <div class="card-footer"><a href="#" class="btn btn-primary">Learn More</a></div>
</div>