The hidden.bs.modal event in Bootstrap fires when the modal is completely hidden.Hide the modal on button click −$("#button1").click(function(){   $("#newModal").modal("hide"); });After you will hide it, use the hidden.bs.modal Bootstrap event to generate an alert before the modal completely hides −$("#newModal").on('hidden.bs.modal', function () {   alert('The modal is completely hidden now!'); });You can try to run the following code to implement the hidden.bs.modal event −ExampleLive Demo       Bootstrap Example                              #button1 {       width: 140px;   ... Read More

Use .align-content-around class to align gathered items "around" in Bootstrap 4.The align-content-around class is set like the below code snippet −After that add the flex items −   One   Two   Three   Four Let us see an example to align gathered items around −ExampleLive Demo       Bootstrap Example                         Example   This is demo text       One     Two     Three     Four     Five     Six     Seven     Eight     Nine     Ten     Eleven     Twleve     Thirteen     Fourteen    

Use align-text-bottom class to align an element with the bottom of the parent element's font.You need to set the align-text-bottom class as shown below −   Bottom Text You can try to run the following code to implement the align-text-bottom class in Bootstrap 4 −ExampleLive Demo   Bootstrap Example             Example   This is demo text   Demo Baseline   Top Alignment   Top Text   Bottom Text

Use the border-info class in Bootstrap, to set a border that indicates information. Set the class as if you use any other class in Bootstrap:   Details Above, we added border-info class. Another class, “one” is used to give shape to the div element −.one {   width: 180px;   height: 180px;   margin: 55px; }You can try to run the following code to implement the border-info class on a rectangle −ExampleLive Demo      Bootstrap Example                            .one {      width: 180px;      height: 180px;      margin: 55px;    }         Rectangle with a border to set information:   Details

If you want to set a dark border to an element, use the border-dark class.Spot the difference between a normal border and dark border −To add a dark border, you need to simply add it like any other class in div as shown below −   Dark Border Above, the test is the CSS style, I have used to style my rectangle (div) −.myclass {   width: 150px;   height: 150px;   margin: 35px; }Let us see how to work with the border-dark class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example       ... Read More

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

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      

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:      

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

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