To hide the displayed popover, use the popover(“hide”) method.Use the method to hide the popover like this −$(".btn-primary").click(function(){   $("[data-toggle='popover']").popover('hide'); });You can try to run the following code to implement the popover(“hide”) method −ExampleLive Demo       Bootstrap Example                             Example     Info           The following is a demo button:       Display       Hide           $(document).ready(function(){     $(".btn-default").click(function(){       $("[data-toggle='popover']").popover('show');     });     $(".btn-primary").click(function(){       $("[data-toggle='popover']").popover('hide');     });   });

To stretch a flex item in Bootstrap 4, use the .align-self-stretch class.     Here, the 2nd flex item is stretched using the align-self-stretch class in Bootstrap −   A-one   B-one   C-one   D-one You can try to run the following code to stretch a flex item −ExampleLive Demo       Bootstrap Example                           Align Specific Flex Item and Stretch         A-one       B-one       C-one       D-one    

Use the tooltip(“toggle”) method in Bootstrap to togle the tooltip.The tooltip generates on clicking the button shown below −   Toggle Tooltip Toggle the tooltip on button click like the following code snippet −$(".btn-info").click(function(){   $("[data-toggle='tooltip']").tooltip('toggle'); });You can try to run the following code to implement the tooltip(“toggle”) method −ExampleLive Demo       Bootstrap Example                             Demo     Tooltip will be visible here          Show Tooltip      Hide Tooltip      Toggle Tooltip           $(document).ready(function(){     $(".btn-primary").click(function(){       $("[data-toggle='tooltip']").tooltip('show');     });   $(".btn-default").click(function(){     $("[data-toggle='tooltip']").tooltip('hide');   });   $(".btn-info").click(function(){     $("[data-toggle='tooltip']").tooltip('toggle');   }); });

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