Bootstrap 5 Borders
Bootstrap 5 Borders offer predefined border styles to elements. Classes like .border, .border-0, .border-top, .border-bottom, .border-left, and .border-right provide easy customization for borders, including color, width, and radius, enhancing UI design.
Bootstrap 5 Borders:
Property | Description |
---|---|
Border | Classifies into additive and subtractive. Additive adds borders, subtractive removes. |
Border Color | Utilizes theme colors to change border color. |
Border Width | Increases or decreases border width. |
Border Radius | Utilizes rounded classes for rounded corners. |
Sass | Supports language extensions like variables, utility API, and mixins. |
Examples of Bootstrap 5 Borders
Example 1: This code demonstrates the different border sizes as shown below. The class “border border-4″ means “border-4” size is applied to all the sides and so on.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap 5 Borders </title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<h2 class="text-center">Bootstrap 5 Borders</h2>
<div class="text-center">
<span class="border border-4">1</span>
<span class="border-top border-5">2</span>
<span class="border-end border-4">3</span>
<span class="border-bottom border-5">4</span>
<span class="border-start border-3">5</span>
</div>
</body>
</html>
Output:
Example 2: This code demonstrates different border colors using the relevant classes.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap 5 Borders </title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<h2 class="text-center">
Bootstrap 5 Borders
</h2>
<div class="text-center">
<span class="border border-primary">
1
</span>
<span class="border border-secondary">
2
</span>
<span class="border border-success">
3
</span>
<span class="border border-danger">
4
</span>
<span class="border border-warning">
5
</span>
<span class="border border-info">
6
</span>
<span class="border border-light">
7
</span>
<span class="border border-dark">
8
</span>
<span class="border border-white">
9
</span>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/utilities/borders/