Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles on Trending Technologies
Technical articles with clear explanations and examples
Bootstrap .tooltip("toggle") method
Use the tooltip(“toggle”) method in Bootstrap to togle the tooltip.The tooltip generates on clicking the button shown below − Toggle Tooltip Toggle the tooltip on button click like the following code snippet −$(".btn-info").click(function(){ $("[data-toggle='tooltip']").tooltip('toggle'); });You can try to run the following code to implement the tooltip(“toggle”) method −Example Bootstrap Example Demo Tooltip will be visible here Show Tooltip Hide Tooltip Toggle Tooltip $(document).ready(function(){ $(".btn-primary").click(function(){ $("[data-toggle='tooltip']").tooltip('show'); }); $(".btn-default").click(function(){ $("[data-toggle='tooltip']").tooltip('hide'); }); $(".btn-info").click(function(){ $("[data-toggle='tooltip']").tooltip('toggle'); }); });
Read MoreStack multiple progress bars with Bootstrap
To stack multiple progress bars in Bootstrap, you can try to run the following codeExample Bootstrap Example 40% Complete (success) 30% Complete (warning) 20%Complete (danger)
Read MoreStretch a flex item in Bootstrap 4
To stretch a flex item in Bootstrap 4, use the .align-self-stretch class. Here, the 2nd flex item is stretched using the align-self-stretch class in Bootstrap − A-one B-one C-one D-one You can try to run the following code to stretch a flex item −Example Bootstrap Example Align Specific Flex Item and Stretch A-one B-one C-one D-one
Read MoreDisplay flex items vertically and reversed in Bootstrap 4
The flex-column-reverse is used to display reversed flex items with vertical orientation. Add the flex-column-reverse class as in the following code snippet −After that, add flex items inside it − Demo 1 Demo 2 Demo 3 You can try to run the following code to show flex items vertically and reversed −Example Bootstrap Example Implementing Column Reverse Demo 1 Demo 2 Demo 3
Read MoreBootstrap 4 .flex-*-column-reverse class
Use the flex-*-column-reverse class to display flex items vertically and reversed on different screen sizes.Here’s the example of reversing flex items on medium device using “flex-md-column-reverse” class − One Two Three In the same way, set for large devices using “flex-lg-column-reverse” class − One Two Three Implementing the .flex-*-column-reverse class −Example Bootstrap Example Example Change the browser size to see the effect: Default One Two Three Flex on differet screen size (Medium-Reverse) One Two Three Flex on different screen size (Large-Reverse) One Two Three
Read MoreSet a grey border to an element in Bootstrap 4
Set a grey border to an element, using the border-secondary class in Bootstrap 4.Add it like the following example − I have also included the “mystyle” class to style the div − .mystyle { width: 250px; height: 150px; margin: 10px; } Let us see an example to implement the border-secondary class −Example Bootstrap Example .mystyle { width: 250px; height: 150px; margin: 10px; } Shape Rectangle with gray border
Read MoreAllow a label to be used for form validation with Bootstrap
Use the .control-label class in Bootstrap to allow a label to be used for form validation.You can try to run the following code to implement the control-label class in BootstrapExample Bootstrap Example Email- amit@demo.com
Read MoreContainer to create a grid of Bootstrap 4 cards of equal height and width
Set a container of cards, using the card-deck class.Work it inside the following div that would be of equal width and height − You can try to run the following code to implement the card-deck class −Example Bootstrap Example Demo Messages Note: Resize the browser to check the effect. Nothing new! Warning! Compile-time error! Check again! We won!
Read MoreAdd large shadow to an element in Bootstrap 4
Use the .shadow-lg class in Bootstrap to add large shadow to an elementYou can try to run the following code to implement .shadow-lg class −Example Bootstrap Example Learning Learn Tutorials for free Try programming examples Play Quiz and check your knowledge
Read MoreStyle Bootstrap 4 cards with bg-dark class
Use the bg-dark contextual class in Bootstrap 4 to add a gray background to a card −In the below code snippet, I have used the bg-dark class to style the Bootstrap card. With that, I have also the text-while class to set the text to be white − This is it! Let us see the complete example to work with bg-dark class −Example Bootstrap Example Notification This is it! How you doing?
Read More