How to override or reset bootstrap styles with default browser's styles?

Question

--------------------------------------------

Updated to clarify my question

As in this fiddle https://jsfiddle.net/30x0pdzx/1/, I would like to make the second fieldset showing as the default browser renders here https://jsfiddle.net/1b0hxruq/1/

--------------------------------------------

I would like to override or reset the bootstrap styles of fieldset that have class no-bootstrap

<fieldset class="no-bootstrap">
    <legend></legend>
</fieldset>

Currently, bootstrap has styles for fieldset are

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

So what should I do to override (or reset) it to default browser styles?

fieldset.no-bootstrap {
    min-width: ???;
    padding: ???;
    margin: ???;
    border: ???;
}

Thanks for your considering :)

Are you known with CSS or ? You can fill-in anything what you want to style it like you want. Allways make sure to make a new CSS file and load it below the original bootstrap file in your head, Or I dont understand what you mean with your question. — dutchsociety, Apr 11 '17 at 09:51
Clarify the question. It seems like you already know the answer, so I'm not sure what you're asking. — Carol Skelly, Apr 11 '17 at 09:56
You could also just put those after including bootstrap css, as mentioned below !important for any of them that don't take effect is the way to go — Lewis Smith, Apr 11 '17 at 10:04
@ZimSystem I just edited my question, as I see in duplicate question, it just says about the resetting for display property. But my question is resetting all properties for the whole element that has styles in bootstrap! — Vu Nguyen, Apr 12 '17 at 03:04

mayersdesign · Answer 1 · 2017-04-11T10:55:06.653

1

Where you have those question marks, simply add whatever styles you like, and then either add !important; to them all, or else make sure that your CSS sheet is loading AFTER Bootstraps.

For example this:

fieldset.no-bootstrap {
  min-width: 200px !important;
  padding: 5px !important;
  margin: 20px !important;
  border: 1px solid red !important;
}

Will work (or at least is extremely likely to) no matter where you put it.

edited Apr 11 '17 at 10:55

answered Apr 11 '17 at 09:53

mayersdesign

5,062
4
35
47

Thanks for your answer, but I don't want to style it with specific values since I just want to use the `default` browser's styles – Vu Nguyen Apr 12 '17 at 03:02
@Vu Nguyen - Unfortunately there is no way to do that. Apart from anything each browser will be different. I can only suggest you style it some way that you consider a compromise, or else load Bootstrap manually, and remove the portions that affect fieldsets. – mayersdesign Apr 12 '17 at 05:58

score 0 · Answer 2 · answered Apr 11 '17 at 09:58

0

Your overridden style should come after the code you want to override. So put bootstrap source before your personal css.

Also it's possible to use ! Important tag to override any specific style though it's not recommended to use it often.

It should be like this :

. Class{ Color: red ! Important }

answered Apr 11 '17 at 09:58

error404

331
1
8

Thanks for your answer but it's not my question. I just updated it for clearer :D – Vu Nguyen Apr 12 '17 at 03:00

How to override or reset bootstrap styles with default browser's styles?

2 Answers2