bootstrap
  1. bootstrap-borders
PreviousNext

Bootstrap Borders

  • Bootstrap provides classes for adding borders to elements.
  • Borders can be added to buttons, images, divs, tables, and more.
  • In this page, we will discuss how to add borders to elements using Bootstrap.

Syntax

To add a border to an element, you can use the following syntax:

border-{side}-{size}
  • {side} is the side of the border you want to add (e.g. top, right, bottom, left, or x (both left and right) or y (both top and bottom)).
  • {size} is the size of the border you want to add (e.g. 1px, 2px, 3px, or 4px).

Example

Use border utilities to add or remove an element’s borders. 

<span class="border p-5"></span>
<span class="border-top p-5"></span>
<span class="border-end p-5"></span>
<span class="border-bottom p-5"></span>
<span class="border-start p-5"></span>
Try Playground

Subtractive 

<span class="border border-0 p-5"></span>
<span class="border border-top-0 p-5"></span>
<span class="border border-end-0 p-5"></span>
<span class="border border-bottom-0 p-5"></span>
<span class="border border-start-0 p-5"></span>
Try Playground

Color

Change the border color using utilities built on our theme colors.

<span class="border border-primary p-5"></span>
<span class="border border-primary-subtle p-5"></span>
<span class="border border-secondary p-5"></span>
<span class="border border-secondary-subtle p-5"></span>
<span class="border border-success p-5"></span>
<span class="border border-success-subtle p-5"></span>
<span class="border border-danger p-5"></span>
<span class="border border-danger-subtle p-5"></span>
<span class="border border-warning p-5"></span>
<span class="border border-warning-subtle p-5"></span>
<span class="border border-info p-5"></span>
<span class="border border-info-subtle p-5"></span>
<span class="border border-light p-5"></span>
<span class="border border-light-subtle p-5"></span>
<span class="border border-dark p-5"></span>
<span class="border border-dark-subtle p-5"></span>
<span class="border border-black p-5"></span>
<span class="border border-white p-5"></span>
Try Playground

Opacity 

<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>
Try Playground

Radius

Add classes to an element to easily round its corners.

<div  class="rounded p-4 m-1 border col" ></div>
<div  class="rounded-top p-4 m-1 border col" ></div>
<div  class="rounded-end p-4 m-1 border col" ></div>
<div  class="rounded-bottom p-4 m-1 border col" ></div>
<div  class="rounded-start p-4 m-1 border col" ></div>
<div  class="rounded-circle p-4 m-1 border col" ></div>
<div  class="rounded-pill p-4 m-1 border col" ></div>
Try Playground

Use

Borders can be added to various elements on your page, such as buttons, images, divs, and more. You can use the various border classes to create different styles of borders, such as dashed or dotted borders.

Important Points

  • Bootstrap provides classes for adding borders to elements.
  • Borders can be added to buttons, images, divs, tables, and more.
  • Borders can be customized with different colors and sizes.
  • You can use Bootstrap utilities to achieve complex border styles.

Summary

Borders are a useful element for adding style and emphasis to your content. With Bootstrap, adding borders to your elements can be fast and easy, leaving you with more time to focus on the design and presentation of your website.

ColorsBackground Colors
Published on: