BootstrapHow-ToBeginner · 3 min read

How to Use Border Utilities in Bootstrap: Simple Guide

Bootstrap border utilities let you add or remove borders using simple border classes like border, border-top, or border-0. You can also control border colors with classes like border-primary and border widths with border-2.

📐

Syntax

Bootstrap border utilities use simple class names to control borders on elements.

border: adds a border on all sides.
border-top, border-end, border-bottom, border-start: add border on one side.
border-0: removes all borders.
border-{color}: sets border color, e.g., border-primary.
border-{width}: sets border thickness, e.g., border-3.

html

<div class="border border-primary border-3 p-3">Content with border</div>

Output

A box with blue thick border around the content "Content with border"

💻

Example

This example shows how to add borders on different sides, change colors, and adjust thickness using Bootstrap classes.

html

<!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 class="p-4">
  <div class="border border-primary p-3 mb-3">All sides border with primary color</div>
  <div class="border-top border-success p-3 mb-3">Top border only with success color</div>
  <div class="border-start border-danger border-4 p-3 mb-3">Left border only with thick danger color</div>
  <div class="border-0 p-3 mb-3" style="border: 1px solid #ccc;">No Bootstrap border (border removed)</div>
</body>
</html>

Output

Four boxes stacked vertically: 1) blue border all sides, 2) green border top only, 3) thick red border left only, 4) no border from Bootstrap but a light gray border from inline style

⚠️

Common Pitfalls

Common mistakes when using Bootstrap border utilities include:

Using border class but expecting only one side to have a border (use border-top, etc. instead).
Forgetting to include Bootstrap CSS link, so classes have no effect.
Trying to set border width without a border color class, which may result in invisible borders.
Using border-0 to remove borders but having inline styles or other CSS overriding it.

html

<!-- Wrong: border width without color -->
<div class="border-3 p-3">No visible border because color is missing</div>

<!-- Right: border width with color -->
<div class="border border-3 border-primary p-3">Visible thick blue border</div>

Output

First box has no visible border, second box has a thick blue border

📊

Quick Reference

Class	Effect
border	Adds border on all sides
border-top	Adds border on top side only
border-end	Adds border on right side only (LTR)
border-bottom	Adds border on bottom side only
border-start	Adds border on left side only (LTR)
border-0	Removes all borders
border-{color}	Sets border color, e.g., border-primary, border-success
border-{width}	Sets border thickness, e.g., border-1, border-2, border-3

✅

Key Takeaways

Use border classes to quickly add or remove borders on elements.

Combine side-specific classes like border-top with color and width classes for precise styling.

Always include a border color class to ensure borders are visible.

Remember border-0 removes all borders but can be overridden by other CSS.

Bootstrap border utilities work best with Bootstrap CSS properly linked in your project.