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 ... Read More

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 ... Read More

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                    

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 ... Read More

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 ... Read More

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 ... 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     ... Read More

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 ... Read More

If you want to remove float from an element, then Bootstrap 4 has a class called float-none.This removes the float −   This text is on the left (float removed). Default is left. On setting the float-none class, the text moves on the left, which is laso the default alignment ... Read More

On different devices like small, medium, large, etc, if you want to float an element to the left, then use the float-*-left class.The following are the classes you can use −Small Devices: float-sm-left Medium Devices: float-md-left Large Devices: float-lg-leftLet us see an example to float an element to the left ... Read More