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
Create a Flexbox container with Bootstrap 4
Use the d-flex class in Bootstrap to create a flexbox container.Here, I have set two flex items − One Two Above, I have used the d-flex class to set the container. The container has both the flex items styled using the bg-primary and bg-warning classes respectively.Let us see the complete example −Example Bootstrap Example Understanding Flex One Two
Read MoreAlign an element with the lowest element on the line in Bootstrap 4
Use align-bottom class in Bootstrap 4 to align an element with the lowest element on the line.Set the class as −Now add content − Bottom Alignment You can try to run the following code to align an element with the lowest element on the line in Bootstrap 4 −Example Bootstrap Example Example This is demo text Demo Baseline Top Alignment Middle Alignment Bottom Alignment
Read MoreSet a green border to an element in Bootstrap to indicate success
To set green border, use the border-success class in Bootstrap 4.The below element will have green border since we have set the class of the as border-success class − Green border You can try to run the following code to set green border to an element indicating success −Example Bootstrap Example .mystyle { width: 150px; height: 150px; margin: 10px; } Rectangle Green border
Read MoreGet a muted look with .disabled in Bootstrap Pager
To get a muted look with disabled class, you can try to run the following code −Example Bootstrap Example Answers Q1 Q2 Q3 Q4 Q5 Q6 ← Older Newer →
Read MoreBootstrap 4 Button .btn-outline-warning class
To set an outline on a button that indicates warning, you need to use the btn-outline class in Bootstrap.For my class, I have taken the below button − Warning (Errors) The button above has the class btn-outline-warning that allow us to add an orange outline stating warning action −You can try to run the following code to implement the btn-outline-warning class −Example Bootstrap Example Warning The following are the warning messages: semi-colon (;) missing infinite loop For more warning messages: Warning (Errors)
Read MoreUse previous and next class for alignment of links
You can try to run the following code to use the previous and next class for alignment of links:Example Bootstrap Example Answers ← Older Newer →
Read MoreSet positive action to the Bootstrap 4 card
To set positive/ success action to a card in Bootstrap, use the card-success class.Here, I have set the card-success class like we set class on any element like . Deal! In the same way, set other success messages − Task complete! Let us implement success action on a Bootstrap 4 card −Example Bootstrap Example Success Messages Deal! Cleared the 2nd round! Victory! Task complete!
Read MoreAlign single rows of items in the center with Bootstrap 4
Use the .align-items-center class in Bootstrap to align single rows of items in the center.To align in the center −Now add the flex items − Item 1 Item 2 Item 3 Item 4 You can try to run the following code to implement the align-items-center class in Bootstrap 4 −Example Bootstrap Example Align Flex Items on a single row at the center Item 1 Item 2 Item 3 Item 4
Read Morecard-title class in Bootstrap 4
Use the card-title class in Bootstrap 4 to set title for the card like the following example −The card title set above used the card-title class inside the card-body class. In addition, I have used the card-text class to set text inside the Bootstrap card as shown in the below give code snippet − Company Locations Singapore Malaysia Australia You can try to run the following code to implement the card-title class −Example Bootstrap Example Location Company Locations Singapore Malaysia Australia
Read MoreAdd a light grey background color to the Bootstrap 4 card
To add a light grey background color to a card in Bootstrap, use the bg-light contextual class with the card class.To set light grey background, add it to the class − Reduce size of images You can try to run the following code to add ligh grey background color to a card in Bootstrap 4 −Example Bootstrap Example Optimization Reduce size of images Clear Cache Use CDN
Read More