Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
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 Bootstrap Example Demo Tooltip will be visible here Show Tooltip Destroy Tooltip $(document).ready(function(){ $(".btn-primary").click(function(){ $("[data-toggle='tooltip']").tooltip('show'); }); $(".btn-default").click(function(){ $("[data-toggle='tooltip']").tooltip('destroy'); }); });
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 1 Item 2 Item 3 Item 4 You can try to run the following code to implement the align-self-start class −ExampleLive Demo Bootstrap Example Align Specific Flex Item from the start Item 1 Item 2 Item 3 Item 4
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 code to implement the show.bs.tooltip event −ExampleLive Demo Bootstrap Example Event Here tooltip will be displayed using the "Show" buttpn ... 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 Bootstrap Example Example One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen
To add a light grey background color to a card in Bootstrap, use the bg-light contextual class with the card class.To set light grey background, add it to the class − Reduce size of images You can try to run the following code to add ligh grey background color to a card in Bootstrap 4 −ExampleLive Demo Bootstrap Example Optimization Reduce size of images Clear Cache Use CDN
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
To align a flex item at the baseline in Bootstrap 4, use the .align-self-baseline class.Set the flex item at the baseline as shown below − A-one B-one C-one D-one You can try to run the following code to implement the align-self-baseline class in Bootstrap 4 −ExampleLive Demo Bootstrap Example Align Specific Flex Item at the baseline A-one B-one C-one D-one
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 are set for small, medium, large, and extra large screen size.Let us see an example of the class and its implementation −ExampleLive Demo Bootstrap Example Flex Example d-flex d-sm-flex d-md-flex d-lg-flex d-xl-flex
With jQuery, you can easily clear HTML form fields. For this, jQuery: reset Selector is used. This will clear the HTML form fields.ExampleYou can try to run the following code to clear form fields with jQuery −Live Demo $(document).ready(function(){ $(":reset").css("background-color", "#F98700"); }); Student Name Student Subject
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