- 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
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
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
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
532 Views
Follow the below given steps to create a progress bar with different styles −Add a with a class of .progress.Next, inside the above , add an empty with a class of .progress-bar and class progress-bar-* where * could be success, info, warning, danger.Add a style attribute with the width expressed as a percentage. Say, for example, style = "60%"; indicates that the progress bar was at 60%.The progress bars created below are for showing positive action and key information −ExampleLive Demo Bootstrap Example Progress Bars 90% Complete (Sucess) 30% Complete (info)
735 Views
Use the .active class to add gray background color to the active list item in a list group in Bootstrap.You can try to run the following code to add background color to the active list item −ExampleLive Demo Bootstrap Example Features of Java Interface Multi-threading Packages Collection Serialization
2K+ Views
Use the .modal-lg class in Bootstrap to set large modal with more width.You can try to run the following code to set large modal;ExampleLive Demo Bootstrap Example Examination Result × Warning If JavaScript isn't enabled in your web browser, then you may not be able to see the result. Close