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

Use the border-left-0 class to remove the left border of an element.Remove the left border of a using the class inside the −   Removing left border The “one” class is also set in the class to style it − .one {   width: 220px;   height: 220px;   margin: 50px; } You can try to run the following code to work with the border-left-0 class −ExampleLive Demo       Bootstrap Example                             .one {       width: 220px;       height: 220px;       margin: 50px;     }         Bootstrap 4   Removing left border

To create a block element, use the .d-block Bootstrap 4 class.Use the d-block class −   A block To set blocks for difference screen sizes, use the .d-*-block −   A block for medium screen size Let us see an example to learn how to create block element −ExampleLive Demo       Bootstrap Example                             Blocks     Resize the browser to check the effect           A block               A block for medium screen size      

Add less important stuff, using the card class with the bg-secondary contextual class in Bootstrap.This class adds a gray background −Inside that, add the card body −   English You can try to run the following code to implement the card class with bg-secondary class in Bootstrap −ExampleLive Demo       Bootstrap Example                             Languages           English               French               Chinese                Russian      

To justify the flex items on the end, use the justify-content-end class.To justify the flex items on the end, on different screen sizes, use the justify-content-*-end class. The flex items justified at the end would be visible like the following on different screen sizes −Small Screen Size   Alabama   New York   Texas Medium Screen Size   Alabama   New York   Texas Let us see the complete code and learn how to work with justify-content-*-end class −ExampleLive Demo       Bootstrap Example                               US               Alabama         New York         Texas                     Alabama         New York         Texas                     Alabama         New York         Texas        

To align items in the center on different screen sizes, use the justify-content-*-center class.The aligned flex items would be like the following for small screen size −   GOLF   CRICKET   SQUASH The aligned flex items would be like the following for medium screen size −   GOLF   CRICKET   SQUASH The aligned flex items would be like the following for large screen size −   GOLF   CRICKET   SQUASH Let us see how to implement the justify-content-*-center −ExampleLive Demo       Bootstrap Example                             Sports     Centered on small screen           GOLF       CRICKET       SQUASH         Centered on medium screen           GOLF       CRICKET       SQUASH         Centered on large screen           GOLF       CRICKET       SQUASH