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?      

Use .align-content-*-center class to align gathered items in the center on different screens in Bootstrap 4.Here is how you can align gathered items in the center on different screens −Small Screen SizeMedium Screen SizeLarge Screen SizeYou can try to run the following code to align gathered items in the center on different screens in Bootstrap 4 −ExampleLive Demo      Bootstrap Example                         Example       One     Two     Three     Four     Five     Six ... Read More

Set a container of cards, using the card-deck class.Work it inside the following div that would be of equal width and height −         You can try to run the following code to implement the card-deck class −ExampleLive Demo       Bootstrap Example                             Demo Messages     Note: Resize the browser to check the effect.                           Nothing new!                            Warning! Compile-time error!          Check again!                            We won!            

To set negative action (danger) for cards with red background color, you need to use the Bootstrap contextual class card-danger.Set the danger action −   Danger! High Voltage! You can try to run the following code to set danger action for a card in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             Messages           How you doing?               Danger! High Voltage!      

Display a green border to an element in Bootstrap that indicates success using the border-success class.Set the border as green −    Green border I have also added “mystyle” class in the div, which is to style our div, a rectangle in my example −.mystyle {   width: 250px;   height: 150px;   margin: 10px; }Implement the border-success as shown below −ExampleLive Demo       Bootstrap Example                             .mystyle {       width: 250px;       height: 150px;       margin: 10px;     }   Shape   Green border

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 implement the border-secondary class −ExampleLive Demo       Bootstrap Example                             .mystyle {       width: 250px;       height: 150px;       margin: 10px;      }           Shape   Rectangle with gray border