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      

Use the card-link class to add a hover effect and blue color to any link in a card.The following is a code snippet showing three links with hover effect using the card-link class in Bootstrap 4 −   Website Development   App Development (iOS)   App Development (Android) Try the following code to implement the card-link class −ExampleLive Demo       Bootstrap Example                             Services                   Company         We provide the following tech development services:         Website Development         App Development (iOS)         App Development (Android)            

To set a light grey background for the Bootstrap 4 cards, use the bg-light class.Use “card bg-light” like any other class in Bootstrap −   Image Editor The above gives a light grey background to the Bootstrap card.Let us see an example of the card-light class −ExampleLive Demo       Bootstrap Example                             Web Tools           Image Editor             Image Optimizer