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      

Use the flex-column class to display flex items vertically − You need to now add the flex-item inside the flex-column class −       First         Second   Let us see an example to learn how to implement the flex-column class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             Flex Column           First       Second       Third       Fourth       Fifth      

Create a flexbox container on a specific screen size, using the .d-*-flex class in Bootstrap.For different screen size, use it as “d-sm-flex”, “d-md-flex”, etc as shown below −   Small Screen   Medium Screen   Large Screen   Extra Large Screen Above, the flex-items are set for small, medium, large, and extra large screen size.Let us see an example of the class and its implementation −ExampleLive Demo       Bootstrap Example                             Flex Example     d-flex       d-sm-flex       d-md-flex       d-lg-flex       d-xl-flex