Use the d-flex class in Bootstrap to create a flexbox container.Here, I have set two flex items −     One   Two Above, I have used the d-flex class to set the container. The container has both the flex items styled using the bg-primary and bg-warning classes respectively.Let us see the complete example −ExampleLive Demo       Bootstrap Example                             Understanding Flex             One       Two      

To create a block on a specific screen width, use the .d-*-block class.The specific screen width can be small, medium, large and extra large. Set the class indivifually based on the screen size as shown below − d-sm-block d-md-block d-lg-block< /span> d-xl-block Let us see the complete example to learn how to create a block element on a specific screen width −ExampleLive Demo       Bootstrap Example                             Blocks     Resize the browser to check the effect     d-block     d-sm-block     d-md-block     d-lg-block     d-xl-block  

The shown.bs.popover event fires when the popover is completely visible.Firstly, display the popover on button click using the following code −$(".btn-default").click(function(){   $("[data-toggle='popover']").popover('show'); });After that, fire the popover shown.bs.popover event and generate alert −$("[data-toggle='popover']").on('shown.bs.popover', function(){   alert('Popover is completely 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     ... Read More

To align single rows of items at the end, use the .align-items-end class in Bootstrap 4.Align using the align-items-end class −Now add the flex items to align single rows of items −   Product 1   Product 2   Product 3 Let us see an example to align single rows of items at the end −ExampleLive Demo       Bootstrap Example                         Align Flex Items on a single row at the end       Product 1     Product 2     Product 3     Product 4  

Use the .align-items-*-start class in Bootstrap 4 to align single rows of items from the start on different screens.For different screen size, use the class as −Align Single Rows of Items on Small Screen   Product 1   Product 2   Product 3   Product 4 Align Single Rows of Items on Medium Screen   Product 1   Product 2   Product 3   Product 4 Align Single Rows of Items on Large Screen   Product 1   Product 2   Product 3   Product 4 The following is an example to align single rows of items from the ... Read More

Use the .align-self-*-start class to align a flex item at the baseline on different screens in Bootstrap 4.On different screen sizes, set the baseline as −Small Screen   A-one   B-one   C-one   D-one Medium Screen   A-one   B-one   C-one   D-one Large Screen   A-one   B-one   C-one   D-one You can try to run the following code to implement the align-self-*-start class −ExampleLive Demo       Bootstrap Example                         Align Specific Flex Item at the baseline       A-one     B-one     C-one     D-one     Small Screen Size       A-one     B-one     C-one     D-one     Medium Screen Size       A-one     B-one     C-one     D-one     Large Screen Size         A-one     B-one     C-one     D-one  

To toggle the popover on button click, use the popver(“toggle”) method.Set the popover toggle as −$(document).ready(function(){   $(".btn-default").click(function(){     $("[data-toggle='popover']").popover('toggle');   }); });On button click, the popover generates −   (Course) Toggle Popover The popver, on button click, generates the popover on a link −   Learn The following is an example stating the usage of popver(“toggle”) method −ExampleLive Demo       Bootstrap Example                          Learn          The following is the button:      (Course) Toggle Popover       $(document).ready(function(){   $(".btn-default").click(function(){     $("[data-toggle='popover']").popover('toggle');   }); });

To activate the popover with an option, you need to use the .popver(options) method −Set the button for popover as −   Timings Set the popover title, header, etc. All of these comes under popover options −$(document).ready(function(){   $('.btn-default').popover({title: "Event Timings", content: "3PM - 6PM", placement: "right"}); });Let us see the complete example of the .popover(method) −ExampleLive Demo       Bootstrap Example                             Information     Details about the event:           Timings         $(document).ready(function(){     $('.btn-default').popover({title: "Event Timings", content: "3PM - 6PM", placement: "right"});   });

If you want to add rounded corners to an element, then use the rounded-bottom class.Use it on any element like −Above, we have set demo as well for class, for our div that is a rectangle.Here is our demo CSS class − .demo {   width: 110px;   height: 150px;   background-color: blue; } You can try to run the following code to add bottom rounded corners to an element −ExampleLive Demo     Bootstrap Example               .demo {     width: 110px;     height: 150px;     background-color: blue;    }               Rectangle     We have a rectangles with rounded corners (bottom):      

The hidden.bs.modal event in Bootstrap fires when the modal is completely hidden.Firstly, click on the hide button to hide the modal −$("#button1").click(function(){   $("#newModal").modal("hide"); }); After clicking the button, the hidden.bs.modal fires and generates an alert using the following script −$("#newModal").on('hidden.bs.modal', function () {   alert('The modal is completely hidden now!'); });Let us see an example to implement the hidden.bs.modal event −ExampleLive Demo   Bootstrap Example               #button1 {     width: 140px;     padding: 20px;     bottom: 150px;     z-index: 9999; ... Read More