Use the card-img-bottom class in Bootstrap 4 to place an image at the bottom inside a Bootstrap 4 card.Set the card body, and within that, the card title and card text −   Quantitative Aptitude   For Entrance Exams   Sample Questions Now set image with class “card-img-bottom”−Let us see an example to learn how to implement Bootstrap 4 .card-img-bottom class −ExampleLive Demo       Bootstrap Example                             Quantitative Aptitude Questions Answers                   Quantitative Aptitude         For Entrance Exams         Sample Questions                    

Use the rounded-right class in Bootstrap 4 to add right rounded corners to an element.Just set the class to be rounded-right to an element like below −Here, another class “one” is also set to style the element − .one {   width: 250px;   height: 120px;   background-color: #265C80;   margin: 20px; } Let us see an example to set right rounded corners to a rectangle −ExampleLive Demo       Bootstrap Example                             .one {       width: 250px;       height: 120px;       background-color: #265C80;       margin: 20px;     }             Rounded Corner       We have a rectangle with right rounded corner:      

Use the card-img-overlay class to turn an image into a Bootstrap 4 card background and set the image using the element and the card-img-top class −After that, use the card-img-overlay class −   Avro   Tutorial for Apache Avro   Learn You can try to run the following code to implement the card-img-overlay class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             Apach - Tool for Hadoop                         Avro         Tutorial for Apache Avro         Learn            

Use the tooltip(“hide”) method in Bootstrap to hide the tooltip. The tooltip hides on button click as shown below −$(".btn-default").click(function(){   $("[data-toggle='tooltip']").tooltip('hide'); });Above the data-toggle attribute can be seen which we set before on element. Now the toggle will generate from the link when the button is clicked −   Tooltip will be visible here You can try to run the following code to implement the tooltip(“hide”) method −ExampleLive Demo       Bootstrap Example                           ... Read More

You can wrap the flex items on difference screen sizes, using the flex-*-nowrap class. As shown below, wrapping is avoided here −The above avoids wrapping of flex item on small and large screen size using the following code snippet −Flex items won't wrap (small screen size)   Ques 1   Ques 2   Ques 3   Ques 4   Ques 5   Ques 6   Ques 7   Ques 8   Ques 9   Ques 10   Ques 11   Ques 12   Ques 13   Ques 14 Flex items won't wrap (large screen size)   ... Read More

Use the .align-items-stretch class to stretch single rows of items in Bootstrap 4.To stretch single rows of items −

The flex-*-nowrap class works like flex-no-wrap class to avoid wrapping of flex items.However, if you want to avoid wrapping on different screen sizes, then use the flex-*-no-wrap class like −flex-lg-nowrap: Avoid wrapping on large screen sizeflex-sm-nowrap: Avoid wrapping on small screen sizeflex-md-nowrap: Avoid wrapping on medium screen sizeThe following is an example to implement the flex-*-nowrap class −ExampleLive Demo       Bootstrap Example                             Flex items will wrap           One   ... Read More

To set rounded left corners to an element, use the rounded-left class in Bootstrap 4.Use the class on any element like − We have also included the one class to style our −.one {   width: 200px;   height: 100px;   background-color: maroon;   margin: 8px; }Let us see an example to implement the rounded-left class −ExampleLive Demo       Bootstrap Example                             .one {       width: 200px;       height: 100px;       background-color: maroon;       margin: 8px;     }             Rounded Corner     We have two rectangles with left rounded corner:          

Use the flex-nowrap class in Bootstrap 4 to avoid wrapping the flex items.Here you can see the difference between wrap and nowrap −Above the flex-items are not wrapped. This is achieved using the flex-nowrap class in Bootstrap 4 −   One   Two   Three   Four   Five   Six   Seven   Eight   Nine The following is an example to avoid wrapping flex items −ExampleLive Demo       Bootstrap Example                             FLEX WRAP AND NOWRAP     Flex items will wrap           One       Two       Three       Four       Five       Six       Seven       Eight       Nine         Flex items won't wrap           One       Two       Three       Four       Five       Six       Seven       Eight       Nine      

Remove the right border from an element; use the border-right-0 class.To remove the border −   Rectangle is not having the right border. You can try to run the following code to implement the border-right-0 class −ExampleLive Demo       Bootstrap Example                             .mystyle {       width: 350px;       height: 170px;       margin: 10px;     }                   Heading Two       Rectangle is not having the right border.