Borders in Bootstrap

Bootstrap’s border utilities provide a straightforward way to add and customize borders around elements. These utilities offer various options for setting border widths, colors, and styles, as well as controlling border radius and placement.

1. Border Widths

Bootstrap includes utilities for adjusting the width of borders:

• border: Adds a border with a default width.
• border-0: Removes the border.
• border-1: Adds a thin border.
• border-2: Adds a medium border.
• border-3: Adds a thick border.

Example:

<div class="border border-2 p-3">Border width 2</div>
<div class="border border-0 p-3">No border</div>

2. Border Colors

You can apply various border colors using predefined classes:

• border-primary: Applies the primary color (usually blue).
• border-secondary: Applies the secondary color (usually gray).
• border-success: Applies a green color.
• border-danger: Applies a red color.
• border-warning: Applies a yellow color.
• border-info: Applies a light blue color.
• border-light: Applies a light color.
• border-dark: Applies a dark color.
• border-white: Applies a white color.

Example:

<div class="border border-primary p-3">Primary border color</div>
<div class="border border-danger p-3">Danger border color</div>

3. Border Styles

Bootstrap provides utilities to set different border styles:

• border: Applies a solid border (default style).
• border-0: Removes the border.
• border-dashed: Applies a dashed border.
• border-dotted: Applies a dotted border.
• border-double: Applies a double border.
• border-solid: Applies a solid border (default style).

Example:

<div class="border border-dashed p-3">Dashed border style</div>
<div class="border border-dotted p-3">Dotted border style</div>

4. Border Radius

Border radius utilities control the rounding of corners:

• rounded: Applies a small border radius to all corners.
• rounded-sm: Applies a smaller border radius.
• rounded-lg: Applies a larger border radius.
• rounded-circle: Makes the element circular (perfectly round if it's a square).
• rounded-pill: Makes the element fully rounded like a pill.
• rounded-top: Rounds the top corners.
• rounded-right: Rounds the right corners.
• rounded-bottom: Rounds the bottom corners.
• rounded-left: Rounds the left corners.

Example:

<div class="border rounded p-3">Rounded corners</div>
<div class="border rounded-circle p-3" style="width: 100px; height: 100px;">
  Circular border
</div>

5. Border Placement

Bootstrap allows you to apply borders to specific sides of an element:

• border-top: Applies a border to the top side.
• border-right: Applies a border to the right side.
• border-bottom: Applies a border to the bottom side.
• border-left: Applies a border to the left side.

Example:

<div class="border-top border-primary p-3">Top border</div>
<div class="border-right border-success p-3">Right border</div>
<div class="border-bottom border-danger p-3">Bottom border</div>
<div class="border-left border-warning p-3">Left border</div>

6. Combining Borders

You can combine border utilities to apply different styles, colors, and widths to various sides of an element:

Example:

<div class="border border-top-0 border-bottom-2 border-primary p-3">
  Combined border styles
</div>

Summary of Borders in Bootstrap

• Border Widths: Use classes like border, border-0, border-1 to set border widths.
• Border Colors: Apply colors with classes like border-primary, border-danger, border-light.
• Border Styles: Change styles with classes like border-dashed, border-dotted, border-double.
• Border Radius: Adjust corner rounding with classes like rounded, rounded-circle, rounded-pill.
• Border Placement: Apply borders to specific sides with classes like border-top, border-right, border-bottom, border-left.
• Combining Borders: Combine utilities to customize borders in various ways.