Bootstrap - Borders

Ethan D. -

Border Classes

Bootstrap provides classes to add borders to elements. The .border class adds a border to all sides of an element.

Example: Adding a border to all sides

<div class="border">
  This div has a border on all sides.
</div>

To remove the border from an element, use the .border-0 class:

Example: Removing a border

<div class="border-0">
  This div has no border.
</div>

You can also add borders to specific sides of an element using these classes:

Class Description
.border-top Adds a border to the top side of an element.
.border-right Adds a border to the right side of an element.
.border-bottom Adds a border to the bottom side of an element.
.border-left Adds a border to the left side of an element.

Example: Adding borders to specific sides

<div class="border-top border-bottom">
  This div has a border on the top and bottom sides.
</div>

You can combine these classes to add borders to multiple sides of an element. For instance, using both .border-left and .border-right will add borders to the left and right sides of an element.

Tip: Controlling borders with Bootstrap classes

These border classes let you add and control borders on elements in your Bootstrap projects. They give you the flexibility to apply borders to specific sides or remove borders based on your design needs.

Border Color Classes

Bootstrap provides classes to set the color of borders. These classes let you match the border color with your design's color scheme.

Class Description
.border-primary Sets the border color to the primary color defined in your Bootstrap theme.
.border-secondary Sets the border color to the secondary color defined in your Bootstrap theme.
.border-success Sets the border color to the success color, which is usually green.
.border-danger Sets the border color to the danger color, which is usually red.
.border-warning Sets the border color to the warning color, which is usually yellow or orange.
.border-info Sets the border color to the info color, which is usually a shade of blue.
.border-light Sets the border color to a light gray.
.border-dark Sets the border color to a dark gray.
.border-white Sets the border color to white.

To use these border color classes, add them with the .border class or any of the specific border side classes (.border-top, .border-right, .border-bottom, .border-left).

Example

<div class="border border-primary">
  This div has a primary colored border.
</div>

<div class="border border-success">
  This div has a success colored border.
</div>

<div class="border-top border-warning">
  This div has a warning colored border on the top side.
</div>

These border color classes make it easy to apply consistent and meaningful colors to your element borders, improving the visual appearance and showing status or importance based on the chosen color.

Border Radius Classes

Bootstrap has classes to control the border radius of elements, letting you create rounded corners.

Example

<div class="rounded bg-primary text-white p-3">
  This div has rounded corners on all sides.
</div>

<div class="rounded-top bg-success text-white p-3">
  This div has rounded corners on the top side.
</div>

<img src="example.jpg" alt="Example image" class="rounded-circle">

The .rounded-circle class is useful for making profile pictures or icons circular. The .rounded-pill class can be used to create pill-shaped buttons or badges.

You can control the amount of rounding by combining the .rounded classes with extra classes like .rounded-sm, .rounded-lg, or .rounded-xl to get smaller or larger rounded corners.

Example

<div class="rounded-sm bg-info text-white p-3">
  This div has small rounded corners.
</div>

<div class="rounded-lg bg-warning text-white p-3">
  This div has large rounded corners.
</div>

Using Bootstrap's border radius classes, you can easily add rounded corners to elements, making them more visually appealing and polished. Try different combinations to get the look you want for your design.

Class Description
.rounded Adds rounded corners to all sides of an element.
.rounded-top Adds rounded corners to the top side of an element.
.rounded-right Adds rounded corners to the right side of an element.
.rounded-bottom Adds rounded corners to the bottom side of an element.
.rounded-left Adds rounded corners to the left side of an element.
.rounded-circle Shapes the element into a circle. Typically used with square elements like images.
.rounded-pill Shapes the element into a pill shape, with highly rounded ends.
.rounded-0 Removes rounded corners from an element, resulting in square corners.

Border Width Classes

Bootstrap provides classes to control the width of borders on elements. These classes let you set the border width from 1px up to 5px.

Class Description
.border-1 Sets the border width to 1px.
.border-2 Sets the border width to 2px.
.border-3 Sets the border width to 3px.
.border-4 Sets the border width to 4px.
.border-5 Sets the border width to 5px.

To use these border width classes, add them with the .border class or any of the border side classes (.border-top, .border-right, .border-bottom, .border-left).

Border Width Examples

<div class="border border-1">
  This div has a 1px border.
</div>

<div class="border border-3">
  This div has a 3px border.
</div>

<div class="border-left border-5">
  This div has a 5px border on the left side.
</div>

These border width classes are useful when you need to make borders thinner or thicker than the default 1px width. Thicker borders can help draw attention to elements or create visual separation between sections of your page.

Tip: Combining Border Classes

Remember, you can combine border width classes with border color and border radius classes to create custom border styles for your elements. For example, .border border-danger border-3 rounded would give you a 3px wide, red, rounded border.

Try out different border widths in your Bootstrap projects to see which looks best for your design. The border width classes provide an easy way to control the visual weight and impact of borders on your page elements.