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 by Amit Diwan
Page 6 of 8
Style 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 MoreCreate a Bootstrap 4 card header
To create a card header in Bootstrap 4, use the card-header class. Set the header inside the card using the class − Product List After adding the header, add the body of the card as shown in the following code snippet −Product List Product One Product Two Let us see an example to learn how to create Bootstrap 4 card header −Example Bootstrap Example Products Product List Product One Product Two This was the list of products in stock.
Read MoreBootstrap 4 .flex-row class
Use the flex-row class in Bootstrap to dispay flex items horizontally.Achieve the following using the flex-row class −Now add the flex-items in the class to allow horizontal alignment − Audi BMW Benz You can try to run the following code to implement the flex-row class −Example Bootstrap Example Flex Row Audi BMW Benz
Read MoreBootstrap 4 .card-footer class
Use the card-footer class in Bootstrap 4 to set the footer of a Bootstrap card.Add it using the class − Add footer message here The card-footer class comes after the card-header and card-body class − Details Timings: 4PM - 8PM Reach before 4PM You can try to run the following code to implement the card-footer class −Example Bootstrap Example Conference Details Timings: 4PM - 8PM Reach before 4PM
Read MoreBootstrap 4 .flex-*-row class implementation
To set flex items horizontally for different screen sizes like large, small, medium, etc, use the flex-*-row class.Let us see which flex-*-row class is used for different screen sizes −Small Screen Size: flex-sm-row Medium Screen Size: flex-md-row Large Screen Size: flex-lg-rowThe following is an example to set flex items horizontally for small screen size − Audi BMW Benz You can try to run the following code to implement .flex-*-row class in Bootstrap 4 −Example Bootstrap Example ...
Read MoreDisplay flex items horizontally on a specific screen size in Bootstrap
To set flex item horizontally in different screen size, use the flex-*-row class.The varied screen sizes is set for small, medium, large and extra large screen size. Let us see how to align flex items horizontally for small screen size −Flex Row (Small Screen) Audi BMW Benz The following is an example to display flex items horizontally on different screen size −Example Bootstrap Example Flex ...
Read MoreBootstrap show.bs.popover event
The show.bs.popover event fires when the popover is about to be visible.Fire the popover event −$("[data-toggle='popover']").on('show.bs.popover', function(){ alert('Popover is about to be visible!'); });You can try to run the following code to implement the show.bs.popover event −Example Bootstrap Example Awards Here's the list: List $(document).ready(function(){ $(".btn-default").click(function(){ $("[data-toggle='popover']").popover('show'); }); $("[data-toggle='popover']").on('show.bs.popover', function(){ alert('Popover is about to be visible!'); }); });
Read MoreShow flex items horizontally in Bootstrap
To show flex items horizontally, use the flex-row class.Add it to class −Now add flex items accordingly − TCS Wipro Accenture Gartner Here is the complete example to implement the flex items horizontally −Example Bootstrap Example Companies TCS Wipro Accenture Gartner
Read MoreShow flex items right aligned and horizontally in Bootstrap
If you want to display flex items right aligned, horizontally and reversed, then use the flex-row-reverse class.Use the class like the following code snippet − ONE TWO THREE The following is an example to show reverse order of flex items −Example Bootstrap Example Flex Flex Row Reverse ONE TWO THREE Flex Row ONE TWO THREE
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 More