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 726 of 801
Bootstrap 4 Button .btn-outline-primary class
The btn-outline-primary class is used in Bootstrap 4 to set blue outlined button.Add blue outline to the button using the btn-outline-primary class as shown in the following code snippet − Result You can try to run the following code to implement the btn-outline-primary class −Example Bootstrap Example Result Click below to get the result: Result
Read MoreContainer to create a grid of Bootstrap 4 cards
Create a grid of cards with Bootstrap 4, using the card-columns class.Set the grid inside the class − Include the card body inside the card container as in the following code snippet. I have added the card body under the card-class. The card-class is added inside the card-columns class − Accessories Let us see an example to create a grid of cards in Bootstrap −Example Bootstrap Example Products Accessories Furnitures
Read MoreAlign an element with the top of the tallest element on the line in Bootstrap 4
Use align-top class to align an element with the top of the tallest element on the line.Align the element like this − Top Alignment Let us see an example to implement the align-top class in Bootstrap 4 −Example Bootstrap Example Example This is demo text Demo Baseline Top Alignment Middle Alignment Bottom Alignment
Read MoreAlign an element with the top of the parent element's font in Bootstrap 4
Use align-text-top class to align an element with the top of the parent element's font.Set the align-text-top class as − Top Text You can try to run the following code to implement the align-text class in Bootstrap 4 −Example Bootstrap Example Example This is demo text Demo Baseline Top Alignment Top Text Bottom Text
Read MoreStyle Bootstrap 4 cards with bg-danger class
To color Bootstrap cards, we use the contextual classes.For danger action, use the bg-danger contextual class with the card class − Danger! High Voltage! You can try to run the following code to implement the card-danger class −Example Bootstrap Example Messages How you doing? Danger! High Voltage!
Read MoreDisplay flex items vertically and reversed in Bootstrap 4
The flex-column-reverse is used to display reversed flex items with vertical orientation. Add the flex-column-reverse class as in the following code snippet −After that, add flex items inside it − Demo 1 Demo 2 Demo 3 You can try to run the following code to show flex items vertically and reversed −Example Bootstrap Example Implementing Column Reverse Demo 1 Demo 2 Demo 3
Read MoreBootstrap 4 .flex-*-column-reverse class
Use the flex-*-column-reverse class to display flex items vertically and reversed on different screen sizes.Here’s the example of reversing flex items on medium device using “flex-md-column-reverse” class − One Two Three In the same way, set for large devices using “flex-lg-column-reverse” class − One Two Three Implementing the .flex-*-column-reverse class −Example Bootstrap Example Example Change the browser size to see the effect: Default One Two Three Flex on differet screen size (Medium-Reverse) One Two Three Flex on different screen size (Large-Reverse) One Two Three
Read MoreSet a grey border to an element in Bootstrap 4
Set a grey border to an element, using the border-secondary class in Bootstrap 4.Add it like the following example − I have also included the “mystyle” class to style the div − .mystyle { width: 250px; height: 150px; margin: 10px; } Let us see an example to implement the border-secondary class −Example Bootstrap Example .mystyle { width: 250px; height: 150px; margin: 10px; } Shape Rectangle with gray border
Read MoreContainer to create a grid of Bootstrap 4 cards of equal height and width
Set a container of cards, using the card-deck class.Work it inside the following div that would be of equal width and height − You can try to run the following code to implement the card-deck class −Example Bootstrap Example Demo Messages Note: Resize the browser to check the effect. Nothing new! Warning! Compile-time error! Check again! We won!
Read MoreStyle Bootstrap 4 cards with bg-dark class
Use the bg-dark contextual class in Bootstrap 4 to add a gray background to a card −In the below code snippet, I have used the bg-dark class to style the Bootstrap card. With that, I have also the text-while class to set the text to be white − This is it! Let us see the complete example to work with bg-dark class −Example Bootstrap Example Notification This is it! How you doing?
Read More