- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 700 Articles for Bootstrap
![Alex Onsman](https://www.tutorialspoint.com/assets/profiles/13357/profile/60_91536-1512482971.jpg)
3K+ Views
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'); }); });
![Kristi Castro](https://www.tutorialspoint.com/assets/profiles/44730/profile/60_19515-1530624995.png)
420 Views
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
![Kristi Castro](https://www.tutorialspoint.com/assets/profiles/44730/profile/60_19515-1530624995.png)
459 Views
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'); }); });
![Kristi Castro](https://www.tutorialspoint.com/assets/profiles/44730/profile/60_19515-1530624995.png)
344 Views
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
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
108 Views
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:
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
479 Views
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
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
2K+ Views
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
![Ricky Barnes](https://www.tutorialspoint.com/assets/profiles/13354/profile/60_84969-1512590781.jpg)
97 Views
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
![Kristi Castro](https://www.tutorialspoint.com/assets/profiles/44730/profile/60_19515-1530624995.png)
178 Views
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