Found 700 Articles for Bootstrap

To add left rounded corners to an element like , then use the rounded-left class in Bootstarp 4.To set rounded left corners −You can try to run the following code to implement rounded-left class −ExampleLive Demo       Bootstrap Example                             .one {       width: 200px;       height: 100px;       background-color: #FFFF00;       margin: 8px;     }             Rounded Corner     We have three rectangles with left rounded corner:              

Use the .justify-content-*-end class to align flex items in the end on different screen sizes like this −For small screen size, use −justify-content-sm-endFor medium screen size, use −justify-content-md-endFor large screen size, use −justify-content-lg-endLet us see how to align flex items horizontally on small, medium and large screen sizes −ExampleLive Demo       Bootstrap Example                             Form of Tea           Black Tea       Green Tea       Indian Tea               Black Tea       Green Tea       Indian Tea               Black Tea       Green Tea       Indian Tea      

Use the justify-content-*-center class in Bootstrap 4 to center content on different screen sizes.For different screen sizes −justify-content-sm-center: Small Screen Size justify-content-md-center: Medium Screen Size justify-content-lg-center: Large Screen Size justify-content-xl-center: Extra Large Screen SizeLet us see how to implement the justify-content-*-center class −ExampleLive Demo       Bootstrap Example                             Vehicle           Car       Bike       Truck               Car       Bike       Truck               Car       Bike       Truck               Car       Bike       Truck      

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