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 ... Read More

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 ... 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 ... Read More

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!'); ... 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 ... Read More

Use align-bottom class in Bootstrap 4 to align an element with the lowest element on the line.Set the class as −Now add content −   Bottom Alignment You can try to run the following code to align an element with the lowest element on the line in Bootstrap 4 −ExampleLive ... Read More

The .modal(“hide”) method in Bootstrap hides the modal.Hide the Bootstrap modal on the click of a button −$("#button1").click(function(){   $("#newModal").modal("hide"); });The modal is shown using the modal(“show”) method −$("#newModal").modal("show");Let us see an example of the modal(‘hide”) method −ExampleLive Demo       Bootstrap Example       ... Read More

Use the d-*block class in Bootstrap to create block on a specific screen width.You can set it for small, medium, large, and extra large screen size −   d-sm-block   d-md-block   d-lg-block   d-xl-block You can try to run the following code to ... Read More

To stretch gathered items, use the .align-content-stretch class in Bootstrap 4.   Use the align-content-stretch class as −

Use the .align-items-center class in Bootstrap to align single rows of items in the center.To align in the center −Now add the flex items −   Item 1   Item 2   Item 3   Item 4 You can try to run the following code to implement the align-items-center class ... Read More