To set an outline on a button that is of light grey color, you need to use the btn-outline-light class in Bootstrap.Use the class as −   Sample You can try to run the following code to implement the btn-outline-light class −ExampleLive Demo       Bootstrap Example                       Demo Button A light colored button is visible below:   Sample

To place the image at the bottom inside a card, use the card-img-bottom class.Firstly, set the card body and then use the tag to add an image. The following code snippet is added inside the card class −   Quantitative Aptitude   For Entrance Exams   Sample Questions The following is an example to learn how to place image at the bottom inside a card in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                         Quantitative Aptitude Questions Answers             Quantitative Aptitude       For Entrance Exams       Sample Questions          

Use the .align-items-start in Bootstrap 4 to align single rows of items from the start.Set the align-items-start class −Add the flex items −   Product 1   Product 2   Product 3  Implementing align-items-start class to align single rows of items −ExampleLive Demo       Bootstrap Example                           Align Flex Items on a single row       Product 1     Product 2     Product 3     Product 4    

Use the card-header-pills class in Bootstrap 4 to style navigation pills in card header.Set the navigation using the card-header-pills −The following is the code snippet to use the car-header-pills class with the na-pills class −                     Java                     C             The following is an example to implement the card-header-pills Bootstrap 4 class −ExampleLive Demo       Bootstrap Example                             Programming                                         Java                                 C                                 C++                                       Java Installation         Download JAVA JDK from Oracle Java website and...              

To style navigation tab inside the card header in Bootstrap 4, use the .card-header-tabs and create navigation tabs like the below example −The following is an example to style navigation tabs inside the Bootstrap 4 card header −ExampleLive Demo       Bootstrap Example                             IDE                                         Eclipse IDE                                 NetBeans IDE                                       Eclipse IDE Introduction         Eclipse is a widely used Java IDE.            

Use the border-warning class in Bootstrap to set orange border to an element.To add orange border, set the div as −   Warning (Orange border) You can try to run the following code to implement the border-warning class −ExampleLive Demo       Bootstrap Example                             .new {       width: 200px;       height: 150px;       margin: 10px;     }       The following is a Rectangle:   Warning (Orange border)

Use the border-secondary class in Bootstrap 4 to add a gray border to an element.Set the border as −   Gray border I have styled our element as shown in the following code snippet − .test {   width: 200px;   height: 150px;   margin: 10px; } You can try to run the following code to implement the border-secondary class −ExampleLive Demo       Bootstrap Example                             .test {       width: 200px;       height: 150px;       margin: 10px;     }       Rectangle   Gray border

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     Product Two   Let us see an example to learn how to create Bootstrap 4 card header −ExampleLive Demo       Bootstrap Example                             Products           Product List           Product One       Product Two               This was the list of products in stock.      

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 −   Venue: 811, KY Road, New York   Timings: 9AM-11AM   Reach before 9AM Let us see how to create card footer in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             Church Worship           Venue: 811, KY Road, New York       Timings: 9AM-11AM       Reach before 9AM      

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 is it! Let us see the complete example to work with bg-dark class −ExampleLive Demo       Bootstrap Example                             Notification            This is it!               How you doing?