Use the card-header class to create header of a Bootstrap card −   This is the header After including the card header, you can add the card body and footer as shown in the following code snippet −   This is demo content.   This is the footer. ... Read More

To set blue outlined Bootstrap 4 button, use the .btn-outline-primary class.Add a blue outline to a button −   Blue outline You can try to run the following code to implement the btn-outline-primary class in Bootstrap −ExampleLive Demo       Bootstrap Example                             Bootstrap 4     You can see blue outline below:     Blue outline

Use the btn-outline-light class in Bootsrap 4 to set light grey outlined button.To include it on the web page, set it as a class in the element as shown in the following code snippet −Let us see an example to implement the btn-outline-light class −ExampleLive Demo   ... Read More

To align gathered items from the start, use the .align-content-start class in Bootstrap 4.Set the items as shown below −   Work 1   Work 2   Work 3   Work 4   Work 5   Work 6 You can try to run the following code to implement the align-content-start ... Read More

Use the float-right class in Bootstrap to place an element on the right.The default text alignment is on the left and use the float-right class to align text on the right as in the following code snippet −   This text is on the right. It can be used on ... Read More

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   ... Read More

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 ... Read More

To stretch a flex item on different screens in Bootstrap 4, use the .align-self-*-stretch class.To strect in on different screens, you need to use align-self-sm-stretch, align-self-md-stretch, align-self-lg-stretch, etc. Below is an example for small screen size −   A-one   B-one   C-one   D-one You can try to run ... Read More

Use the flex-*-column-reverse class to display flex items vertically and reversed on different screen sizes.Here’s the example of reversing flex items on medium device using “flex-md-column-reverse” class −   One   Two   Three In the same way, set for large devices using “flex-lg-column-reverse” class −   One   Two ... Read More

Set a grey border to an element, using the border-secondary class in Bootstrap 4.Add it like the following example − I have also included the “mystyle” class to style the div − .mystyle {   width: 250px;   height: 150px;   margin: 10px; } Let us see an example to ... Read More