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

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