|
|
Borders in Bootstrap are a styling element used to enhance the visual appearance of containers, buttons, and other elements. They can be customized with various colors, thicknesses, and styles to create distinct visual effects. Below are the approaches to add a border to a container in Bootstrap: Using Border ClassIn this approach, we are using Bootstrap’s border class to add a border to a container. The container is centered in the middle of the page using Bootstrap utility classes for flexbox (d-flex, justify-content-center, align-items-center) and vh-100 for full viewport height. Example: The example below illustrates the implementation of adding a Border to a container in Bootstrap through the above approach. Output:
Using Substractive BorderIn this approach, we are using Bootstrap’s border classes (border, border-dark, border-start-0, border-end-0) to create a subtractive border effect on a container. Example: The example below illustrates the implementation to Add a Border to a container in Bootstrap through the above approach. Output:
Using Border ColorIn this approach, we are using Bootstrap’s border and border-primary classes to add a border with a primary color to a container. Example: The example below illustrates the implementation to Add a Border to a container in Bootstrap through the above approach. Output:
Using Border RadiusIn this approach, we are using Bootstrap’s border, border-info, and rounded-3 classes to add a border with rounded corners to a container. The container and its content are centered vertically and horizontally in the viewport using Bootstrap’s flexbox utility classes . Example: The example below illustrates the implementation to Add a Border to a container in Bootstrap through the above approach. Output:
|
Reffered: https://www.geeksforgeeks.org
| Bootstrap |
Type: | Geek |
Category: | Coding |
Sub Category: | Tutorial |
Uploaded by: | Admin |
Views: | 14 |