0
0
Bootsrapmarkup~5 mins

Border utilities in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Border utilities help you quickly add or remove borders around elements without writing custom CSS.

You want to highlight a section with a border quickly.
You need to add a border only on one side of a box.
You want to remove borders from an element easily.
You want consistent border styles across your site without extra CSS.
You want to change border colors using Bootstrap's color system.
Syntax
Bootsrap
border
border-top
border-end
border-bottom
border-start
border-0
border-top-0
border-end-0
border-bottom-0
border-start-0
border-primary
border-secondary
border-success
border-danger
border-warning
border-info
border-light
border-dark
border-white

Use border to add a border on all sides.

Add -0 suffix to remove border from specific sides.

Examples
This adds a border around the entire box.
Bootsrap
<div class="border p-3">Box with border on all sides</div>
This adds a border only on the top side.
Bootsrap
<div class="border-top p-3">Box with border only on top</div>
This adds a border with the primary color from Bootstrap.
Bootsrap
<div class="border border-primary p-3">Box with blue border</div>
This adds a red border on all sides except the top.
Bootsrap
<div class="border border-danger border-top-0 p-3">Box with red border except no top border</div>
Sample Program

This example shows four boxes with different border utilities from Bootstrap. Each box uses padding for spacing and different border classes to demonstrate how borders appear on all sides, only on top, with color, and with one side removed.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Border Utilities Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container my-5">
    <h1>Bootstrap Border Utilities</h1>
    <section class="mb-4">
      <div class="border p-3 mb-3">Border on all sides</div>
      <div class="border-top p-3 mb-3">Border only on top</div>
      <div class="border border-primary p-3 mb-3">Primary color border</div>
      <div class="border border-danger border-top-0 p-3">Danger color border except no top border</div>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Border utilities use 1px solid borders by default.

Use padding classes like p-3 to add space inside bordered elements.

Border colors follow Bootstrap's theme colors for consistency.

Summary

Border utilities let you add or remove borders quickly with simple classes.

You can control which sides have borders and their colors easily.

They help keep your design consistent and save time writing CSS.