How can I remove a CSS style?

Question

I want remove some style in bootstrap, this is a example:

test.html:

<div class='span1'></div>

bootstrap.css:

span1 {
  width: 60px; 
}

and I want to remove the width style, and add min-width: 60px style

I do this:

add test class in html:

<div class='span1 test'></div>

In the css:

.test{
  min-width: 60px;
}

But how can I remove width: 60px in bootstrap.css?

Answer 1

You can reset the width using auto:

.test{
  width: auto;
  min-width: 60px;
}

Working example:

span {
  width: 100px;
  background-color: red;
}

span.test {
  width: auto;
  min-width: 60px;
}

<span class="test">
  span!
</span>

Answer 2

None of the previous answers really resets a previous CSS rule... They just add a new one (when the width is set to auto or inherit, a different rule is created: the former property adjusts, the latter uses the parent's element as reference), and span is not the best element to understand why the width is not affected (check the answer to "Question 2" to understand why).

Here is the proof using both p and span("inline non-replaced elements" like span "the width property does not apply"):

p, span {
  width: 100px;
  background-color: red;
  color:white;
}
p.test-empty {
  width: '';
  min-width: 60px;
}
p.test-auto {
  width: auto;
  min-width: 60px;
}
p.test-inherit {
  width: inherit;
  min-width: 60px;
}

<p>
  p without classes EXAMPLE
</p>
<p class="test-auto">p -> width: auto EXAMPLE</p>
<p class="test-inherit">p -> width: inherit EXAMPLE</p>
<span>span without classes EXAMPLE</span>
<br>
<span class="test-auto">span -> width: auto EXAMPLE</span>
<br><span class="test-inherit">span -> width: inherit EXAMPLE</span>

However, after rereading the question, there is no mention of a span element. What nataila refers instead is a class="span1" in a div element defined in bootstrap.css. Therefore, answering the question:

how can I remove width: 60px in bootstrap.css?

You can do this by:

• defining a new CSS rule that is more specific than the bootstrap.css rule (e.g.: .span1.test{width:auto});
• or you can redefine .span1 after calling/invoking bootstrap.css (.span1{width:auto}).

The auto property will adjust the element to the surrounding context, thus in this case the width will be extended in order to use the entire space available of the #container:

div:not(#container) {background-color: red;color: white;margin-bottom: 5px;font-size:11px}
#container {width: 500px}
.test-350 {width: 90px;min-width: 60px}
.span1.test-150-specific {width: 100px;min-width: 60px}
/* from bootstrap.css */
.span1 {width: 60px}
.test-210 {width: 110px;min-width: 60px}
.test-0 {width: 0;min-width: 60px}
.test-auto {width: auto;min-width: 60px}
.test-inherit {width: inherit;min-width: 60px}

<div id="container">
  <div class="span1">
    Bootstrap.css default span1
  </div>
  <div class="span1 test-auto">
    width: auto EXAMPLE
  </div>
  <div class="span1 test-inherit">
    width: inherit EXAMPLE
  </div>
  <div class="span1 test-0">
    .test-0 is defined with width:0 but, due to min-width, it actually has width=60px
  </div>
  <div class="span1 test-150-specific">
    .test-150-specific is defined together with .span1, thus width=150px
  </div>
  <div class="span1 test-210">
    .test-210 is defined after .span1, thus width=210px
  </div>
  <div class="span1 test-350">
    .test-350 is defined before .span1, which means it will get span1's width, thus width=60px
  </div>
</div>

Notice the other rules are applied due to specificity or due to precedence, and if min-width: 60px is defined and width is under 60px, the element will remain with 60px!