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
Avoid wrapping flex-items in Bootstrap on different screens
You can wrap the flex items on difference screen sizes, using the flex-*-nowrap class. As shown below, wrapping is avoided here −The above avoids wrapping of flex item on small and large screen size using the following code snippet −Flex items won't wrap (small screen size) Ques 1 Ques 2 Ques 3 Ques 4 Ques 5 Ques 6 Ques 7 Ques 8 Ques 9 Ques 10 Ques 11 Ques 12 Ques 13 Ques 14 Flex items won't wrap (large screen size) ...
Read MoreAlign an element with the top of the parent element's font in Bootstrap 4
Use align-text-top class to align an element with the top of the parent element's font.Set the align-text-top class as − Top Text You can try to run the following code to implement the align-text class in Bootstrap 4 −Example Bootstrap Example Example This is demo text Demo Baseline Top Alignment Top Text Bottom Text
Read MoreBootstrap .tooltip("hide") method
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 − Tooltip will be visible here You can try to run the following code to implement the tooltip(“hide”) method −Example Bootstrap Example ...
Read MoreCreate a progress bar with Bootstrap
To create a basic progress bar in Bootstrap, use the .progress and .progress-bar class.You can try to run the following code to form a progress bar −Example Bootstrap Example 60% Complete
Read MoreStyle Bootstrap 4 cards with bg-danger class
To color Bootstrap cards, we use the contextual classes.For danger action, use the bg-danger contextual class with the card class − Danger! High Voltage! You can try to run the following code to implement the card-danger class −Example Bootstrap Example Messages How you doing? Danger! High Voltage!
Read MoreBootstrap 4 .card-img-overlay class
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 to implement the card-img-overlay class in Bootstrap 4 −Example Bootstrap Example Apach - Tool for Hadoop Avro Tutorial for Apache Avro Learn
Read MoreAdd right rounded corners to an element in Bootstrap
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: #265C80; margin: 20px; } Let us see an example to set right rounded corners to a rectangle −Example Bootstrap Example .one { width: 250px; height: 120px; background-color: #265C80; margin: 20px; } Rounded Corner We have a rectangle with right rounded corner:
Read MoreAnimate 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 More