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                             Creating Blocks     Resize the browser to check the effect.           block               block on small screen          

The border-left-0 class is used to remove the left border in Bootstrap 4.Use it like the following example −   Removing left border Let us see an example to remove the left border of an element −ExampleLive Demo       Bootstrap Example                             .demo {       width: 220px;       height: 220px;       margin: 50px;     }             Bootstrap 4     Removing left border  

Use the flex-wrap-reverse class in Bootstrap 4 to wrap flex items and in reverse order.Here is the difference between flex-wrap and flex-wrap-reverse −Set wrap-flex-reverse as in the following code snippet −   Rank 1   Rank 2   Rank 3   Rank 4   Rank 5 You can try to run the following code to implement flex-wrap-reverse class −ExampleLive Demo       Bootstrap Example                                   Wrap       Flex Wrap               Rank 1         Rank 2         Rank 3         Rank 4         Rank 5         Rank 6         Rank 7         Rank 8         Rank 9         Rank 10         Rank 11         Rank 12         Rank 13         Rank 14         Rank 15         Rank 16         Rank 17         Rank 18         Rank 19         Rank 20             Flex Wrap - Reverse               Rank 1         Rank 2         Rank 3         Rank 4         Rank 5         Rank 6         Rank 7         Rank 8         Rank 9         Rank 10         Rank 11         Rank 12         Rank 13         Rank 14         Rank 15         Rank 16         Rank 17         Rank 18         Rank 19         Rank 20            

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