To set rounded left corners to an element, use the rounded-left class in Bootstrap 4.Use the class on any element like − We have also included the one class to style our −.one {   width: 200px;   height: 100px;   background-color: maroon;   margin: 8px; }Let us see an example to implement the rounded-left class −ExampleLive Demo       Bootstrap Example                             .one {       width: 200px;       height: 100px;       background-color: maroon;       margin: 8px;     }             Rounded Corner     We have two rectangles with left rounded corner:          

Use the flex-nowrap class in Bootstrap 4 to avoid wrapping the flex items.Here you can see the difference between wrap and nowrap −Above the flex-items are not wrapped. This is achieved using the flex-nowrap class in Bootstrap 4 −   One   Two   Three   Four   Five   Six   Seven   Eight   Nine The following is an example to avoid wrapping 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      

Remove the right border from an element; use the border-right-0 class.To remove the border −   Rectangle is not having the right border. You can try to run the following code to implement the border-right-0 class −ExampleLive Demo       Bootstrap Example                             .mystyle {       width: 350px;       height: 170px;       margin: 10px;     }                   Heading Two       Rectangle is not having the right border.      

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