Content

• Bootstrap Popover
• Bootstrap Toast
• Bootstrap Icons
• Bootstrap Media Objects
• Bootstrap Progress Bar
• Bootstrap Utilities

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 Popover

The Popover component is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content.

Example : Bootstrap Popover

Output :

Code :

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

Note:Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.

The following code will enable all popovers in the document:

<script>>
$(document).ready(function(){
  $('[data-toggle="popover"]').popover();
});</script>

Bootstrap Toast

The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).

Example : Bootstrap Toast

Code :

<button type="button" class="btn btn-primary" id="myBtn">Show Toast</button>
  <div class="toast mt-3">
            <div class="toast-header">
              Toast Header
            </div>
            <div class="toast-body">
              Some text inside the toast body
            </div>
  </div>

<script>>
$(document).ready(function(){
  $('#myBtn').click(function(){
    $('.toast').toast({delay: 2000});
    $('.toast').toast('show');
  });
});
</script>

Bootstrap Icons

From Bootstrap 4, it does not have its own icon library (Glyphicons from Bootstrap 3 are not supported in BS4). However, there are many free icon libraries to choose from, such as Font Awesome and Google Material Design Icons.

We have to use respective CDN/CSS file to use icons

Font Awesome CDN:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" >

Example : Bootstrap Icons

Output:

Code:

<i class="fas fa-cloud"></i>
<i class="fas fa-coffee"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

Bootstrap Media Objects

Bootstrap provides an easy way to align media objects (like images or videos) together with content. Media objects are often used to display blog comments, tweets and so on:

Example: Bootstrap Media Objects

Output:

Revolution Posted on March 19, 2022

Revolution IT Solutions is one of the reputed and leading IT companies of India founded in 2015. We provide next generation digital services that look great and are easy-to-use which helps our clients to grow their business successfully.

Code:

<div class="media border p-3">
  <img src="https://revolutionit.in/img/slider/e5.jpg" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
  <div class="media-body">
    <h4>Revolution <small><i>Posted on March 19, 2022</i></small></h4>
    <p style="text-align: justify;">Revolution IT Solutions is one of the reputed and leading IT companies of India founded in 2015. We provide next generation digital services that look great and are easy-to-use which helps our clients to grow their business successfully.</p>      
  </div>
</div>

Font Awesome CDN

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

Bootstrap Progress Bar

A progress bar can be used to show a user how far along he/she is in a process.

Example:Bootstrap Progress Bar

Output:

Code:

<div class="progress">
  <div class="progress-bar" style="width:50%"></div>
</div>

Bootstrap Utilities

Bootstrap has a lot of utility/helper classes to quickly style elements without using any CSS code.

Example : Bootstrap Utilities

Output:

Code:

<span class="spancls rounded-sm"></span>
<span class="spancls rounded"></span>
<span class="spancls rounded-lg"></span>
<span class="spancls rounded-top"></span>
<span class="spancls rounded-right"></span>
<span class="spancls rounded-bottom"></span>
<span class="spancls rounded-left"></span>
<span class="spancls rounded-circle"></span>
<span class="spancls rounded-0"></span>