The hide.bs.tooltip event in Bootstrap fires when the tooltip is about to be hidden.Click the hide button first −$(".btn-default").click(function(){   $("[data-toggle='tooltip']").tooltip('hide'); });On clicking above the hide.bs.tooltip event fires and an alert generates −$("[data-toggle='tooltip']").on('hide.bs.tooltip', function(){   alert('Tooltip will hide now.'); });You can try to run the following code to implement the ... Read More

Use the .align-self-*-start class in Bootstrap 4 to align a flex item from the start on different screens.To align a flex item on different screens −Small Screen   Item 1   Item 2   Item 3   Item 4 Large Screen   Item 1   Item 2   Item 3 ... Read More

To set dark grey outlined border to a button, use the btn-outline-dark class.Include the brn-outline-dark class as if you add any other class to an element. Here, we have the button element since we want a dark grey outline for our button:   Dark gray outline Let us see an ... Read More

The btn-outline-primary class is used in Bootstrap 4 to set blue outlined button.Add blue outline to the button using the btn-outline-primary class as shown in the following code snippet −   Result You can try to run the following code to implement the btn-outline-primary class −ExampleLive Demo   ... Read More

To create a block on a specific screen width, use the .d-*-block class.The specific screen width can be small, medium, large and extra large. Set the class indivifually based on the screen size as shown below − d-sm-block d-md-block d-lg-block< /span> d-xl-block Let us see ... Read More

Use the d-flex class in Bootstrap to create a flexbox container.Here, I have set two flex items −     One   Two Above, I have used the d-flex class to set the container. The container has both the flex items styled using the bg-primary and bg-warning classes respectively.Let us ... Read More

To set green border, use the border-success class in Bootstrap 4.The below element will have green border since we have set the class of the as border-success class −   Green border You can try to run the following code to set green border to an element indicating success ... Read More

The hide.bs.popover event fires when the popover is about to be hidden.Add a click button to hide the popver using the popver(“hide”) method −$(".btn-default").click(function(){   $("[data-toggle='popover']").popover('hide'); });After clicking the button, fire the popover event and generate an alert using the hide.bs.popver event in Bootstrap −$("[data-toggle='popover']").on(hide.bs.popover', function(){   alert('Popover is about ... Read More

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 ... Read More

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: ... Read More