CSS Framework Articles - Page 10 of 45

Avoid wrapping flex items in Bootstrap 4, using the .flex-nowrap class.Below you can see the flex items aren’t wrapping after the “Eight” flex-item −The flex is set in the div class as if we add any other class in −The following is an example to implement flex-nowrap class to avoid wrapping of flex items −ExampleLive Demo       Bootstrap Example                                   FLEX WRAP AND NOWRAP       Flex items will wrap               One         Two         Three         Four         Five         Six         Seven         Eight         Nine             Flex items won't wrap               One         Two         Three         Four         Five         Six         Seven         Eight         Nine            

Use the .align-content-center class to align gathered items in the center in Bootstrap 4.Set the align-content-center class as shown below −After that, add the flex items −   One   Two   Three Let us see an example to implement the align-content-center class −ExampleLive Demo       Bootstrap Example                             Example           One       Two       Three       Four       Five       Six       Seven       Eight       Nine       Ten       Eleven       Twelve       Thirteen       Fourteen      

The show.bs.tooltip event in Bootstrap fires when the tooltip is about to be displayed −$("[data-toggle='tooltip']").on('show.bs.tooltip', function(){   alert('Tooltip will be visible now.'); });The "data-toggle" attribute is set before as an tag attribute, since the Bootstrap generates from there itself −   Timings You can try to run the following code to implement the show.bs.tooltip event −ExampleLive Demo       Bootstrap Example                             Event     Here tooltip will be displayed using the "Show" buttpn ... Read More

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