Use the .align-self-*-end class in Bootstrap 4 to align a flex item at the end on different screens in Bootstrap 4.For specific screen size, align the flex item like the below given code snippets −Small Screen Size   Item 1   Item 2   Item 3   Item 4 Large Screen Size   Item 1   Item 2   Item 3     Item 4 You can try to run the following code to align flex item at the end on specific screen sizes −ExampleLive Demo       Bootstrap Example           ... Read More

Use the tooltip(“options”) method in Bootstrap to activate the tooltip.On keeping the cursor on the below button the tooltip is visible −   Keep cursor The following is the script that generates the tooltip using the tooltip(options) class −$(document).ready(function(){   $('.btn-default').tooltip({title: "demo", placement: "top"}); });You can try to run the following code to implement the tooltip(“options”) method −ExampleLive Demo       Bootstrap Example                             Example     Tootltip will be visible after you mouse hover the below button:           Keep cursor             $(document).ready(function(){     $('.btn-default').tooltip({title: "demo", placement: "top"});   });  

The modal(“show”) method opens a Bootstrap modal as shown below −$("#newModal").modal("show");When the following button is clicked, the modal is displayed −   Click to hide Let us see an example of modal(“show”) method to open a Bootstrap Modal −ExampleLive Demo       Bootstrap Example                             #button1 {      width: 140px;      padding: 20px;      bottom: 150px;      z-index: 9999;      font-size: 15px;      position: absolute;      margin: 0 auto;    } ... Read More

The shown.bs.event fires when the tab is completely displayed. After that the alert generates as shown below −$('.nav-tabs a').on('shown.bs.tab', function(){   alert('New tab is now visible!'); });The tabs are displayed using the show() method −$(".nav-tabs a").click(function(){   $(this).tab('show'); });You can try to run the following code to implement the shown.bs.tab event −ExampleLive Demo       Bootstrap Example                                   Topic               Home       ... Read More

The hidden.bs.popover event fires when the popover is completely hidden.Fire the popover event −$("[data-toggle='popover']").on(hidden.bs.popover', function(){   alert('The Popover is now hidden!'); });You can try to run the following code to implement the hidden.bs.popover event −ExampleLive Demo       Bootstrap Example                             Awards           Here's the list:       List (Display)       List (Hide)             $(document).ready(function(){     ... Read More

To hide the displayed popover, use the popover(“hide”) method.Use the method to hide the popover like this −$(".btn-primary").click(function(){   $("[data-toggle='popover']").popover('hide'); });You can try to run the following code to implement the popover(“hide”) method −ExampleLive Demo       Bootstrap Example                             Example     Info           The following is a demo button:       Display       Hide           $(document).ready(function(){     $(".btn-default").click(function(){       $("[data-toggle='popover']").popover('show');     });     $(".btn-primary").click(function(){       $("[data-toggle='popover']").popover('hide');     });   });

To stretch a flex item in Bootstrap 4, use the .align-self-stretch class.     Here, the 2nd flex item is stretched using the align-self-stretch class in Bootstrap −   A-one   B-one   C-one   D-one You can try to run the following code to stretch a flex item −ExampleLive Demo       Bootstrap Example                           Align Specific Flex Item and Stretch         A-one       B-one       C-one       D-one    

Use the tooltip(“toggle”) method in Bootstrap to togle the tooltip.The tooltip generates on clicking the button shown below −   Toggle Tooltip Toggle the tooltip on button click like the following code snippet −$(".btn-info").click(function(){   $("[data-toggle='tooltip']").tooltip('toggle'); });You can try to run the following code to implement the tooltip(“toggle”) method −ExampleLive Demo       Bootstrap Example                             Demo     Tooltip will be visible here          Show Tooltip      Hide Tooltip      Toggle Tooltip           $(document).ready(function(){     $(".btn-primary").click(function(){       $("[data-toggle='tooltip']").tooltip('show');     });   $(".btn-default").click(function(){     $("[data-toggle='tooltip']").tooltip('hide');   });   $(".btn-info").click(function(){     $("[data-toggle='tooltip']").tooltip('toggle');   }); });

Use the card-img-bottom class in Bootstrap 4 to place an image at the bottom inside a Bootstrap 4 card.Set the card body, and within that, the card title and card text −   Quantitative Aptitude   For Entrance Exams   Sample Questions Now set image with class “card-img-bottom”−Let us see an example to learn how to implement Bootstrap 4 .card-img-bottom class −ExampleLive Demo       Bootstrap Example                             Quantitative Aptitude Questions Answers                   Quantitative Aptitude         For Entrance Exams         Sample Questions                    

Use the rounded-right class in Bootstrap 4 to add right rounded corners to an element.Just set the class to be rounded-right to an element like below −Here, another class “one” is also set to style the element − .one {   width: 250px;   height: 120px;   background-color: #265C80;   margin: 20px; } Let us see an example to set right rounded corners to a rectangle −ExampleLive Demo       Bootstrap Example                             .one {       width: 250px;       height: 120px;       background-color: #265C80;       margin: 20px;     }             Rounded Corner       We have a rectangle with right rounded corner: