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

Set orange outline for a Bootstrap 4 button, using the btn-outline-warning class and indicate warning action.The following includes the orange outline on a button −   Rejected The class is added just as any other class added to any element in Bootstrap.  For a Bootstrap button, I used the element.You can try to run the following code to implement the btn-outline-warning class −ExampleLive Demo       Bootstrap Example                       College Placements   Selected Students   Rejected Students   Result Awaited List of selected and rejected students: Selected Rejected

To add information to a card in Bootstrap 4, use the bg-info class.Use the card class with the bg-info class:Add the card body after that using the card-body class −   Demo Text You can try to run the following code to add information −ExampleLive Demo       Bootstrap Example                         Festival Celebration       Reach till 5PM  

Use the card-img-top class in Bootstrap 4, to set the image at the top inside a card in Bootstrap 4 −Add the image inside the card class −Now add the card body that includes title and text −   Swift 4   Learn Swift 4   Begin The following is an example to place an image at the top inside a Bootstrap 4 card −ExampleLive Demo       Bootstrap Example                             SWIFT 4 Tutorial     Video Tutorial on Switft 4                         Swift 4         Learn Swift 4         Begin            

To form an element as a circle, use the .rounded-circle class in Bootstrap.It is easy to implement it −Let us see an example to create a circle in Bootstrap −ExampleLive Demo       Bootstrap Example                             .test {       width: 300px;       height: 300px;       background-color: orange;     }           Circle     We have a circle below:      

To set white border to an element, use the border-white class.Add white border −   This has white border Above, I have also added a style to set the div element −.mystyle {   width: 200px;   height: 100px;   margin: 10px;   background: blue; }Let us see an eample to implement the border-white class in Bootstrap −ExampleLive Demo       Bootstrap Example                             .mystyle {       width: 200px;       height: 100px;       margin: 10px;       background: blue;     }         The following are two Rectangles:   This has white border   This has orange border

Use the card-img-top class in Bootstrap to set the image at the top inside a card −After that add the card and card body −   Swift 4   Learn Swift 4   Begin You can try to run the following code to implement the card-img-top class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             SWIFT 4 Tutorial     Video Tutorial on Switft 4                         Swift 4         Learn Swift 4         Begin            

Use the card-img-overlay class to turn an image into a card background.You need to first set the element and then use the card-img-overlay class as in the following code snippet −         Avro     Tutorial for Apache Avro     Learn   Let us see an example to learn how to turn an image into a Bootstrap card background −ExampleLive Demo       Bootstrap Example                         Apach - Tool for Hadoop                 Avro       Tutorial for Apache Avro       Learn