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 736 of 801
Style Bootstrap 4 card with bg-success class
To set positive action to a card in Bootstrap, use the bg-success class with the card classSet positive action and use “card bg-success” −Now add the body of the card using the card-body class − India won by 7 wickets You can try to run the following code to implement the card-success class −Example Bootstrap Example Result Result of the first two matches between India and Australia: India won by 10 runs India won by 7 wickets
Read MoreBootstrap 4 .flex-*-wrap class implementation
Use the flex-*-wrap class like flex-lg-wrap, flex-sm-wrap, flex-md-wrap, etc to wrap flex items on different screen sizes −The following is the code snippet for the flex items wrap on small screen size using the flex-sm-wrap class − Poland Netherlands Ireland Brazil You can try to run the following code to implement the flex-*-wrap class in Bootstrap 4 −Example Bootstrap Example Flex Examples Wrap - Yes ...
Read MoreStyle navigation pills inside the Bootstrap 4 card header
To style navigation pills inside the card header in Bootstrap 4, use the card-header-pills class as shown below & minus;Set the navigation pills inside the header class in Bootstrap − Clothing Electronics Mobile Accessories You can try to run the following code to implement the card-header-pills class in Bootstrap 4 −Example Bootstrap Example Products Clothing Electronics Mobile Accessories Clothing We have Men and Women clothing line...
Read MoreBootstrap 4 .flex-column-reverse class implementation
Reverse the order of flex items using the flex-column-reverse class in Bootstrap 4.Set the flex-column-reverse class as shown below −Add the flex items to include in your Bootstrap 4 − Demo 1 Demo 2 Demo 3 The following is an example to implement the flex-column-reverse class −Example Bootstrap Example Implementing Column Reverse Demo 1 Demo 2 Demo 3
Read MoreBootstrap 4 .justify-content-*-around class
Use the justify-content-*-around class in Bootstrap to align flex items around on different screen sizes −justify-content-sm-around : Justify content on small screen size justify-content-md-around : Justify content on medium screen size justify-content-lg-around : Justify content on large screen sizeFor an example, let us see how to align flex items for medium screen device (justify-content-md-around) − RANK 1 RANK 2 RANK 3 You can try to run the following code to implement the justify-content-* −Example Bootstrap Example RANK 1 RANK 2 RANK 3 RANK 1 RANK 2 RANK 3 RANK 1 RANK 2 RANK 3 RANK 1 RANK 2 RANK 3
Read MoreAlign flex items around on different screen sizes in Bootstrap
To align flex items around on different screen sizes, use the justify-content-*-around class.You can achieve the following result that justifies content on small and medium screen sizes −To implement the justify-content-*-around class in Bootstrap −Example Bootstrap Example Default ANS 1 ANS 2 ANS 3 Small Screen Size ANS 1 ANS 2 ANS 3 Medium Screen Size ANS 1 ANS 2 ANS 3 Large Screen Size ANS 1 ANS 2 ANS 3
Read MoreStyle Bootstrap card with bg-info class
Use the bg-info class with the card-class in Bootstrap 4 to add information in a card −Now include the card-body class in it − Bring your Laptop for the BootCamp Let us see an example to learn how to implement Bootstrap 4 bg-info class with the card class −Example Bootstrap Example Information - Event Bring your Laptop for the BootCamp
Read MoreBootstrap 4 .justify-content-*-center class
Use the justify-content-*-center class in Bootstrap 4 to center content on different screen sizes.For different screen sizes −justify-content-sm-center: Small Screen Size justify-content-md-center: Medium Screen Size justify-content-lg-center: Large Screen Size justify-content-xl-center: Extra Large Screen SizeLet us see how to implement the justify-content-*-center class −Example Bootstrap Example Vehicle Car Bike Truck Car Bike Truck Car Bike Truck Car Bike Truck
Read MoreAdd left rounded corners to an element in Bootstrap
To add left rounded corners to an element like , then use the rounded-left class in Bootstarp 4.To set rounded left corners −You can try to run the following code to implement rounded-left class −Example Bootstrap Example .one { width: 200px; height: 100px; background-color: #FFFF00; margin: 8px; } Rounded Corner We have three rectangles with left rounded corner:
Read MoreBootstrap 4 .justify-content-*-start class
Use the justify-content-start class in Bootstrap to justify content in the beginning.The justify-content-*-start class is used in Bootstrap to justify content in the beginning on different screen sizes like the following on small, medium, and large screen sizes −You can try to run the following code to implement the justify-content-*-start class −Example Bootstrap Example Entertainment Bollywood Tollywood Hollywood Bollywood Tollywood Hollywood Bollywood Tollywood Hollywood
Read More