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

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

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

Use the .nav-stacked class in Bootstrap to vertically stack pills:You can try to run the following code to implement the .nav-stacked class −ExampleLive Demo           Bootstrap Example                                          Database          The following are the database technologies:                       DB2             MySQL             SQL             CouchDB                    

Use the .nav-justified class in Bootstrap to center tabs in Bootstrap.You can try to run the following code to center tabs −ExampleLive Demo           Bootstrap Example                                          Web Development          The following are the web dev technologies:                       HTML5             jQuery             JavaScript             Ajax             ES6                    

Use the .alert-danger class in Bootstrap to create a red color alert box indicating dangerous action.You can try to run the following code to implement .alert-danger class −ExampleLive Demo        Bootstrap Example                                                       Danger!             Add dangerous action here...                    

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)                    

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                    

To add gray background color to the active link, use the .active class in Bootstrap.You can try to run the following code to implement .active class −ExampleLive Demo           Bootstrap Example                                                                      Website                                        Home                Tutorials                Quiz                                            Demo          This is demo text.          

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