CODEWITHSUNDEEP
htmlcsstwitter-bootstrapdomoverriding
Eric Bishard
Eric Bishard

Reputation: 5341

How do you completely remove a style from bootstrap by overriding it

So I'm completely familiar with overriding a style in bootstrap by using my own Style.css. But let's say that bootstrap has a style that is put on a table or something that is a standard html element. Let's use labels, because it's a rather short example. Let's first assume that there is no other label style or label element styling anywhere else except for the following css code:

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}

Now if I want to override this style in my Style.css file and change the margin and weight, I could do this:

label {
  margin-bottom: 3px;
  font-weight: normal;
}

Easy enough, this would change those two items and allow the other styles to cascade through. But what if I wanted to completely remove any styling added by bootstrap for the element label. Is there a short and easy way to do this without having to do something like:

label {
  display: inline;
  max-width: None;
  color: none;
  margin-bottom: 0;
  font-weight: normal;
}

Or basically going through line by line and changing each styles property to something like none or normal or whatever? All while keeping the original Bootstrap file in an untouched state and not commenting anything out of it.

BTW I would also be fine with using JavaScript if it's concise and easy?

Upvotes: 0

Views: 8291

Answers (2)

I'm Joe Too
I'm Joe Too

Reputation: 5870

It depends on what browsers you want to support. You could use

label {
  all: initial; // or all: unset
}

but be aware that it's not really widely supported yet. It works on IE 11, Firefox, Opera & Chrome, but not Safari or most mobile browsers. Still, a good one to know if and when it becomes more widely supported :)

Upvotes: 3

David Nguyen
David Nguyen

Reputation: 8508

No if it is already include the only way to override it is to give it properties like none, alternatively the best way to handle it is to use their SASS/LESS implementations and not include the component at all.

Upvotes: 2

Related Questions