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      

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 any other element as well, for example, , , etc −   On the right You can try to run the following code to implement the float-right class −ExampleLive Demo       Bootstrap Example                           Example           This text is on the right.       This text is on the left.       Float Removed      

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 in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             Align Flex Items           Work 1       Work 2       Work 3       Work 4       Work 5       Work 6       Work 7       Work 8       Work 9       Work 10       Work 11       Work 12       Work 13       Work 14        

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       Bootstrap Example                         Demo Button   Below is a light grayed outline button:       Sample  

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 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. You can try to run the following code to implement the card-header class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             Demo Heading           This is the header       This is demo content.       This is the footer      

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 the following code to stretch a flex item on different screen sizes −ExampleLive Demo       Bootstrap Example                             Align Specific Flex Item and Stretch           A-one       B-one       C-one       D-one       Small Screen Size       A-one     B-one     C-one     D-one     Medium Screen Size         A-one     B-one     C-one     D-one     Large Screen Size         A-one     B-one     C-one     D-one      

Use the float-none class in Bootstrap to remove float from an element.The default for a text is always left; therefore removing float will place the text on the left −You can try to run the following code to remove float from an element −ExampleLive Demo       Bootstrap Example                             Demo           This text is on the left (on small screen).       This text is on the left (on medium screen).       This text is on the left (float removed).       This text is on the left (on extra large screen).       This text is on the left (float removed).    

Use the btn-outline-danger class in Bootsrap 4 to indicate danger with red outlined button.The following is an example to set a button that indicates danger with red outline −   Danger The class is added using the btn and btn-outline-danger class in Bootstrap −class="btn btn-outline-danger”Let us see an example to implement the btn-outline-danger class −ExampleLive Demo       Bootstrap Example                         Animals   Animals are in danger. To know what, you need to click below:   Danger