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    

To set an outline on a button that indicates information, you need to use the btn-outline-info class in Bootstrap.Include the button element and set the btn-outline-info class −   More Info You can try to run the following code to implement the btn-outline-info class −ExampleLive Demo       Bootstrap Example                         Event   The following are the details:       Event Timings 1PM TO 4PM     Venue: 21 KH, HG Lane, Alabama     For more information about the event:   More Info

Add key stuff to a Bootstrap card, using the bg-primary class with the card class.Use the bg-primary class in the card class −       Eisner Award   I have used the text-white class above, to set the text to be white.Let us see a example how to include key stuff in a Bootstrap 4 card −ExampleLive Demo       Bootstrap Example                               Awards           The Pulitzer Prize               Eisner Award               Hugo & Nebula Awards      

To align a flex item in the center with Bootstrap 4, use the .align-self-center class.The following is my div for flex −Now add flex items and here I have applied the align-self-center class on the 3rd flex item −   A-one   B-one   C-one   D-one You can try to run the following code to implement the align-self-center class in Bootstrap −ExampleLive Demo       Bootstrap Example                             Align Specific Flex Item in the center           A-one       B-one       C-one       D-one