- 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)
292 Views
To set positive action to a card in Bootstrap, use the bg-success class with the card classSet positive action and use “card bg-success” −Now add the body of the card using the card-body class − India won by 7 wickets You can try to run the following code to implement the card-success class −ExampleLive Demo Bootstrap Example Result Result of the first two matches between India and Australia: India won by 10 runs India won by 7 wickets
![Alex Onsman](https://www.tutorialspoint.com/assets/profiles/13357/profile/60_91536-1512482971.jpg)
180 Views
To style navigation pills inside the card header in Bootstrap 4, use the card-header-pills class as shown below & minus;Set the navigation pills inside the header class in Bootstrap − Clothing Electronics Mobile Accessories You can try to run the following code to implement the card-header-pills class in Bootstrap 4 −ExampleLive Demo Bootstrap Example Products Clothing Electronics Mobile Accessories Clothing We have Men and Women clothing line...
![Alex Onsman](https://www.tutorialspoint.com/assets/profiles/13357/profile/60_91536-1512482971.jpg)
125 Views
Use the flex-*-wrap class like flex-lg-wrap, flex-sm-wrap, flex-md-wrap, etc to wrap flex items on different screen sizes −The following is the code snippet for the flex items wrap on small screen size using the flex-sm-wrap class − Poland Netherlands Ireland Brazil You can try to run the following code to implement the flex-*-wrap class in Bootstrap 4 −ExampleLive Demo Bootstrap Example Flex Examples Wrap - Yes ... Read More
![Alex Onsman](https://www.tutorialspoint.com/assets/profiles/13357/profile/60_91536-1512482971.jpg)
185 Views
If you want to wrap flex items in Bootstrap, then use the flex-wrap class. To wrap, use − India US UK Australia Denmark You can try to run the following code to avoid wrapping of flex items −ExampleLive Demo Bootstrap Example Flex Examples Wrap - Yes India US UK Australia Denmark India Poland Netherlands Ireland Brazil Russia Morocco Wrap - No India US UK Australia Denmark India Poland Netherlands Ireland Brazil Russia Morocco
![Alex Onsman](https://www.tutorialspoint.com/assets/profiles/13357/profile/60_91536-1512482971.jpg)
581 Views
To set subtitle after a title in Bootstrap card, use the card-subtitle class.Let us see how − Set Subtitle here Add the above after the card-title class and inside the card-body class − Sports Indoor Squash, Dart, Chess You can try to run the following code to set subtitle in a Bootstrap card −ExampleLive Demo Bootstrap Example Indoor Sports Sports Indoor Squash, Dart, Chess
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
143 Views
Use the flex-*-fill class to set the flex items to have equal width on different screens as shown in the below code snippet −For Small Width Screen A B C For Medium Width Screen A B C The following is an example to implement the flex-*fill class −ExmapleLive Demo Bootstrap Example Flex (Small Width) A B C Flex (Medium Width) A B C Flex (Large Width) A B C
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
170 Views
If you want to set rounded right corner to an element, then use the rounded-right class in Bootstrap 4.Adding it to the web page is not a tiresome task. Just add the class to div class −The one class above is used to set style for div − .one { width: 200px; height: 100px; background-color: #00FF00; margin: 8px; } You can try to run the following code to implement the rounded-right class −ExampleLive Demo Bootstrap Example .one { width: 200px; height: 100px; background-color: #00FF00; margin: 8px; } Rounded Corner We have a rectangle with right rounded corner:
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
324 Views
To set the container for the Bootstrap card, you need to use the card-body class. It allows you to add contentThe following is the card-body class − Body of the card And set the above inside the card class as shown in the following code snippet − Body of the card. You can try to run the following code to implement the card-body class −ExampleLive Demo Bootstrap Example Heading Three Body of the card.
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
170 Views
The hidden.bs.tooltip event in Bootstrap fires when the tooltip is hidden −$("[data-toggle='tooltip']").on('hidden.bs.tooltip', function(){ alert('Tooltip is completely hidden now.'); });The data-toggle attribute is set before as shown below − Timings You can try to run the following code to implement the hidden.bs.tooltip event −ExampleLive Demo Bootstrap Example Event Here tooltip will be displayed using the "Show" buttpn and can be hidden using the "Hide" button. Timings ... Read More
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
555 Views
Use the card-deck class in Bootstrap to form a grid of cards with equal width and height.Set the cards inside the following div − Let us set the grid of cards now in the card-deck class − Nothing new! You can try to run the following code to implement the card-deck classExampleLive Demo Bootstrap Example Demo Messages Note: Resize the browser to check the effect. Nothing new! Warning! Compile-time error! Check again! We won!