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 on Trending Technologies
Technical articles with clear explanations and examples
Set warning action for a list item in a list group with Bootstrap
To set warning action for a list item in a list group, use the .list-group-item-warning classExample Bootstrap Example Demo A B C D
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 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 MoreAdd HTML paragraphs into Bootstrap thumbnails
With Bootstrap, you can easily add paragraphs to thumbnails.You can try to run the following code to add HTML paragraphs −Example Bootstrap Example Thumbnail label This is demo paragraph! This is demo paragraph! This is demo paragraph! This is demo paragraph! This is demo paragraph! This is demo paragraph! This is demo paragraph! This is demo paragraph! This is demo paragraph! This is demo paragraph! This is demo paragraph!
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 MoreAdd badges component to Bootstrap list group item
Add the badges component to any list group item and it will automatically be positioned on the right. Just add within the element.You can try to run the following code to implement thisExample Bootstrap Example Tutorials Programming Web Development Networking New Database SAP New Academic
Read MoreAdd HTML Content to Bootstrap List Group
Bootstrap list groups are added using the list-group-item class.Add HTML content to the linked list groups using the following codeExample Bootstrap Example Tutorials Programming Tutorials on Java, C, C++, etc. Web Development Tutorials on PHP, HTML5, etc. Database Tutorials on DBMS, MySQL, DB2, etc. Quiz CAT Quiz for CAT students. NEET Quiz for NEET students.
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 Large Grid
To create a Bootstrap large grid, you can try to run the following code −Example Bootstrap Example Grid This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This ...
Read MoreAdd a blue background color to simulate a pressed button in Bootstrap
To add a blue background color to simulate a pressed button, use the primary button in Bootstrap as in the following code −Example Bootstrap Example Score Result (2018) Result (2017)
Read More