- 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 626 Articles for CSS Framework
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
509 Views
The hide.bs.modal event in Bootstrap fires when the modal is about to be hidden.The following button hides the modal − Click to hide Just after clicking the hide button, the hide.bs.modal event fires and before the modal is hidden. Here is the script for the hide.bs.modal event:$("#newModal").on('hide.bs.modal', function () { alert('The modal is about to be hidden.'); });The following is the complete example to implement the hide.bs.modal event in Bootstrap −ExampleLive Demo Bootstrap Example ... Read More
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
265 Views
Use the card-text class in Bootstrap to set text in a card. Add this class in your web page by including it as any other class in an element, for example, tag in the below given code snippet − Demo text in a card The text in the card is added inside the class using the card-text class − Demo Title Demo text in a card You can try to run the following code to implement the card-text class −ExampleLive Demo Bootstrap Example Demo Demo Title Demo text in a card
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
8K+ Views
To create a rounded circle with Bootstrap, use the rounded-circle class.Add the rounded-circle class in the Above, we also have a test class, which is a CSS class to style the circle −.test { width: 270px; height: 320px; background-color: yellow; }You can try to run the following code to implement the rounded-circle class in Bootstrap 4 −ExampleLive Demo Bootstrap Example .test { width: 350px; height: 320px; background-color: yellow; } Circle We have a circle below:
![Alex Onsman](https://www.tutorialspoint.com/assets/profiles/13357/profile/60_91536-1512482971.jpg)
1K+ Views
The shown.bs.modal event in Bootstrap fires when the modal is completely displayed.Here, on button click the modal would generate. The following is our button − Result The following is the script to generate our modal on button click −$("#button1").click(function(){ $("#newModal").modal("show"); });Now the alert would generate using the shown.bs.modal event after the modal is visible to the visitors −$("#newModal").on('shown.bs.modal', function () { alert('The modal is displayed completely!'); });Here is the complete code to learn how to implement the shown.bs.modal Bootstrap event −ExampleLive Demo Bootstrap Example Entrance Exams ... Read More
![Alex Onsman](https://www.tutorialspoint.com/assets/profiles/13357/profile/60_91536-1512482971.jpg)
165 Views
The show.bs.modal event in Bootstrap fires when the modal is about to be displayed. Here, I have added a script to generate an alert − $(document).ready(function(){ $("#button1").click(function(){ $("#newModal").modal("show"); }); $("#newModal").on('show.bs.modal', function () { alert('The modal will be displayed now!'); }); }); Above, on button click, the modal generates. After that, I have used the show.bs.modal event to generate an alert when the modal is just about to be visible.The following is an example to demonstrate how to fire show.bs.modal event in Bootstrap when the modal is about to be displayed −ExampleLive Demo ... Read More
![Alex Onsman](https://www.tutorialspoint.com/assets/profiles/13357/profile/60_91536-1512482971.jpg)
6K+ Views
The show.bs.modal event in Bootstrap fires when the modal is about to be displayed.Here the alert is set using the same event and when the model is ready to be displayed, the event fires. This results in dispaying the alert to the visitor.With that, I have also set a button that clicks the modal to open as shown in the below code snippet −$(document).ready(function(){ $("#button1").click(function(){ $("#newModal").modal("show"); }); $("#newModal").on('show.bs.modal', function () { alert('The modal will be displayed now!'); }); });The following is an example to implement the show.bs.modal event in Bootstrap −ExampleLive Demo ... Read More
![Alex Onsman](https://www.tutorialspoint.com/assets/profiles/13357/profile/60_91536-1512482971.jpg)
974 Views
If you want to set content as a Bootstrap modal, then use the .modal(options) method.For this, use jQuery to set the model on the click of a button as in the following code snippet −$(document).ready(function(){ $("#button1").click(function(){ $("#newModal1").modal({backdrop: true}); }); });Let us now implement the modal(“options”) class. Here, we have two buttons that would generate different types of modals on click. One of them would close on clicking outside the modal, but another one will not close.Here is the complete example −ExampleLive Demo Bootstrap Example Sample ... Read More
![Amit Diwan](https://www.tutorialspoint.com/assets/profiles/12232/profile/60_57779-1530512459.jpg)
4K+ Views
To set flex items to be of equal width column, use the flex-fill class. The class displays the items as equal width. In the below example screenshot, you can see that we have four flex items with equal width columns −The flex-fill class is used for every flex items and in this way, we can set equal width. Below, we have two flex items − Example 1 Example 2 ExampleLive DemoThe following is an example showing how to set flex items into equal width columns using the flex-fill class − Bootstrap Example ... Read More