1

I am having trouble using Bootstrap 4.0.0 utility classes regarding borders.

To be precise, I am encountering some (in my opinion) weird behaviour when applying class="border-primary border-bottom" on an element. When I check out DevTools in Chrome, I see the following output:

.border-primary { // This overrides color assigned from .border-bottom
    border-color: #007bff!important;
}

.border-bottom {
    border-bottom: 1px solid #dee2e6!important;
}

The .border-primary acts as if its color declaration overrides .border-bottom color declaration... Why does this happen when the class .border-primary is set before the class .border-bottom? Shouldn't the latter one override the previous one? They both have the !important tag and the same specificity (as far as my knowledge goes). The only thing that smells funny is the way we set the border color for .border-primary, it seems a little bit more explicit than for .border-bottom class.

Similar problem with borders happens when applying class="border-0 border-bottom" on an element.

When consulting DevTools , it looks like this:

.border-0 {
    border: 0!important;
}

.border-bottom {
    border-bottom: 1px solid #dee2e6!important; // This is clearly overridden by border-0
}

Basically, instead of denying all borders with .border-0 and then applying border on the bottom by .border-bottom, .border-0 seems to override all and remove all borders despite the fact .border-bottom is applied after .border-0 . This kind of opposes the way I thought CSS works.

If I apply class="border-0 border-primary border-bottom" .border-0 overrides .border-bottom, and .border-primary sets the color to primary,which means nothing,since there are no borders because of .border-0. Why does all this happen ? Is it a CSS thing, a Bootstrap 4.0.0 thing, or something else ? Please help

I am attaching a JSFiddle example below.

Live demo

Luka Grdinic
  • 21
  • 4
  • did you check well the CSS ? because `.border-primary` is later than `.border-bottom` .. and `border-0` is latter than `.border-bottom` – Temani Afif Jun 16 '18 at 13:39

1 Answers1

0

This is basically answered in Why is there an important override on the border classes's color property in Bootstrap?

As you can see in the docs, the borders are additive and subtractive. The border--*-0 classes are meant to remove borders, either all or specific sides, from an element that already has borders such as the card.

The other border-* classes are meant to add borders.

Therefore, in the case of border-0 border-bottom, yes border-0 removes borders from all sides as intended. In your example, it doesn't make sense to use border-0 because the box doesn't have borders to start with.

If you wanted to only show a border-bottom border-primary on an element that already has borders (ie: card), you'd use: border-primary border-left-0 border-right-0 border-top-0... border-primary to changes the existing border color, and border-left-0 border-right-0 border-top-0 to remove the existing border.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • That's because one follows the other in the CSS. – Carol Skelly Jun 17 '18 at 12:16
  • What bugs me is the fact that when I apply .border-primary before .border-bottom, .border-bottom color gets overridden, even though both classes have the important tag and same specificity. If I create a custom .my-border-primary class with border-color: blue !important, and set it in the element like this: element class="my-border-primary border-bottom", then .border-bottom would override the color of .my-border-primary Why does that happen with my custom class , but bootstrap's class seems to override things. Similar thing applies to border-bottom confusion – Luka Grdinic Jun 17 '18 at 12:18
  • One follows the other, first one is border-primary, second is border-bottom, - Shouldn't border-bottom be the one that overrides ? – Luka Grdinic Jun 17 '18 at 12:21
  • I just realized what you meant by one follows the other in the CSS - order of Bootstrap's CSS is like that: border-bottom CSS code is before border-primary CSS code – Luka Grdinic Jun 17 '18 at 12:46