![Trending Articles on Technical and Non Technical topics](/images/trending_categories.jpeg)
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 626 Articles for CSS Framework
![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)
290 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)
145 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)
334 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
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
3K+ Views
Use the border-0 class in Bootstrap 4 to remove all borders from an element in Bootstrap 4 − no border Above, we have the div class to no-border class and this allow us to remove the borders from the element.Let us see an example to implement the border-0 class in Bootstrap −ExampleLive Demo Bootstrap Example .mystyle { width: 120px; height: 100px; margin: 10px; background: maroon; } Rectangle no border
![David Meador](https://www.tutorialspoint.com/assets/profiles/13351/profile/60_165994-1512670078.jpg)
193 Views
Use the border-light class in Bootstrap 4, to set a light gray border to an element as shown below light border Style for the demo class is for the element −.demo { width: 150px; height: 220px; margin: 15px; }Learn how to work with the border-light class in Bootstrap −ExampleLive Demo Bootstrap Example .demo { width: 150px; height: 220px; margin: 15px; } Bootstrap 4 light border
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
60 Views
To set a border indicating information, use the border-info class.To implement it − Information Let us see an example to implement the border-info class −ExampleLive Demo Bootstrap Example .one { width: 200px; height: 240px; margin: 40px; } Rectangle with a border indicating information: Information
![Alex Onsman](https://www.tutorialspoint.com/assets/profiles/13357/profile/60_91536-1512482971.jpg)
1K+ Views
To add a red border to an element, you need to implement the border-danger class.Red border implement danger and you can set danger messages inside it.Implementing the border-danger is quite easy − Red Border Let us see an example to work with the border-danger Bootstrap 4 class −ExampleLive Demo Bootstrap Example .new { width: 120px; height: 120px; margin: 20px; } Rectangle with red border: Red Border
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
388 Views
To add top rounded corners to an element, use the rounded-top class in Bootstrap 4.I have taken div as the element −Let us learn how to add top rounded corners to an element −ExampleLive Demo Bootstrap Example .new { width: 80px; height: 80px; background-color: #EE6D1E; margin: 20px; } Rounded Corner We have a rectangle with top rounded corner: