Found 626 Articles for CSS Framework

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

If you want to wrap flex items in Bootstrap, then use the flex-wrap class. To wrap, use −       India   US   UK   Australia   Denmark You can try to run the following code to avoid wrapping of flex items −ExampleLive Demo       Bootstrap Example                             Flex Examples     Wrap - Yes           India       US       UK       Australia       Denmark       India       Poland       Netherlands       Ireland       Brazil       Russia       Morocco         Wrap - No           India       US       UK       Australia       Denmark       India       Poland       Netherlands       Ireland       Brazil       Russia       Morocco          

To set subtitle after a title in Bootstrap card, use the card-subtitle class.Let us see how −   Set Subtitle here Add the above after the card-title class and inside the card-body class −   Sports   Indoor   Squash, Dart, Chess You can try to run the following code to set subtitle in a Bootstrap card −ExampleLive Demo       Bootstrap Example                             Indoor Sports                   Sports         Indoor         Squash, Dart, Chess