Bootstrap 4 border utilities

Question

I feel like this should be obvious to find but I have not come up with anything. Bootstrap 4 has utility class for adding and removing a border, but is there support for def

Answer 1

Please see Bootstrap's Border Documentation.

There are basic styling classes set up (similar to the btn-default, btn-warning) sets and border radius. But any other styling would need to be done yourself.

The reason for this would be that there is either not enough demand for Bootstrap to add this natively into their framework, there are too many options to efficiently define, or how simple it is to write them in your own classes.

Answer 2

No, there are no classes in Bootstrap 4 for border width or style.

You can simply add something like:

.border-3 {
    border-width:3px !important;
}

https://codeply.com/go/ktnEeWExvh

NOTE: !important is needed in this case because Bootstrap also uses !important in many of the utility classes like border-*.

Answer 3

If you have bootstrap npm library and if you look at _variable.scss you will find $border-width: 1px !default;

You can override it by creating a new scss file where you can import bootstrap modules.

$myborder-width : 3px;

$border-width:$myborder-width;

@import "../node_modules/bootstrap/scss/bootstrap";(you can include only the required modules here)

you can convert this main.scss file to css and use this css instead of bootstrap.css in your html.

Answer 4

Suggests to add a bootstrap extension.

/* _border-width-customs.scss */
$border-width-custom-1: 1px !default;
$border-width-custom-2: 2px !default;
$border-width-custom-3: 3px !default;
$border-width-custom-4: 4px !default;
$border-width-custom-5: 5px !default;
$border-width-custom-6: 6px !default;
$border-width-custom-7: 7px !default;
$border-width-custom-8: 8px !default;

$border-width-customs: ("1": $border-width-custom-1, "2": $border-width-custom-2, "3": $border-width-custom-3, "4": $border-width-custom-4, "5": $border-width-custom-5, "6": $border-width-custom-6, "7": $border-width-custom-7, "8": $border-width-custom-8);

@each $name, $size in $border-width-customs {
    @each $var in '', 'top-', 'right-', 'bottom-', 'left-' {
        .border-#{$var}#{$name} { border-#{$var}width: $size !important; border-#{$var}style: solid; border-#{$var}color: $border-color;}
    }
}

Answer 5

In bootstrap 4 for borders you can use only :

• Borders - add remove borders
• Border color
• Border Radius
• Float
• Responsive Floats
• Center Align
• Width
• Height
• Spacing

You can create your own classes, something like :

.border-dotted{
 border-style: dotted;
}
.border-10{
border-style:solid;
 border-width: 10px;
}

<h1 class="border-dotted">Hi</h1>
<h1 class="border-10">Hi!</h1>

Answer 6

In bootstrap V5 you can do this

$utilities: (
  "border-width": (
    property: border-width,
    class: border,
    values: (
      1: 1px,
      2: 2px,
      3: 3px,
      4: 4px,
      5: 5px,
    )
  )
)