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
Animate Bootstrap progress bar
Follow the below given steps to create an animated progress bar:Add a with a class of .progress and .progress-striped. Also, add class .active to .progress-striped.Next, inside the above , add an empty with a class of .progress-bar.Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.You can try to run the following code to create animated progress bar −Example Bootstrap Example Progress Bar Normal Progress Bar 45%Complete (success) Animated Progress Bar 40% Complete
Read MoreBootstrap .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 More