Use the .align-self-start class in Bootstrap 4 to align a flex item from the start.To align flex item from the start, you need to set the class in that particular flex item −   Item 3 The above is set inside the flex class as shown below −   Item 1   Item 2   Item 3   Item 4 You can try to run the following code to implement the align-self-start class −ExampleLive Demo       Bootstrap Example                             Align Specific Flex Item from the start           Item 1       Item 2       Item 3       Item 4      

Use the tooltip(“destroy”) method in Bootstrap to detroy the tooltip −$(".btn-default").click(function(){   $("[data-toggle='tooltip']").tooltip('destroy'); });The following example has two buttons, one for “Show Tooltip” and another for “Destroy Tooltip” −Show Tooltip$(".btn-primary").click(function(){   $("[data-toggle='tooltip']").tooltip('show'); });Destroy Tooltip$(".btn-default").click(function(){   $("[data-toggle='tooltip']").tooltip('destroy'); });Here is the complete code to implement the tooltip(“destroy”) method −ExampleLive Demo       Bootstrap Example                             Demo     Tooltip will be visible here           Show Tooltip       Destroy Tooltip           $(document).ready(function(){    $(".btn-primary").click(function(){      $("[data-toggle='tooltip']").tooltip('show');    });    $(".btn-default").click(function(){      $("[data-toggle='tooltip']").tooltip('destroy');    });   });

To set a dark border to an element in Bootstrap, use the border-dark class.To work with it is an easy task. Just use the class name as the element class −   Dark Border Above, the "test" class can also be seen. This is useful to set style for the element − .test {   width: 150px;   height: 150px;   margin: 35px; } You can try to run the following code to implement the border-dark class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             .test {       width: 150px;       height: 150px;       margin: 35px;     }         Rectangle with dark border:   Dark Border

Use the .flex-grow-0|1 class in Bootstrap to allow a singly lex item to take up rest of the space in the flex.For example, the following takes rest of the space in the right −The above is set by adding flex-grow class for the last flex-item −   P   Q   R Let us see the following example to implement flex-grow-0|1 class −ExampleLive Demo       Bootstrap Example                                   P       Q       R               P       Q       R      

Use the popver(“detroy”) to destroy the popover.It hides the popover −popover('destroy');The method is used to destroy the popover −$(".btn-default").click(function(){   $("[data-toggle='popover']").popover('destroy'); });You can try to run the following code to implement the popver(“destroy”) method −ExampleLive Demo       Bootstrap Example                             Examination           Here's the result:       Result       Refresh           $(document).ready(function(){    $(".btn-default").click(function(){      $("[data-toggle='popover']").popover('toggle');    });    $(".btn-danger").click(function(){      $("[data-toggle='popover']").popover('destroy');    });   });

To set flex items to equal width on different screens, use the the flex-*-fill class.For small width screen, use flex-sm-fill −   A For large width screen, use flex-lg-fill −   A The following is an example to give euqla width to flex items on different screens −ExampleLive Demo       Bootstrap Example                             Flex (Small Width)           A       B       C         Flex (Medium Width)             A       B       C         Flex (Large Width)             A       B       C      

The hide.bs.tab fires when the tab is about to be hidden in Bootstrap.Fire the hide.bs.tab and generate the alert before the modal is hidden −$('.nav-tabs a').on('hide.bs.tab', function(e){   alert('Previous tab will hide now!'); });The first tab is the active tab and fade in property is also set −   Home   This is demo text! You can try to run the following code to implement the hide.bs.tab event −ExampleLive Demo       Bootstrap Example                             ... Read More

To align gathered items at the end on different screens in Bootstrap 4, use the .align-content-*-end class.Align the gathered items on different screen sizes as shown below −Small Screen   One   Two   Three   Four   Five Large Screen   One   Two   Three   Four   Five You can try to run the following code to implement the align-content-*-end class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                          Example     ... Read More

Use the flex-fill class to set the flex items to be equal width in Bootstrap 4.Set the flex item inside the set as flex −   Example 1   Example 2   Example 3   Example 4 The following is an example displaying the implementation of flex-fill class −ExampleLive Demo       Bootstrap Example                             With flex-fill              Example 1        Example 2        Example 3        Example 4            Without .flex-fill:              Example 1        Example 2        Example 3        Example 4          

The hidden.bs.tab event fires when the tab is completely hidden in Bootstrap.Firsty, show the modal using show method as in the following code snippet −$(“.nav-tabs a”).click(function(){   $(this).tab('show'); });The hidden.bs.tab event fires and an alert generates after the tab hides −$(‘.nav-tabs a’).on(‘hidden.bs.tab’, function() {   alert('Previous Tab is hidden now!'); });You can try to run the following code to implement the hidden.bs.tab event −ExampleLive Demo       Bootstrap Example                             Web Dev     ... Read More