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

Use the column-reverse class on various screen size to display flex item vertically and reversed.For example: On medium screen size, use md-column-reverse −The following is the difference between column and column reverse −The following is an example to display flex items vertically and reversed on different screen sizes −ExampleLive Demo       Bootstrap Example                             Example     Flex on different screen size (Column)           First       Second       Third         Flex on different screen size (Medium - Column Reverse)           First       Second       Third         Flex on different screen size (Large - Column Reverse)           First       Second       Third      

The shown.bs.modal event in Bootstrap fires when the modal is completely displayed.The modal is displayed using the modal(show) method −$("#button1").click(function(){   $("#newModal").modal("show"); });Fire shown.bs.modal event and generate the alert as shown below −$("#newModal").on('shown.bs.modal', function () {   alert('The modal is displayed completely!'); });You can try to run the following code to implement the shown.bs.modal event in Bootstrap −ExampleLive Demo       Bootstrap Example                             Entrance Exams       The following is the result of the ... Read More

Use the d-inline-flex class in Bootstrap to create an inline flexbox container −Now add the flex-items inside it as in the following code snippet −         One         Two         Three   You can try to run the following code to implement the .d-inline class −ExampleLive Demo       Bootstrap Example                             Understanding Inline Flex             One       Two       Three