The hide.bs.popover event fires when the popover is about to be hidden.Add a click button to hide the popver using the popver(“hide”) method −$(".btn-default").click(function(){   $("[data-toggle='popover']").popover('hide'); });After clicking the button, fire the popover event and generate an alert using the hide.bs.popver event in Bootstrap −$("[data-toggle='popover']").on(hide.bs.popover', function(){   alert('Popover is about to be hidden!'); });You can try to run the following code to implement the hide.bs.popover event −ExampleLive Demo       Bootstrap Example                         Awards   ... Read More

Use the card-title class in Bootstrap 4 to set title for the card like the following example −The card title set above used the card-title class inside the card-body class. In addition, I have used the card-text class to set text inside the Bootstrap card as shown in the below give code snippet −   Company Locations   Singapore   Malaysia   Australia You can try to run the following code to implement the card-title class −ExampleLive Demo       Bootstrap Example                         Location             Company Locations       Singapore       Malaysia       Australia      

To set positive/ success action to a card in Bootstrap, use the card-success class.Here, I have set the card-success class like we set class on any element like .   Deal! In the same way, set other success messages −   Task complete! Let us implement success action on a Bootstrap 4 card −ExampleLive Demo       Bootstrap Example                         Success Messages       Deal!         Cleared the 2nd  round!         Victory!         Task complete!    

To set an outline on a button that indicates warning, you need to use the btn-outline class in Bootstrap.For my class, I have taken the below button −   Warning (Errors) The button above has the class btn-outline-warning that allow us to add an orange outline stating warning action −You can try to run the following code to implement the btn-outline-warning class −ExampleLive Demo       Bootstrap Example                         Warning   The following are the warning messages:       semi-colon (;) missing     infinite loop     For more warning messages:   Warning (Errors)

To set green border, use the border-success class in Bootstrap 4.The below element will have green border since we have set the class of the as border-success class −   Green border You can try to run the following code to set green border to an element indicating success −ExampleLive Demo       Bootstrap Example                              .mystyle {        width: 150px;        height: 150px;        margin: 10px;      }       Rectangle   Green border

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