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

Use .align-content-*-around to align gathered items "around" on different screens in Bootstrap 4.Align the gathered items around on different devices as shown below −Small DevicesMedium DevicesLarge DevicesYou can try to run the following code to implement the align-content-*-around class −ExampleLive Demo       Bootstrap Example   ... Read More

Use the bg-primary class in Bootstrap 4, to add important stuff to a card and set blue background color.Style the Bootstrap 4 card as in the following code snippet −   Medical Books I have set the body of the card in the card-body class −   Medical Books To ... Read More