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

Use the d-*block class in Bootstrap to create block on a specific screen width.You can set it for small, medium, large, and extra large screen size −   d-sm-block   d-md-block   d-lg-block   d-xl-block You can try to run the following code to implement the d-*-block class −ExampleLive Demo       Bootstrap Example                         Blocks   Resize the browser to check the effect   block   Small Screen Size   Medium Screen Size   Large Screen Size   Extra Large Screen Size

The .modal(“hide”) method in Bootstrap hides the modal.Hide the Bootstrap modal on the click of a button −$("#button1").click(function(){   $("#newModal").modal("hide"); });The modal is shown using the modal(“show”) method −$("#newModal").modal("show");Let us see an example of the modal(‘hide”) method −ExampleLive Demo       Bootstrap Example                             #button1 {       width: 140px;       padding: 20px;       bottom: 150px;       z-index: 9999;       font-size:15px;       position: absolute;       ... Read More