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 by Kristi Castro
Page 6 of 8
Bootstrap 4 .card-img-bottom class
Use the card-img-bottom class in Bootstrap 4 to place an image at the bottom inside a Bootstrap 4 card.Set the card body, and within that, the card title and card text − Quantitative Aptitude For Entrance Exams Sample Questions Now set image with class “card-img-bottom”−Let us see an example to learn how to implement Bootstrap 4 .card-img-bottom class −Example Bootstrap Example Quantitative Aptitude Questions Answers Quantitative Aptitude For Entrance Exams Sample Questions
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("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 MoreStyle Bootstrap 4 card with bg-warning class
Use the bg-warning class with the card class in Bootstrap to set warning action on a Bootstrap card.Set warning messages like −Do not cross! High Voltage!Use the below code to style a Bootstrap card − You are trespassing on private property! You can try to run the following code to style Bootstrap card with the bg-warning class −Example Bootstrap Example Warning You are trespassing on private property!
Read MoreSet negative action to the Bootstrap 4 card
To set negative action on a Bootstrap card, use the bg-warning class with the card class as shown in the below example − Over 20 students failed the final-year exam. Let us see an example to set negative action to a card in Bootstrap 4 −Example Bootstrap Example Result Over 20 students failed the final-year exam.
Read MoreBootstrap 4 .justify-content-* class
To align flex items, use the justify-content-* class.Use any of the following to align flex items at the start, end, around, and between.justify-content-start – Align Flex items at the start justify-content-end - Align Flex items at the end justify-content-around – Align flex items around on different screen sizes justify-content-between - Alex flex items in between on difference screen sizesLet us see an example to set the flex items at the start − RANK 1 RANK 2 RANK3 The following is the example to implement the justify-content-* class −Example Bootstrap Example RANK 1 RANK 2 RANK3 RANK 1 RANK 2 RANK 3 RANK 1 RANK 2 RANK 3
Read MoreAdd a hover effect inside the Bootstrap 4 card
To add a hover effect, use the card-link class in Bootstrap.The following are the links using the card-link class −XAMPP (MySQL + PHP + Apache) WordPressAll of the above code is used inside the card-body class − WordPress Installation To work with WordPress, you need the following XAMPP (MySQL + PHP + Apache) WordPress You can try to run the following code to add a hover effect inside Bootstrap 4 card −Example Bootstrap Example Requirement - WordPress WordPress Installation To work with WordPress, you need the following XAMPP (MySQL + PHP + Apache) WordPress
Read MoreSet a light grey border to an element in Bootstrap 4
To set a light grey border to an element, use the border border-light class in Bootstrap 4.Adding a light border is easy as shown below − This element has light border You can try to run the following code to implement the border-light-class −Example Bootstrap Example .demo { width: 150px; height: 220px; margin: 15px; } Demo This element has light border
Read MoreBootstrap 4 .border-primary class
Add a blue border to an element in Bootstrap 4 using the border-primary class as shown below:Set the class as − Blue Border You can try to run the following code to implement the border-primary class −Example Bootstrap Example .demo { width: 250px; height: 170px; margin: 10px; } Demo Heading Blue Border
Read More