Use the .align-self-end class to align flex item at the end in Bootstrap 4.The following is my div −Now you need to set the flex items, wherein I am aligning the 3rd flex item −   Item 1   Item 2   Item 3   Item 4 You can try to run the following code to implement the align-self-end class −ExampleLive Demo       Bootstrap Example                             Align Specific Flex Item from the end               Item 1         Item 2         Item 3         Item 4          

To implement the flex items to be displayed as reversed, horizontal and right-aligned on different screen sizes, use the flex-*-row-reverse.Different screen sizes are for small, medium, large, and extra large screens. Let us see how to set reverse flex items for small screen −   ONE   TWO   THREE You can try to run the following code to implement the flex-*-row-reverse class −ExampleLive Demo       Bootstrap Example                             Flex Row     ... Read More

If you want to display flex items right aligned, horizontally and reversed, then use the flex-row-reverse class.Use the class like the following code snippet −   ONE   TWO   THREE The following is an example to show reverse order of flex items −ExampleLive Demo       Bootstrap Example                             Flex     Flex Row Reverse           ONE       TWO       THREE         Flex Row           ONE       TWO       THREE      

To show flex items horizontally, use the flex-row class.Add it to class −Now add flex items accordingly −   TCS   Wipro   Accenture   Gartner Here is the complete example to implement the flex items horizontally −ExampleLive Demo       Bootstrap Example                             Companies           TCS       Wipro       Accenture       Gartner      

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                             Awards           Here's the list:       List           $(document).ready(function(){     $(".btn-default").click(function(){       $("[data-toggle='popover']").popover('show');     });     $("[data-toggle='popover']").on('show.bs.popover', function(){       alert('Popover is about to be visible!');     });   });

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   Benz The following is an example to display flex items horizontally on different screen size −ExampleLive Demo       Bootstrap Example                             Flex   ... 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                             Demo     Sample           The following is a demo button:       Demo Button           $(document).ready(function(){     $(".btn-default").click(function(){       $("[data-toggle='popover']").popover('show');     });    });

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");     });   });