How to remove CSS style?

Question

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

test.html:

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

bootstrap.css:

 span1 { width: 60px; } 

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

I'm doing it:

add test class to html:

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

In 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 the previous CSS rule ... They just add a new one (when the width is set to auto or inherit ), another rule is created: the former property is configured, the latter uses the parent element as a reference), and span does not the best element is to understand why the width is not affected (check the answer to “Question 2” to see why) .

Here is a proof using both p and span ( "built-in unused elements" such as the span " 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 re-reading the question, there is no mention of the span element. Instead, instead of nataila is class="span1" in the div element defined in bootstrap.css . Therefore, answering the question:

how to remove width: 60px in bootstrap.css ?

You can do it:

• Defining a new CSS rule that is more specific than the bootstrap.css rule (for example: .span1.test{width:auto} );
• or you can override .span1 after calling / calling bootstrap.css ( .span1{width:auto} ).

The auto property will adjust the element to the surrounding context , so in this case the width will be expanded to use all the free space #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 width, thus width=60px </div> </div> 

Please note that other rules apply because of specificity or because of priority, and if min-width: 60px defined and width less than 60 pixels, the element will remain at 60px!

Answer 3

You must have a reset width by assigning an inherit value:

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

Answer 4

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

Should work like a charm :)