Use the .d-block class in Bootstrap to create block element.The d-block class is set as shown in the below code snippet −   block You can try to run the following code to implement the d-block class −ExampleLive Demo       Bootstrap Example       ... Read More

To wrap flex items in reverse order, you need to use the flex-wrap-reverse class in Bootstrap.To wrap reverse flex items, use the flex-wrap-reverse class −Now add the flex items accordingly −   Rank 1   Rank 2   Rank 3   Rank 4 Let us see an example to implement ... Read More

To show flex items on the right, horizontal on specific screen sizes, use the flex-*-row-reverse class in Bootstrap 4.Let us see how to set reverese flex items on different screen sizes −Small Screen Size: flex-sm-row-reverse Medium Screen Size: flex-md-row-reverse Large Screen Size: flex-lg-row-reverseYou can try to run the following code to ... Read More

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 ... Read More

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 ... 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 ... Read More

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 ... Read More

Display the popover using the popver(“show”) method.You need to set the popover as −   Sample Now display the popover −$(document).ready(function(){   $(".btn-default").click(function(){     $("[data-toggle='popover']").popover('show');   }); });Let us see the complete example display how to implement the popover(“show”) method −ExampleLive Demo       Bootstrap Example ... Read More

To set flex item horizontally in different screen size, use the flex-*-row class.The varied screen sizes is set for small, medium, large and extra large screen size. Let us see how to align flex items horizontally for small screen size −Flex Row (Small Screen)   Audi   BMW   ... Read More

The show.bs.popover event fires when the popover is about to be visible.Fire the popover event −$("[data-toggle='popover']").on('show.bs.popover', function(){   alert('Popover is about to be visible!'); });You can try to run the following code to implement the show.bs.popover event −ExampleLive Demo       Bootstrap Example       ... Read More