Bootstrap 5 Border width is used to display an outline around a box and it provides style, color, and radius of an element border on the side. The border width sets the width of an element's four borders. The width can be set as a specific size by using defined values.
Bootstrap5 Border width classes used:
- border-*: This class is used to set the width of the border to 1-5 px. (Replace * with any size from 1 to 5)
Syntax:
<div class="border border-*">
...
</div>
Note: Here * can be replaced by a size from 1-5.
Example 1: In this example, we set the border width of the elements in four directions by using border-1,border-2,border-3 classes
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container text-center ">
<h1 class="text-success">GeeksforGeeks</h1>
<h5> Bootstrap 5 Border-width</h5>
<h6 class="my-2">Cards with Border width Classes</h6>
<div class="row">
<div class="col">
<div class="card bg-light
border border-danger border-1"
style="width: 130px; height: 90px;">
</div>
</div>
<div class="col">
<div class="card bg-light
border border-danger border-2"
style="width: 130px; height: 90px;">
</div>
</div>
<div class="col">
<div class="card bg-light
border border-danger border-3"
style="width: 130px; height: 90px;">
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, we set the border width of the elements in four directions by using border-1, border-4, and border-5 classes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container text-center ">
<h1 class="text-success">GeeksforGeeks</h1>
<h5> Bootstrap 5 Border-width</h5>
<h6 class="my-4">Cards with Border width Classes</h6>
<div class="row">
<div class="col">
<div class="m-1 btn btn-light
border border-danger border-1"
style="width: 130px; height: 70px;">
<P>Button with border width</P>
</div>
</div>
<div class="col">
<div class="m-1 btn btn-light
border border-danger border-4"
style="width: 130px; height: 70px;">
<P>Button with border width</P>
</div>
</div>
<div class="col">
<div class="m-1 btn btn-light
border border-danger border-5"
style="width: 130px; height: 70px;">
<P>Button with border width</P>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
-300.png)
Reference: https://getbootstrap.com/docs/5.0/utilities/borders/#border-width
Similar Reads
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. iframe { width: 100%; height: 450px;} @media
2 min read
Bootstrap 5 Cards Border Bootstrap 5 Cards Border is part of the utilities that can be used to add borders on cards. Borderless cards are so ugly but the cards of bootstrap will always have borders. According to this utility, classes are used to define the color of the card borders. #content-iframe { width: 100%; height:425
4 min read
Bootstrap 5 Borders Sizes Bootstrap 5 Border utility is used to set the style of the border element. The border styles can be of border-color, border-width, border-radius, etc. The Border Sizes are used to set the border-radius rounded corners larger or smaller. The range of border sizes varies from 0 to 3, where 0 represent
2 min read
Bootstrap 5 Table borders Bootstrap 5 Table borders classes are used to set or unset the border of the table. With bootstrap 5 table borders are easy to customize with border or no border. Bordered tables: This is used to set the border on each side of the table.Tables without borders: This is used to make the table borderle
2 min read
Bootstrap 5 Border-radius Bootstrap 5 Border-radius offers consistent and responsive control over element roundness. With predefined classes, it allows easy customization, providing sleek and modern designs. From sharp corners to smooth curves, it enhances visual appeal effortlessly Border-radius is used to set the radius of
3 min read
Bootstrap 5 Border color Bootstrap 5 Border utility is used to set the style of the border element. The border styles can be of border-color, border-width, border-radius, etc. Border color is used to set the color of the border element using utilities built on our theme colors. iframe { width: 100%; height: 450px;} @media
3 min read