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

Use the .align-content-*-stretch in Bootstrap 4 to stretch gathered items on different screens.To stretch items on different screens −Stretch items on Small Screen   Work 1   Work 2   Work 3   Work 4   Work 5   Work 6 Stretch items on Medium Screen   Work 1   Work 2   Work 3   Work 4   Work 5   Work 6 Stretch items on Large Screen   Work 1   Work 2   Work 3   Work 4   Work 5   Work 6 Let us see an example to stretch gathered items on different screen size ... Read More

Align single rows of items at the baseline in Bootstrap 4, use the .align-items-baseline class.To align at the baseline:

The .modal(“hide”) method hides the modal on button click.Firstly, generate the modal and display it −$("#newModal").modal("show");After that, use the modal(“hide”) method on a button to hide the modal on button click −$("#button1").click(function(){   $("#newModal").modal("hide"); });Let us see an example of the modal(‘hide”) method wherein we are hiding a modal which generates on page load −ExampleLive Demo       Bootstrap Example                             #button1 {       width: 140px;       padding: 20px;       bottom: 150px; ... Read More

If you want to set content as a Bootstrap modal, then use the .modal(options) method.On button click, the modal generates as in the following script.$(document).ready(function(){   $("#button1").click(function(){     $("#newModal1").modal({backdrop: true});   }); });Above, I have set options as “backdrop:true”. Another option, we can set is “backdrop: true” −backdrop: true =  Clicking outside the modal, close it.backdrop: false = Clicking outside the modal, won’t close it.You can try to run the following code to implement the modal(“options”) class −ExampleLive Demo       Bootstrap Example                     ... Read More

To show flex items vertically on different screen sizes, use the flex-*- column class. For small, medium and large screen sizes, use it as −For Small screen size −For Medium screen size −For Large screen size −Let us see an example to learn how to set flex items vertically on different screen sizes −ExampleLive Demo       Bootstrap Example                             Example     Note: Change the browser size to see the effect.     Default           One       Two       Three         Flex on differet screen size (Medium)           One       Two       Three         Flex on differet screen size (Large)           One       Two       Three