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

Use align-top class to align an element with the top of the tallest element on the line.Align the element like this −   Top Alignment Let us see an example to implement the align-top class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             Example     This is demo text     Demo Baseline     Top Alignment     Middle Alignment     Bottom Alignment  

Create a grid of cards with Bootstrap 4, using the card-columns class.Set the grid inside the class −   Include the card body inside the card container as in the following code snippet. I have added the card body under the card-class. The card-class is added inside the card-columns class −            Accessories       Let us see an example to create a grid of cards in Bootstrap −ExampleLive Demo       Bootstrap Example                             Products                             Accessories                                       Furnitures                    

The btn-outline-primary class is used in Bootstrap 4 to set blue outlined button.Add blue outline to the button using the btn-outline-primary class as shown in the following code snippet −   Result You can try to run the following code to implement the btn-outline-primary class −ExampleLive Demo       Bootstrap Example                             Result     Click below to get the result:     Result  

To set dark grey outlined border to a button, use the btn-outline-dark class.Include the brn-outline-dark class as if you add any other class to an element. Here, we have the button element since we want a dark grey outline for our button:   Dark gray outline Let us see an eample to implement the btn-outline-dark class in Bootstrap −ExampleLive Demo       Bootstrap Example                             Bootstrap 4     Learning  btn-outline-dark class usage:     Dark gray outline  

Use the .align-self-*-start class in Bootstrap 4 to align a flex item from the start on different screens.To align a flex item on different screens −Small Screen   Item 1   Item 2   Item 3   Item 4 Large Screen   Item 1   Item 2   Item 3   Item 4 Let us see the complete example to align a flex item from the start on different screens −ExampleLive Demo       Bootstrap Example                         Align Specific Flex Item from the start       Item 1     Item 2     Item 3     Item 4     Small Screen Size         Item 1     Item 2     Item 3     Item 4     Medium Screen Size       Item 1     Item 2     Item 3     Item 4     Large Screen Size       Item 1     Item 2     Item 3     Item 4