Use the bg-info class with the card-class in Bootstrap 4 to add information in a card −Now include the card-body class in it −       Bring your Laptop for the BootCamp   Let us see an example to learn how to implement Bootstrap 4 bg-info class with the card class −ExampleLive Demo       Bootstrap Example                             Information - Event           Bring your Laptop for the BootCamp      

To align flex items around on different screen sizes, use the justify-content-*-around class.You can achieve the following result that justifies content on small and medium screen sizes −To implement the justify-content-*-around class in Bootstrap −ExampleLive Demo       Bootstrap Example                             Default           ANS 1       ANS 2       ANS 3         Small Screen Size           ANS 1       ANS 2       ANS 3         Medium Screen Size           ANS 1       ANS 2       ANS 3         Large Screen Size           ANS 1       ANS 2       ANS 3      

Use the justify-content-*-around class in Bootstrap to align flex items around on different screen sizes −justify-content-sm-around : Justify content on small screen size justify-content-md-around : Justify content on medium screen size justify-content-lg-around : Justify content on large screen sizeFor an example, let us see how to align flex items for medium screen device (justify-content-md-around) −   RANK 1   RANK 2   RANK 3 You can try to run the following code to implement the justify-content-* −ExampleLive Demo       Bootstrap Example                                   RANK 1       RANK 2       RANK 3               RANK 1       RANK 2       RANK 3               RANK 1       RANK 2       RANK 3               RANK 1       RANK 2       RANK 3      

Reverse the order of flex items using the flex-column-reverse class in Bootstrap 4.Set the flex-column-reverse class as shown below −Add the flex items to include in your Bootstrap 4 −   Demo 1   Demo 2   Demo 3 The following is an example to implement the flex-column-reverse class −ExampleLive Demo       Bootstrap Example                             Implementing Column Reverse           Demo 1       Demo 2       Demo 3      

Create a grid of cards with Bootstrap 4, using the card-columns class −   Set the card classes inside the card-columns class −             One       Let us see an example stating the usage of card-columns class −ExmapleLive Demo       Bootstrap Example                             Demo                             One                                       Two                                       Three                    

Use the card-body class in Bootstrap to set container for the content of the card −   Body of card1 Now add it in the Bootstrap card class −       Body of card1   You can try to run the following code to set the container for Bootstrap 4 card content −ExampleLive Demo       Bootstrap Example                             Heading Three           Body of card1               Body of card2      

Use the .justify-content-* class in Bootstrap to align flex items from start, end, center, between, etc.For justify-content-start, the justified flex items would be aligned like −For justify-content-end, the justified flex items would be aligned like −For justify-content-around, the justified flex items would be aligned like −Let us see how to justify content −ExampleLive Demo   Bootstrap Example                       Rank 1       RANK 2       RANK3               RANK 1       RANK 2       RANK 3               RANK 1       RANK 2       RANK 3      

To set positive action to a card in Bootstrap, use the bg-success class with the card classSet positive action and use “card bg-success” −Now add the body of the card using the card-body class −   India won by 7 wickets You can try to run the following code to implement the card-success class −ExampleLive Demo         Bootstrap Example                             Result     Result of the first two matches between India and Australia:           India won by 10 runs               India won by 7 wickets      

To style navigation pills inside the card header in Bootstrap 4, use the card-header-pills class as shown below & minus;Set the navigation pills inside the header class in Bootstrap −             Clothing                 Electronics               Mobile Accessories       You can try to run the following code to implement the card-header-pills class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             Products                                            Clothing                                      Electronics                                      Mobile Accessories                                         Clothing         We have Men and Women clothing line...              

Use the flex-*-wrap class like flex-lg-wrap, flex-sm-wrap, flex-md-wrap, etc to wrap flex items on different screen sizes −The following is the code snippet for the flex items wrap on small screen size using the flex-sm-wrap class −   Poland   Netherlands   Ireland   Brazil You can try to run the following code to implement the flex-*-wrap class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             Flex Examples     Wrap - Yes   ... Read More