Use the flex-column class to display flex items vertically − You need to now add the flex-item inside the flex-column class −       First         Second   Let us see an example to learn how to implement the flex-column class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             Flex Column           First       Second       Third       Fourth       Fifth      

Create a flexbox container on a specific screen size, using the .d-*-flex class in Bootstrap.For different screen size, use it as “d-sm-flex”, “d-md-flex”, etc as shown below −   Small Screen   Medium Screen   Large Screen   Extra Large Screen Above, the flex-items are set for small, medium, large, and extra large screen size.Let us see an example of the class and its implementation −ExampleLive Demo       Bootstrap Example                             Flex Example     d-flex       d-sm-flex       d-md-flex       d-lg-flex       d-xl-flex    

To align a flex item at the baseline in Bootstrap 4, use the .align-self-baseline class.Set the flex item at the baseline as shown below −   A-one   B-one   C-one   D-one You can try to run the following code to implement the align-self-baseline class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             Align Specific Flex Item at the baseline           A-one       B-one       C-one       D-one      

To add a title to any heading element in Bootstrap card, use the card-title class −   Top Universities The card-title class comes inside the card class in Bootstrap −   Top Universities   Stanford   Oxford ExampleLive Demo       Bootstrap Example                                           Top Universities         Stanford         Oxford            

To add a light grey background color to a card in Bootstrap, use the bg-light contextual class with the card class.To set light grey background, add it to the class −   Reduce size of images You can try to run the following code to add ligh grey background color to a card in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             Optimization           Reduce size of images               Clear Cache               Use CDN      

Use the .align-items-center class in Bootstrap to align single rows of items in the center.To align in the center −Now add the flex items −   Item 1   Item 2   Item 3   Item 4 You can try to run the following code to implement the align-items-center class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             Align Flex Items on a single row at the center           Item 1       Item 2       Item 3       Item 4      

Use align-bottom class in Bootstrap 4 to align an element with the lowest element on the line.Set the class as −Now add content −   Bottom Alignment You can try to run the following code to align an element with the lowest element on the line in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                         Example   This is demo text   Demo Baseline   Top Alignment   Middle Alignment   Bottom Alignment

To align single rows of items at the end on different screens in Bootstrap 4, use the .align-items-*-end class.Align on different screen sizes −Medium Screen Size   Product 1   Product 2   Product 3   Product 4 Large Screen Size   Product 1   Product 2   Product 3   Product 4 You can try to run the following code to align single rows of items at the end on specific screen sizes −ExampleLive Demo       Bootstrap Example                         Align Flex Items on a single row at the end       Product 1     Product 2     Product 3     Product 4     Small Screen Size       Product 1     Product 2     Product 3     Product 4     Medium Screen Size       Product 1     Product 2     Product 3     Product 4     Large Screen Size       Product 1     Product 2     Product 3     Product 4    

To stretch gathered items, use the .align-content-stretch class in Bootstrap 4.   Use the align-content-stretch class as −

Use the .d-*-flex class in Bootstrap to set a flexbox container on a screen size as shown below −d-flex d-sm-flex d-md-flex d-lg-flexAbove the flex is set for different screen sizes, for example,d-sm-flex = Flex for Small Screen Sized-md-flex = Flex for Medium Screen Sized-lg-flex = Flex for Large Screen Sized-xl-flex = Flex for Extra Large Screen SizeLet us see an example of the class −ExampleLive Demo       Bootstrap Example                         Understanding Flex   d-flex   Small Screen Size   Medium Screen Size   Large Screen Size   Extra Large Screen Size