To set a container for Bootstrap card and set it like a group, use the card-group class.Use it and create a grid like the following with two Bootstrap cards −             Demo Text!                          Warning!           The following is an example to create a grid (group of cards) in Bootstrap −ExampleLive Demo       Bootstrap Example                             Group of Messages                             Demo Text!                                       Warning!                                        Well done!                                       Selected!                        

Use the .modal(“toggle”) method in Bootstrap to toggle the modal.As shown below, the modal generates on the click of a button −$(document).ready(function(){   $("#button1").click(function(){     $("#newModal").modal("toggle");   }); });Here is the button used above −   Modal One You can try to run the following code to implement the modal(“toggle”) method −ExampleLive Demo       Bootstrap Example                             Sample     Modal One                                         ×             Sample Modal                                 Click outside to close it.                                 Close                                   $(document).ready(function(){     $("#button1").click(function(){       $("#newModal").modal("toggle");     });   });  

Use the card-group class to create a group of cards in Bootstrap 4 −                         Let us create a group of cards like a grid in Bootstrap −ExampleLive Demo       Bootstrap Example                             Group of Messages                             Argentina won convincingly!                                       Demo Text!                                       Do not cross!                                       I did it!                                       It worked!                    

Use the d-flex class in Bootstrap to create a flexbox container.Here, I have set two flex items −     One   Two You can try to run the following code to implement the .d-flex class −ExampleLive Demo       Bootstrap Example                             Understanding Flex             One       Two      

Use the .btn-outline-dark class in Bootstrap to set dark outline on a button.The following is an example of a button with dark outline −Set the above outline to the button, using the btn-outline-dark class as shown below −   Submit You can try to run the following code to implement the btn-outline-dark class −ExampleLive Demo       Bootstrap Example                               Bootstrap 4     Learning  btn-outline-dark class usage:     Submit  

Use the border-0 class in Bootstrap to eliminate all borders from an element as shown below −   No border We have also set CSS style above −.mystyle {   width: 120px;   height: 100px;   margin: 10px;   background: gray; }You can try to run the following code to implement the border-0 class −ExmapleLive Demo       Bootstrap Example                               .mystyle {       width: 120px;       height: 100px;       margin: 10px;       background: gray;     }             Two Rectangles     orange border     No border  

Use the border-white class in Bootstrap 4 to set white border to an element.   This has white border The test class above styles the element as shown below − .test {   width: 120px;   height: 100px;   margin: 10px;   background: blue; } Let us see an example to implement the border-white class in Bootstrap −ExampleLive Demo       Bootstrap Example                             .test {       width: 120px;       height: 100px;       margin: 10px;       background: blue;     }               Two Rectangles     This has white border     This has orange border  

To set orange border to an element, use the border-warning class −   Danger (Orange border) Set the style for the element − .mystyle {   width: 200px;   height: 100px;   margin: 10px; } Let us see an example to implement the border-warning class in Bootstrap −ExampleLive Demo       Bootstrap Example                             .mystyle {       width: 200px;       height: 100px;       margin: 10px;     }             The following are two Rectangles:     Danger (Orange border)  

Use the border-top-0 class in Bootstrap 4 to remove the top border.Set the border-top-0 class −   Rectangle is missing the TOP border. Let us see an example to implement the border-top-0 class −ExampleLive Demo       Bootstrap Example                             .mystyle {       width: 350px;       height: 170px;       margin: 10px;     }             Heading Two           Rectangle is missing the TOP border.      

Use the .flex-*- column class in Bootstrap to show flex items vertically on different screen sizes:Set it vertically on small, medium, large, etc screen size. Let us see it on small and medium screen size:Small Screen SizeFlex on different screen size (Small)   One   Two   Three Medium Screen SizeFlex on different screen size (Medium)   One   Two   Three The following is an example implementing what I have shown above the usage of flex-*-column −ExampleLive Demo       Bootstrap Example                 ... Read More