The show.bs.popover event fires when the popover is about to be visible.Fire the popover event −$("[data-toggle='popover']").on('show.bs.popover', function(){   alert('Popover is about to be visible!'); });You can try to run the following code to implement the show.bs.popover event −ExampleLive Demo       Bootstrap Example       ... Read More

To show flex items horizontally, use the flex-row class.Add it to class −Now add flex items accordingly −   TCS   Wipro   Accenture   Gartner Here is the complete example to implement the flex items horizontally −ExampleLive Demo       Bootstrap Example                             Companies           TCS       Wipro       Accenture       Gartner      

Use the tooltip(“hide”) method in Bootstrap to hide the tooltip. The tooltip hides on button click as shown below −$(".btn-default").click(function(){   $("[data-toggle='tooltip']").tooltip('hide'); });Above the data-toggle attribute can be seen which we set before on element. Now the toggle will generate from the link when the button is clicked − ... Read More

Use the card-img-overlay class to turn an image into a Bootstrap 4 card background and set the image using the element and the card-img-top class −After that, use the card-img-overlay class −   Avro   Tutorial for Apache Avro   Learn You can try to run the following code ... Read More

Use the rounded-right class in Bootstrap 4 to add right rounded corners to an element.Just set the class to be rounded-right to an element like below −Here, another class “one” is also set to style the element − .one {   width: 250px;   height: 120px;   background-color: ... Read More

Use .align-items-*-stretch class to stretch single rows of items on different screens in Bootstrap 4.Stretch single rows if items on specific screen sizes as shown below:Small Screen Size Medium Screen Size Large Screen Size Extra Large Screen Size Let us implement the align-items-*-stretch class in Bootstrap 4 −ExampleLive Demo ... Read More

To set an outline on a button that indicates danger, you need to use the btn-outline-danger class in Bootstrap.Set the outline in the element −   Danger Ahead You can try to run the following code to implement the btn-outline-danger class −ExampleLive Demo       Bootstrap Example                             Danger Button     Danger Ahead  

Remove the right border from an element; use the border-right-0 class.To remove the border −   Rectangle is not having the right border. You can try to run the following code to implement the border-right-0 class −ExampleLive Demo       Bootstrap Example         ... Read More

To set rounded left corners to an element, use the rounded-left class in Bootstrap 4.Use the class on any element like − We have also included the one class to style our −.one {   width: 200px;   height: 100px;   background-color: maroon;   margin: 8px; }Let us ... Read More

The hide.bs.tab fires when the tab is about to be hidden in Bootstrap.Fire the hide.bs.tab and generate the alert before the modal is hidden −$('.nav-tabs a').on('hide.bs.tab', function(e){   alert('Previous tab will hide now!'); });The first tab is the active tab and fade in property is also set −   Home ... Read More