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   ... Read More

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 ... Read More

To float an element to the left in Bootstrap, use the float-left class.Using the class, set the element on the left as shown below −   I am on the left. Set it on other elements like , , , etc −   Heading is on the left. You can ... Read More

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 −ExampleLive Demo   ... Read More

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 ... Read More

To align a flex item in the center on different screens in Bootstrap 4, use the .align-self-*-center class.Set it on different screens like small, medium, large, etc −Align a flex item in the center on small screen   A-one   B-one   C-one   D-one Align a flex item in ... Read More

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 ... Read More

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 −ExampleLive ... Read More

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 −ExampleLive Demo ... Read More

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 ... Read More