To set flex items horizontally for different screen sizes like large, small, medium, etc, use the flex-*-row class.Let us see which flex-*-row class is used for different screen sizes −Small Screen Size: flex-sm-row Medium Screen Size: flex-md-row Large Screen Size: flex-lg-rowThe following is an example to set flex items horizontally for small screen size −   Audi   BMW   Benz You can try to run the following code to implement .flex-*-row class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                       ... Read More

Use the card-footer class in Bootstrap 4 to set the footer of a Bootstrap card.Add it using the class −   Add footer message here The card-footer class comes after the card-header and card-body class −   Details   Timings: 4PM - 8PM   Reach before 4PM You can try to run the following code to implement the card-footer class −ExampleLive Demo       Bootstrap Example                             Conference           Details       Timings: 4PM - 8PM       Reach before 4PM      

Use the .modal(“toggle”) method in Bootstrap to toggle the modal.On button click, the modal generates using the modal(“toggle”) method −$(document).ready(function(){   $("#button1").click(function(){     $("#newModal").modal("toggle");   }); });The button is set here using the following code snippet −   Modal One You can try to run the following code to implement the modal(“toggle”) method −ExampleLive Demo       Bootstrap Example                             Sample     Modal One                                         ×             Sample Modal                             Click outside to close it.                           Close                       $(document).ready(function(){     $("#button1").click(function(){       $("#newModal").modal("toggle");     });   });

Use the flex-row class in Bootstrap to dispay flex items horizontally.Achieve the following using the flex-row class −Now add the flex-items in the class to allow horizontal alignment −   Audi   BMW   Benz You can try to run the following code to implement the flex-row class −ExampleLive Demo       Bootstrap Example                             Flex Row          Audi      BMW      Benz      

To allow wrapping of flex items on different screens, use the flex-*-wrap class. The flex-wrap for varied screen sizes work for small, medium, large and extra large screens.For example, use the flex-lg-wrap class to wrap flex items on large screen −For small screen −You can try to run the following code to implement the flex-*-wrap class to wrap flex items on small and large screen size −ExampleLive Demo       Bootstrap Example                                       ... Read More

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