is now part of Shuffle™. The new editor includes templates for Bootstrap, Bulma, Material-UI, and Tailwind CSS.
Switch to Shuffle →

Bootstrap class: .border

<span class="border border-dark">Hello World</span>

Preview

Hello World

Check .border in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Tips 💡

Sass source

/* _borders.scss:7 */
.border         { border: $border-width solid $border-color !important; }
.border-top     { border-top: $border-width solid $border-color !important; }
.border-right   { border-right: $border-width solid $border-color !important; }
.border-bottom  { border-bottom: $border-width solid $border-color !important; }
.border-left    { border-left: $border-width solid $border-color !important; }

.border-0        { border: 0 !important; }
.border-top-0    { border-top: 0 !important; }
.border-right-0  { border-right: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-left-0   { border-left: 0 !important; }

@each $color, $value in $theme-colors {
  .border-#{$color} {
    border-color: $value !important;
  }
}

Uses variables

Code copied to the clipboard.

Copying failed

/* _borders.scss:7 */
$border-width
$border-color
$border-width
$border-color
$border-width
$border-color
$border-width
$border-color
$border-width
$border-color
$color
$value
$theme-colors
$color}
$value

More in Bootstrap Borders