Web Development Articles - Page 684 of 1049

Use the border-primary class to set a blue border to an element.For a blue border, add the class, as if you add it for or any other element − Let us see an example to set a blue border −ExampleLive Demo       Bootstrap Example                             .demo {       width: 350px;       height: 170px;       margin: 10px;     }                   Demo Heading       This rectangle has blue border      

To set an outline on a button that indicates danger, you need to use the btn-outline-danger class in Bootstrap.Set the outline in the element −   Danger Ahead You can try to run the following code to implement the btn-outline-danger class −ExampleLive Demo       Bootstrap Example                             Danger Button     Danger Ahead  

To add a gray background color to the Bootstrap 4 card, use the card class with the bg-dark contextual class −Set the card body inside the same class −   Hello Let us see the complete example add a grey background color to Bootstrap card −ExampleLive Demo       Bootstrap Example                                   Welcome               Hello          

Use .align-items-*-stretch class to stretch single rows of items on different screens in Bootstrap 4.Stretch single rows if items on specific screen sizes as shown below:Small Screen Size Medium Screen Size Large Screen Size Extra Large Screen Size Let us implement the align-items-*-stretch class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                                   Align Flex Items on a single row (stretch)               Item 1         Item 2         Item 3         Item 4            Small Screen Size              Item 1        Item 2        Item 3        Item 4            Medium Screen Size              Item 1        Item 2        Item 3        Item 4            Large Screen Size              Item 1        Item 2        Item 3        Item 4            Extra Large Screen Size              Item 1        Item 2        Item 3        Item 4          

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