Use .align-content-*-center class to align gathered items in the center on different screens in Bootstrap 4.Here is how you can align gathered items in the center on different screens −Small Screen SizeMedium Screen SizeLarge Screen SizeYou can try to run the following code to align gathered items in the center on different screens in Bootstrap 4 −ExampleLive Demo      Bootstrap Example                         Example       One     Two     Three     Four     Five     Six ... Read More

Set a container of cards, using the card-deck class.Work it inside the following div that would be of equal width and height −         You can try to run the following code to implement the card-deck class −ExampleLive Demo       Bootstrap Example                             Demo Messages     Note: Resize the browser to check the effect.                           Nothing new!                            Warning! Compile-time error!          Check again!                            We won!            

To set negative action (danger) for cards with red background color, you need to use the Bootstrap contextual class card-danger.Set the danger action −   Danger! High Voltage! You can try to run the following code to set danger action for a card in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             Messages           How you doing?               Danger! High Voltage!      

Display a green border to an element in Bootstrap that indicates success using the border-success class.Set the border as green −    Green border I have also added “mystyle” class in the div, which is to style our div, a rectangle in my example −.mystyle {   width: 250px;   height: 150px;   margin: 10px; }Implement the border-success as shown below −ExampleLive Demo       Bootstrap Example                             .mystyle {       width: 250px;       height: 150px;       margin: 10px;     }   Shape   Green border

Set a grey border to an element, using the border-secondary class in Bootstrap 4.Add it like the following example − I have also included the “mystyle” class to style the div − .mystyle {   width: 250px;   height: 150px;   margin: 10px; } Let us see an example to implement the border-secondary class −ExampleLive Demo       Bootstrap Example                             .mystyle {       width: 250px;       height: 150px;       margin: 10px;      }           Shape   Rectangle with gray border

Use the flex-*-column-reverse class to display flex items vertically and reversed on different screen sizes.Here’s the example of reversing flex items on medium device using “flex-md-column-reverse” class −   One   Two   Three In the same way, set for large devices using “flex-lg-column-reverse” class −   One   Two   Three Implementing the .flex-*-column-reverse class −ExampleLive Demo       Bootstrap Example                             Example     Change the browser size to see the effect:     Default           One       Two       Three         Flex on differet screen size (Medium-Reverse)           One       Two       Three         Flex on different screen size (Large-Reverse)           One       Two       Three      

To align gathered items from the start in different screens, use the .align-content-*-start class.Align the items as shown below in different screen sizes −Medium Screen Size   Work 1   Work 2   Work 3   Work 4   Work 5 Large Screen Size   Work 1   Work 2   Work 3   Work 4   Work 5 You can try to run the following code to implement the align-content-*start class for different screen sizes in the Bootstrap 4 −ExampleLive Demo       Bootstrap Example                 ... Read More

The flex-column-reverse is used to display reversed flex items with vertical orientation. Add the flex-column-reverse class as in the following code snippet −After that, add flex items inside it −   Demo 1   Demo 2   Demo 3 You can try to run the following code to show flex items vertically and reversed −ExampleLive Demo       Bootstrap Example                             Implementing Column Reverse           Demo 1         Demo 2       Demo 3      

To color Bootstrap cards, we use the contextual classes.For danger action, use the bg-danger contextual class with the card class −   Danger! High Voltage! You can try to run the following code to implement the card-danger class −ExampleLive Demo       Bootstrap Example                             Messages           How you doing?              Danger! High Voltage!      

Use align-text-top class to align an element with the top of the parent element's font.Set the align-text-top class as −   Top Text You can try to run the following code to implement the align-text class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                         Example   This is demo text   Demo Baseline   Top Alignment   Top Text   Bottom Text