- 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
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
239 Views
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:
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
2K+ Views
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
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
89 Views
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.
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
214 Views
Use the border-primary class to set a blue border to an element.For a blue border, add the class, as if you add it for or any other element − Let us see an example to set a blue border −ExampleLive Demo Bootstrap Example .demo { width: 350px; height: 170px; margin: 10px; } Demo Heading This rectangle has blue border
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
260 Views
To set an outline on a button that indicates danger, you need to use the btn-outline-danger class in Bootstrap.Set the outline in the element − Danger Ahead You can try to run the following code to implement the btn-outline-danger class −ExampleLive Demo Bootstrap Example Danger Button Danger Ahead
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
1K+ Views
To add a gray background color to the Bootstrap 4 card, use the card class with the bg-dark contextual class −Set the card body inside the same class − Hello Let us see the complete example add a grey background color to Bootstrap card −ExampleLive Demo Bootstrap Example Welcome Hello
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
69 Views
Use .align-items-*-stretch class to stretch single rows of items on different screens in Bootstrap 4.Stretch single rows if items on specific screen sizes as shown below:Small Screen Size Medium Screen Size Large Screen Size Extra Large Screen Size Let us implement the align-items-*-stretch class in Bootstrap 4 −ExampleLive Demo Bootstrap Example Align Flex Items on a single row (stretch) Item 1 Item 2 Item 3 Item 4 Small Screen Size Item 1 Item 2 Item 3 Item 4 Medium Screen Size Item 1 Item 2 Item 3 Item 4 Large Screen Size Item 1 Item 2 Item 3 Item 4 Extra Large Screen Size Item 1 Item 2 Item 3 Item 4
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
2K+ Views
Avoid wrapping flex items in Bootstrap 4, using the .flex-nowrap class.Below you can see the flex items aren’t wrapping after the “Eight” flex-item −The flex is set in the div class as if we add any other class in −The following is an example to implement flex-nowrap class to avoid wrapping of 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
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
137 Views
Use the .align-content-center class to align gathered items in the center in Bootstrap 4.Set the align-content-center class as shown below −After that, add the flex items − One Two Three Let us see an example to implement the align-content-center class −ExampleLive Demo Bootstrap Example Example One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
320 Views
The show.bs.tooltip event in Bootstrap fires when the tooltip is about to be displayed −$("[data-toggle='tooltip']").on('show.bs.tooltip', function(){ alert('Tooltip will be visible now.'); });The "data-toggle" attribute is set before as an tag attribute, since the Bootstrap generates from there itself − Timings You can try to run the following code to implement the show.bs.tooltip event −ExampleLive Demo Bootstrap Example Event Here tooltip will be displayed using the "Show" buttpn ... Read More