- 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
![Ricky Barnes](https://www.tutorialspoint.com/assets/profiles/13354/profile/60_84969-1512590781.jpg)
87 Views
Use the border-white class in Bootstrap 4 to set white border to an element. This has white border The test class above styles the element as shown below − .test { width: 120px; height: 100px; margin: 10px; background: blue; } Let us see an example to implement the border-white class in Bootstrap −ExampleLive Demo Bootstrap Example .test { width: 120px; height: 100px; margin: 10px; background: blue; } Two Rectangles This has white border This has orange border
![Ricky Barnes](https://www.tutorialspoint.com/assets/profiles/13354/profile/60_84969-1512590781.jpg)
144 Views
To set orange border to an element, use the border-warning class − Danger (Orange border) Set the style for the element − .mystyle { width: 200px; height: 100px; margin: 10px; } Let us see an example to implement the border-warning class in Bootstrap −ExampleLive Demo Bootstrap Example .mystyle { width: 200px; height: 100px; margin: 10px; } The following are two Rectangles: Danger (Orange border)
![Ricky Barnes](https://www.tutorialspoint.com/assets/profiles/13354/profile/60_84969-1512590781.jpg)
228 Views
Use the border-top-0 class in Bootstrap 4 to remove the top border.Set the border-top-0 class − Rectangle is missing the TOP border. Let us see an example to implement the border-top-0 class −ExampleLive Demo Bootstrap Example .mystyle { width: 350px; height: 170px; margin: 10px; } Heading Two Rectangle is missing the TOP border.
![Ricky Barnes](https://www.tutorialspoint.com/assets/profiles/13354/profile/60_84969-1512590781.jpg)
339 Views
Use the .flex-*- column class in Bootstrap to show flex items vertically on different screen sizes:Set it vertically on small, medium, large, etc screen size. Let us see it on small and medium screen size:Small Screen SizeFlex on different screen size (Small) One Two Three Medium Screen SizeFlex on different screen size (Medium) One Two Three The following is an example implementing what I have shown above the usage of flex-*-column −ExampleLive Demo Bootstrap Example ... Read More
![Kristi Castro](https://www.tutorialspoint.com/assets/profiles/44730/profile/60_19515-1530624995.png)
195 Views
To display flex items vertically, use the flex-column class in Bootstrap 4 −Now set the flex-items in it − One Two Three Four Five Let us see an example to learn how to learn how to display flex-column class − ExampleLive Demo Bootstrap Example Example of Flex Column Stating the usage of flex column class: One Two Three Four Five
![Kristi Castro](https://www.tutorialspoint.com/assets/profiles/44730/profile/60_19515-1530624995.png)
57 Views
The hide.bs.modal event in Bootstrap fires when the modal is about to be hidden.Firstly, hide the Bootstrap modal on button click −$("#button1").click(function(){ $("#newModal").modal("hide"); });Now, use the hide.bs.modal class and generate the alert when the modal is about to hide on button click −$("#newModal").on('hide.bs.modal', function () { alert('The modal is about to be hidden.'); });Let us see an example stating the usage of hide.bs.modal event −ExampleLive Demo Bootstrap Example #button1 { ... Read More
![Kristi Castro](https://www.tutorialspoint.com/assets/profiles/44730/profile/60_19515-1530624995.png)
292 Views
Use the border-right-0 class in Bootstrap to remove the right border.To remove the right border − Rectangle is missing the right border. Style the div as −.mystyle { width: 350px; height: 170px; margin: 10px; }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 missing the right border.
![Kristi Castro](https://www.tutorialspoint.com/assets/profiles/44730/profile/60_19515-1530624995.png)
146 Views
Add a blue border to an element in Bootstrap 4 using the border-primary class as shown below:Set the class as − Blue Border You can try to run the following code to implement the border-primary class −ExampleLive Demo Bootstrap Example .demo { width: 250px; height: 170px; margin: 10px; } Demo Heading Blue Border
![Kristi Castro](https://www.tutorialspoint.com/assets/profiles/44730/profile/60_19515-1530624995.png)
336 Views
To set a light grey border to an element, use the border border-light class in Bootstrap 4.Adding a light border is easy as shown below − This element has light border You can try to run the following code to implement the border-light-class −ExampleLive Demo Bootstrap Example .demo { width: 150px; height: 220px; margin: 15px; } Demo This element has light border
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
4K+ Views
The modal(“show”) method opens a modal like below −The modal is displayed using the modal(“show”) method as shown below −$("#newModal").modal("show");Let us see an example of modal(“show”) method −ExampleLive Demo Bootstrap Example #button1 { width: 140px; padding: 20px; bottom: 150px; z-index: 9999; font-size: 15px; position: absolute; margin: 0 auto; } ... Read More