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
CSS Framework Articles
Page 35 of 45
Show flex items right aligned and horizontally in Bootstrap 4 on a specific screen size
To show flex items on the right, horizontal on specific screen sizes, use the flex-*-row-reverse class in Bootstrap 4.Let us see how to set reverese flex items on different screen sizes −Small Screen Size: flex-sm-row-reverse Medium Screen Size: flex-md-row-reverse Large Screen Size: flex-lg-row-reverseYou can try to run the following code to display reverse flex items on different screen sizes −Example Bootstrap Example Flex Row ONE TWO THREE Flex Row Reverse ONE TWO THREE Flex Row Reverse (Small Width) ONE TWO THREE Flex Row Reverse (Medium Width) ONE TWO THREE Flex Row Reverse (Large Width) ONE TWO THREE
Read MoreFloat an element to the left on different screens with Bootstrap
On different devices like small, medium, large, etc, if you want to float an element to the left, then use the float-*-left class.The following are the classes you can use −Small Devices: float-sm-left Medium Devices: float-md-left Large Devices: float-lg-leftLet us see an example to float an element to the left on different screens −Example Bootstrap Example Demo This text is on the left (on small screen). This text is on the left (on medium screen). This text is on the left (on large screen). This text is on the left (on extra large screen).
Read MoreWrap flex items in reversed order in Bootstrap on different screens
To wrap flex items in reverse order on different screen sizes, you need to use the flex-*wrap-reverse class.The class gives options to reverse and wrap flex items on small, medium, large, and extra large screen sizes −Small Screen Size (flex-sm-wrap-reverse) Goal 1 Goal 2 Goal 3 Goal 4 . . . Large Screen Size (flex-lg-wrap-reverse) Goal 1 Goal 2 Goal 3 Goal 4 . . . You can try to run the following code to work with flex-*wrap-reverse class −Example Bootstrap ...
Read MoreBootstrap 4 .float-none class
If you want to remove float from an element, then Bootstrap 4 has a class called float-none.This removes the float − This text is on the left (float removed). Default is left. On setting the float-none class, the text moves on the left, which is laso the default alignment settings.You can try to run the following code to implement the float-none class −Example Bootstrap Example Demo This text is on the left (on small screen). ...
Read MoreFloat an element to the right on different screens with Bootstrap
Use the float-*-right class in Bootstrap to float an element to the right. Different screen size includes setting the float for small, medium, large and extra large sizes.Let us see how to float and element to the right on small and medium size screen size −Small Screen Size This text is on the right (on small screen). Medium Screen Size This text is on the right (on medium screen). Let us see how to place an element on the right on different screens −Example Bootstrap Example ...
Read MoreSet less important content with Bootstrap 4 card
To set less important stuff in Bootstrap, use the card class with the bg-secondary contextual class as shown below −Set the card body as well using the card-body class − Fitness Trackers Let us see how to set a card with less important content −Example Bootstrap Example Fitness Products Fitness Trackers Heart Rate Monitors
Read MoreBootstrap 4 Button .btn-outline-secondary class
Use the btn-outline-seondary class to set a grey outline in Bootstrap 4 to show less important information.The following is the code to set Bootstrap button to add grey outline − More Let us see how to implement the btn-outline-secondary class −Example Bootstrap Example Tools The following are the tools: Online Compiler Image Editor Image Optimizer Whiteboard For more tools, click below: More
Read MoreBootstrap 4 .card-subtitle class
Use the card-subtitle class to set subtitle for the card.The card-subtitle class is used as shown below −SportsHere, I have set the subtitle as “Indoor” for an example. The subtitle class comes after the card-title Bootstrap class − Sports Indoor Squash, Dart, Chess Let us see the example to work with card-subtitle class in Bootstrap 4 −Example Bootstrap Example Indoor and Outdoor Sports Sports Indoor Squash, Dart, Chess Sports Outdoor Cricket, Football, Hockey
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 More