Use the bg-dark contextual class in Bootstrap 4 to add a gray background to a card −In the below code snippet, I have used the bg-dark class to style the Bootstrap card. With that, I have also the text-while class to set the text to be white −   This ... Read More

To create a footer in Bootstrap 4 card, use the card-footer class.Set the footer −   Footer message The footer class comes after the card-body and card-header class, since the footer is always in the bottom as the footer of a web page. Here is the complete code −   ... Read More

To create a card header in Bootstrap 4, use the card-header class. Set the header inside the card using the class −   Product List After adding the header, add the body of the card as shown in the following code snippet −Product List       Product One ... Read More

Use align-text-top class to align an element with the top of the parent element's font.Set the align-text-top class as −   Top Text You can try to run the following code to implement the align-text class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example     ... Read More

To color Bootstrap cards, we use the contextual classes.For danger action, use the bg-danger contextual class with the card class −   Danger! High Voltage! You can try to run the following code to implement the card-danger class −ExampleLive Demo       Bootstrap Example                             Messages           How you doing?              Danger! High Voltage!      

Create a grid of cards with Bootstrap 4, using the card-columns class.Set the grid inside the class −   Include the card body inside the card container as in the following code snippet. I have added the card body under the card-class. The card-class is added inside the card-columns ... Read More

Use align-top class to align an element with the top of the tallest element on the line.Align the element like this −   Top Alignment Let us see an example to implement the align-top class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example     ... Read More

Use the border-top-0 class to remove the top border from an element.Set the class as if we add any other class to an element −   Top border is missing Above, I have taken as our element. Another class “mystyle” is also added that styles our div −.mystyle { ... Read More

Use the .align-items-*-baseline in Bootstrap 4 to align single rows of items at the baseline on different screens.On different screen sizes, align single rows of items as shown below −Align at the baseline on Small Screen Size   Item 1   Item 2   Item 3   Item 4 Align ... Read More

Use align-middle class to place an element in the middle of the parent element.To place an element in the middle −   Middle Alignment Let us seen an example to implement the align-middle class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example       ... Read More