CODEWITHSUNDEEP
sassbootstrap-4
ASertacAkkaya
ASertacAkkaya

Reputation: 661

How to change Bootstrap 4's border-bottom-width via SASS?

I'm just getting into both Laravel and SASS and I took the opportunity to rewrite my old html template into something re-usable and SASS the CSS rules.

In my HTML template, I had the borders such as follows:

input[type="text"]{
  border-style:solid;
  border-color:red;
  border-width:1px 1px 4px 1px;
}
<input type="text" />

So I would have a border-bottom of 4px and rest would be 1px, in the same style and same color. I wanted to override Bootstrap 4's $border-width property so I went ahead and changed it to 1px 1px 4px 1px, and boom. It didn't work.

After inspecting the SASS files, I've noticed that they're not used the way I thought they'd be, but instead they look something like: border: $border-width solid $border-color

So that got me thinking, there are probably several ways to resolve this, one way I went ahead and done so far is:

$border-widths:1px 1px 4px 1px;
input[type="text"].form-control{
  border-width:$border-widths!important;
}

So I'm leaving the default $border-width variable as is, and instead creating my own variable and then selecting the input and overriding the border-width property only. Which looks, not right because:

  1. This is my _variables.scss override file and I kind of want it to stay that way.
  2. I could do this with just CSS override the same way, but then it'd defeat the whole purpose.
  3. I have to explicitly use !important otherwise I can't override Bootstrap 4's rules.

So, there must be another way, I guess. But what exactly?

Upvotes: 1

Views: 2840

Answers (1)

ASertacAkkaya
ASertacAkkaya

Reputation: 661

I ended up simply keeping the !important for overriding and just made myself another scss file, and written the rules there:

_variables.scss

$border-widths:             1px 1px 4px 1px;

_custom.scss

.border-thick-bottom{ border-width:$border-widths!important; border-style:solid; }

Upvotes: 1

Related Questions