Use the column-reverse class on various screen size to display flex item vertically and reversed.For example: On medium screen size, use md-column-reverse −The following is the difference between column and column reverse −The following is an example to display flex items vertically and reversed on different screen sizes −ExampleLive Demo       Bootstrap Example                             Example     Flex on different screen size (Column)           First       Second       Third         Flex on different screen size (Medium - Column Reverse)           First       Second       Third         Flex on different screen size (Large - Column Reverse)           First       Second       Third      

The shown.bs.modal event in Bootstrap fires when the modal is completely displayed.The modal is displayed using the modal(show) method −$("#button1").click(function(){   $("#newModal").modal("show"); });Fire shown.bs.modal event and generate the alert as shown below −$("#newModal").on('shown.bs.modal', function () {   alert('The modal is displayed completely!'); });You can try to run the following code to implement the shown.bs.modal event in Bootstrap −ExampleLive Demo       Bootstrap Example                             Entrance Exams       The following is the result of the ... Read More

Use the d-inline-flex class in Bootstrap to create an inline flexbox container −Now add the flex-items inside it as in the following code snippet −         One         Two         Three   You can try to run the following code to implement the .d-inline class −ExampleLive Demo       Bootstrap Example                             Understanding Inline Flex             One       Two       Three      

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