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
Web Development Articles
Page 732 of 801
Stretch single rows of items in Bootstrap 4
Use the .align-items-stretch class to stretch single rows of items in Bootstrap 4.To stretch single rows of items −
Read MoreHow to implement Bootstrap 4 .flex-*-nowrap class
The flex-*-nowrap class works like flex-no-wrap class to avoid wrapping of flex items.However, if you want to avoid wrapping on different screen sizes, then use the flex-*-no-wrap class like −flex-lg-nowrap: Avoid wrapping on large screen sizeflex-sm-nowrap: Avoid wrapping on small screen sizeflex-md-nowrap: Avoid wrapping on medium screen sizeThe following is an example to implement the flex-*-nowrap class −Example Bootstrap Example Flex items will wrap One ...
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 MoreAvoid 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 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 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 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 Morehidden.bs.popover Bootstrap event
The hidden.bs.popover event fires when the popover is completely hidden.Fire the popover event −$("[data-toggle='popover']").on(hidden.bs.popover', function(){ alert('The Popover is now hidden!'); });You can try to run the following code to implement the hidden.bs.popover event −Example Bootstrap Example Awards Here's the list: List (Display) List (Hide) $(document).ready(function(){ $(".btn-primary").click(function(){ ...
Read MoreOpen Bootstrap Modal
The modal(“show”) method opens a Bootstrap modal as shown below −$("#newModal").modal("show");When the following button is clicked, the modal is displayed − Click to hide Let us see an example of modal(“show”) method to open a Bootstrap Modal −Example Bootstrap Example #button1 { width: 140px; padding: 20px; bottom: 150px; z-index: 9999; font-size: 15px; position: absolute; margin: 0 auto; } ...
Read More