If you want to add rounded corners to an element, then use the rounded-bottom class.Use it on any element like −Above, we have set demo as well for class, for our div that is a rectangle.Here is our demo CSS class − .demo {   width: 110px;   height: 150px;   background-color: blue; } You can try to run the following code to add bottom rounded corners to an element −ExampleLive Demo     Bootstrap Example               .demo {     width: 110px;     height: 150px;     background-color: blue;    }               Rectangle     We have a rectangles with rounded corners (bottom):      

The hidden.bs.modal event in Bootstrap fires when the modal is completely hidden.Firstly, click on the hide button to hide the modal −$("#button1").click(function(){   $("#newModal").modal("hide"); }); After clicking the button, the hidden.bs.modal fires and generates an alert using the following script −$("#newModal").on('hidden.bs.modal', function () {   alert('The modal is completely hidden now!'); });Let us see an example to implement the hidden.bs.modal event −ExampleLive Demo   Bootstrap Example               #button1 {     width: 140px;     padding: 20px;     bottom: 150px;     z-index: 9999; ... Read More

Use the .align-content-*-stretch in Bootstrap 4 to stretch gathered items on different screens.To stretch items on different screens −Stretch items on Small Screen   Work 1   Work 2   Work 3   Work 4   Work 5   Work 6 Stretch items on Medium Screen   Work 1   Work 2   Work 3   Work 4   Work 5   Work 6 Stretch items on Large Screen   Work 1   Work 2   Work 3   Work 4   Work 5   Work 6 Let us see an example to stretch gathered items on different screen size ... Read More

Align single rows of items at the baseline in Bootstrap 4, use the .align-items-baseline class.To align at the baseline:

The .modal(“hide”) method hides the modal on button click.Firstly, generate the modal and display it −$("#newModal").modal("show");After that, use the modal(“hide”) method on a button to hide the modal on button click −$("#button1").click(function(){   $("#newModal").modal("hide"); });Let us see an example of the modal(‘hide”) method wherein we are hiding a modal which generates on page load −ExampleLive Demo       Bootstrap Example                             #button1 {       width: 140px;       padding: 20px;       bottom: 150px; ... Read More

If you want to set content as a Bootstrap modal, then use the .modal(options) method.On button click, the modal generates as in the following script.$(document).ready(function(){   $("#button1").click(function(){     $("#newModal1").modal({backdrop: true});   }); });Above, I have set options as “backdrop:true”. Another option, we can set is “backdrop: true” −backdrop: true =  Clicking outside the modal, close it.backdrop: false = Clicking outside the modal, won’t close it.You can try to run the following code to implement the modal(“options”) class −ExampleLive Demo       Bootstrap Example                     ... Read More

To show flex items vertically on different screen sizes, use the flex-*- column class. For small, medium and large screen sizes, use it as −For Small screen size −For Medium screen size −For Large screen size −Let us see an example to learn how to set flex items vertically on different screen sizes −ExampleLive Demo       Bootstrap Example                             Example     Note: Change the browser size to see the effect.     Default           One       Two       Three         Flex on differet screen size (Medium)           One       Two       Three         Flex on differet screen size (Large)           One       Two       Three    

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