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      

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