To align gathered items at the end on different screens in Bootstrap 4, use the .align-content-*-end class.Align the gathered items on different screen sizes as shown below −Small Screen   One   Two   Three   Four   Five Large Screen   One   Two   Three   Four   ... Read More

Use the popver(“detroy”) to destroy the popover.It hides the popover −popover('destroy');The method is used to destroy the popover −$(".btn-default").click(function(){   $("[data-toggle='popover']").popover('destroy'); });You can try to run the following code to implement the popver(“destroy”) method −ExampleLive Demo       Bootstrap Example           ... Read More

To set a dark border to an element in Bootstrap, use the border-dark class.To work with it is an easy task. Just use the class name as the element class −   Dark Border Above, the "test" class can also be seen. This is useful to set style for the ... Read More

Use the tooltip(“destroy”) method in Bootstrap to detroy the tooltip −$(".btn-default").click(function(){   $("[data-toggle='tooltip']").tooltip('destroy'); });The following example has two buttons, one for “Show Tooltip” and another for “Destroy Tooltip” −Show Tooltip$(".btn-primary").click(function(){   $("[data-toggle='tooltip']").tooltip('show'); });Destroy Tooltip$(".btn-default").click(function(){   $("[data-toggle='tooltip']").tooltip('destroy'); });Here is the complete code to implement the tooltip(“destroy”) method −ExampleLive Demo   ... Read More

Use the .align-self-start class in Bootstrap 4 to align a flex item from the start.To align flex item from the start, you need to set the class in that particular flex item −   Item 3 The above is set inside the flex class as shown below −   Item ... Read More

The show.bs.tooltip event in Bootstrap fires when the tooltip is about to be displayed −$("[data-toggle='tooltip']").on('show.bs.tooltip', function(){   alert('Tooltip will be visible now.'); });The "data-toggle" attribute is set before as an tag attribute, since the Bootstrap generates from there itself −   Timings You can try to run the following ... Read More

Use the .align-content-center class to align gathered items in the center in Bootstrap 4.Set the align-content-center class as shown below −After that, add the flex items −   One   Two   Three Let us see an example to implement the align-content-center class −ExampleLive Demo       ... Read More

To add a title to any heading element in Bootstrap card, use the card-title class −   Top Universities The card-title class comes inside the card class in Bootstrap −   Top Universities   Stanford   Oxford ExampleLive Demo       Bootstrap Example                                           Top Universities         Stanford         Oxford            

Create a flexbox container on a specific screen size, using the .d-*-flex class in Bootstrap.For different screen size, use it as “d-sm-flex”, “d-md-flex”, etc as shown below −   Small Screen   Medium Screen   Large Screen   Extra Large Screen Above, the flex-items ... Read More

Use the flex-column class to display flex items vertically − You need to now add the flex-item inside the flex-column class −       First         Second   Let us see an example to learn how to implement the flex-column class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             Flex Column           First       Second       Third       Fourth       Fifth