Prime Study Hub

Bootstrap 4 Tooltips Tooltip is a small pop-up box that displayed when the user moves the mouse over an element. The Tooltips are helpful when you need to display some additional information to your ideal customers To create a tooltip, you have to include data-toggle="tooltip" attribute in your HTML element. For Example, <button type="button" class="btn btn-danger" data-toggle="tooltip" title="Top">   Top </button> The Bootstrap 4 tooltips are not enabled by default, you have to initialize them before you can use it. Follow the below example to initialize the tooltips, <script> $(function () {   $('[data-toggle="tooltip"]').tooltip() }) </script> Tooltip Buttons Follow the below example to create a tooltip with button element, <div class="container">   <h3>     <a href="https://primestudyhub.blogspot.com/search/label/Bootstrap%204" tar

Bootstrap 4 Badges Badges are used to highlight additional information to any content in your ideal website. To create badge, Use badge class with any of the contextual classes like badge-warning to your <span> element that represents the badge. Here is how badge headers will look like? Lets see an example, <h1>Your heading <span class="badge badge-warning">New</span></h1> <h2>Your heading <span class="badge badge-warning">New</span></h2> <h3>Your heading <span class="badge badge-warning">New</span></h3> <h4>Your heading <span class="badge badge-warning">New</span></h4> <h5>Your heading <span class="badge badge-warning">New</span></h5> <h6>Your heading <span class="badge badge-warning">New</span></h6> Demo See the Pen Bootstrap 4 Badges - Basic by Prime Stu

Bootstrap 4 Card Designs A card is a best way to showcase your products, highlight your top-management team in your organization or display your ideal plan, vision, strategy etc.. in your website to improve the satisfaction of customers. To satisfy this Bootstrap 4 cards provides the variety of ideal design options with responsiveness based on your needs. Let's see how to create a basic card? Add card class to create a card Add card-body class to include content in your card For example,   <div class="card">     <div class="card-body">       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.     </div>   </div> Cards with Contextual classes The Bootstrap 4 cards provides wide variety of contextual classes, you can use this to change the background of the card or to change the text color. Lets see how to apply this contextual classes with card .

Bootstrap 4 Breadcrumb Breadcrumb indicates the current location of the user by highlighting the navigational hierarchy. The Bootstrap 4 provides the .breadcrumb class which styles a list into a breadcrumb with separators. Bootstrap 4 separators are automatically added through ::before and content property . Let's see how to create an breadcrumb? Include a .breadcrumb class to your element whether it is a ordered list or unordered list. Add a .breadcrumb-item class, inside your each list element. Add a active class to your list element to indicate the users current page. This should be always the last list element. <ol class="breadcrumb">     <li class="breadcrumb-item"><a href="#">Bootstrap</a></li>     <li class="breadcrumb-item"><a href="#">Bootstrap 4</a></li>     <li class="breadcrumb-item active" aria-current="page">Breadcrum

Bootstrap 4 Alert Box Bootstrap 4 supports a variety of responsive alert messages using predefined contextual classes. The list of contextual classes are, Primary ( .alert-primary ) Secondary ( .alert-secondary )  Success ( .alert-success ) Danger ( .alert-danger ) Warning ( .alert-warning ) Info ( .alert-info ) Light ( .alert-light ) and  Dark ( .alert-dark ) The Bootstrap 4 provides an optional dismiss button as well as it also supports the large length of text without breaking the flexibility. To create an alert box, include the .alert class in your element followed by any of the contextual classes that are mentioned above. Let's look into an example, <div class="alert alert-info" role="alert">   <strong><i class="fa fa-info-circle" aria-hidden="true"></i></strong> Use this alert box when you need to highlight the <b>info</b> message! </div> Demo See the Pen BOOTS

Bootstrap 4 Jumbotron The Bootstrap 4 jumbotron captures the user's attention with some eye-catching content, offer, discount, etc… Include a .jumbotron class to a <div> element to create remarkable jumbotron. Let's see how to create a jumbotron design? <div class="container"> <div class="jumbotron">   <h1 class="display-4">Bootstrap 4 Jumbotron!</h1>   <p class="lead">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>   <hr class="my-4">   <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>   <p class="lead">     <a class="btn btn-primary btn