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 734 of 801
Bootstrap 4 .d-block class
Use the .d-block class in Bootstrap to create block element.The d-block class is set as shown in the below code snippet − block You can try to run the following code to implement the d-block class −Example Bootstrap Example Creating Blocks Resize the browser to check the effect. block block on small screen
Read MoreBootstrap 4 .flex-wrap-reverse class
Use the flex-wrap-reverse class in Bootstrap 4 to wrap flex items and in reverse order.Here is the difference between flex-wrap and flex-wrap-reverse −Set wrap-flex-reverse as in the following code snippet − Rank 1 Rank 2 Rank 3 Rank 4 Rank 5 You can try to run the following code to implement flex-wrap-reverse class −Example Bootstrap Example Wrap Flex Wrap Rank 1 Rank 2 Rank 3 Rank 4 Rank 5 Rank 6 Rank 7 Rank 8 Rank 9 Rank 10 Rank 11 Rank 12 Rank 13 Rank 14 Rank 15 Rank 16 Rank 17 Rank 18 Rank 19 Rank 20 Flex Wrap - Reverse Rank 1 Rank 2 Rank 3 Rank 4 Rank 5 Rank 6 Rank 7 Rank 8 Rank 9 Rank 10 Rank 11 Rank 12 Rank 13 Rank 14 Rank 15 Rank 16 Rank 17 Rank 18 Rank 19 Rank 20
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 MoreWrap flex items in reversed order in Bootstrap
To wrap flex items in reverse order, you need to use the flex-wrap-reverse class in Bootstrap.To wrap reverse flex items, use the flex-wrap-reverse class −Now add the flex items accordingly − Rank 1 Rank 2 Rank 3 Rank 4 Let us see an example to implement the flex-wrap-reverse class −Example Bootstrap Example Wrap Flex Wrap Rank 1 Rank 2 Rank 3 Rank 4 Rank 5 Rank 6 Rank 7 Rank 8 Rank 9 Rank 10 Rank 11 Rank 12 Rank 13 Rank 14 Rank 15 Rank 16 Rank 17 Rank 18 Rank 19 Rank 20 Flex Wrap - Reverse Rank 1 Rank 2 Rank 3 Rank 4 Rank 5 Rank 6 Rank 7 Rank 8 Rank 9 Rank 10 Rank 11 Rank 12 Rank 13 Rank 14 Rank 15 Rank 16 Rank 17 Rank 18 Rank 19 Rank 20
Read MoreBootstrap .card class
To create a card in Bootstrap, use the .card class and add card body as well − Basic card You can also set the Bootstrap card title and card footer using the card-title and card-title class respectively.The following is the code to create a Bootstrap card −Example Bootstrap Example Demo Card This is the body of the card.
Read MoreShow 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 More