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
CSS Framework Articles
Page 39 of 45
Bootstrap 4 .flex-*-column class
Use the .flex-*- column class in Bootstrap to show flex items vertically on different screen sizes:Set it vertically on small, medium, large, etc screen size. Let us see it on small and medium screen size:Small Screen SizeFlex on different screen size (Small) One Two Three Medium Screen SizeFlex on different screen size (Medium) One Two Three The following is an example implementing what I have shown above the usage of flex-*-column −Example Bootstrap Example ...
Read Moreborder-top-0 class in Bootstrap 4
Use the border-top-0 class in Bootstrap 4 to remove the top border.Set the border-top-0 class − Rectangle is missing the TOP border. Let us see an example to implement the border-top-0 class −Example Bootstrap Example .mystyle { width: 350px; height: 170px; margin: 10px; } Heading Two Rectangle is missing the TOP border.
Read MoreSet orange border on an element in Bootstrap to indicate danger
To set orange border to an element, use the border-warning class − Danger (Orange border) Set the style for the element − .mystyle { width: 200px; height: 100px; margin: 10px; } Let us see an example to implement the border-warning class in Bootstrap −Example Bootstrap Example .mystyle { width: 200px; height: 100px; margin: 10px; } The following are two Rectangles: Danger (Orange border)
Read MoreSet a white border to an element in Bootstrap
Use the border-white class in Bootstrap 4 to set white border to an element. This has white border The test class above styles the element as shown below − .test { width: 120px; height: 100px; margin: 10px; background: blue; } Let us see an example to implement the border-white class in Bootstrap −Example Bootstrap Example .test { width: 120px; height: 100px; margin: 10px; background: blue; } Two Rectangles This has white border This has orange border
Read MoreBootstrap 4 Button .btn-outline-dark class
Use the .btn-outline-dark class in Bootstrap to set dark outline on a button.The following is an example of a button with dark outline −Set the above outline to the button, using the btn-outline-dark class as shown below − Submit You can try to run the following code to implement the btn-outline-dark class −Example Bootstrap Example Bootstrap 4 Learning btn-outline-dark class usage: Submit
Read MoreBootstrap .modal("toggle") method
Use the .modal(“toggle”) method in Bootstrap to toggle the modal.As shown below, the modal generates on the click of a button −$(document).ready(function(){ $("#button1").click(function(){ $("#newModal").modal("toggle"); }); });Here is the button used above − Modal One You can try to run the following code to implement the modal(“toggle”) method −Example Bootstrap Example Sample Modal One × Sample Modal Click outside to close it. Close $(document).ready(function(){ $("#button1").click(function(){ $("#newModal").modal("toggle"); }); });
Read MoreContainer to create a grid of Bootstrap 4 cards like a group
To set a container for Bootstrap card and set it like a group, use the card-group class.Use it and create a grid like the following with two Bootstrap cards − Demo Text! Warning! The following is an example to create a grid (group of cards) in Bootstrap −Example Bootstrap Example Group of Messages Demo Text! Warning! Well done! Selected!
Read MoreBootstrap 4 .flex-wrap class
Use the flex-wrap class in Bootstrap 4 to wrap flex items. The following is the code snippet to wrap the flex items − . .
Read MoreAlign an element with the baseline of the parent in Bootstrap 4
Use the align-baseline class in Bootstrap 4 to align an element with the baseline of the parent elment.Set the align-baselinec class like the following code snippet −Now add the content inside it − Demo Baseline You can try to run the following code to align an element with the parent’s baseline −Example Bootstrap Example Example This is demo text Demo Baseline
Read Moretable-bordered class in Bootstrap
To implement a table-bordered class, you can try to run the following code −Example Bootstrap Table Footballer Rank Footballer Rank Country Messi 1 Argentina Neymar 2 Brazil Ronaldo 3 Portugal
Read More