52

I am trying to migrate my application from bootstrap 3.3.7 to Bootstrap v4.0.0-alpha.6.

When I downloaded the Bootstrap v4.0.0-alpha.6 into my project using NuGet, I saw bootstrap-reboot.css and bootstrap-grid.css in addition to bootstrap.css.

enter image description here

I tried to go through the document and understand their purpose but, I am not getting a clear picture.

What is the use of those two css files? Do I really need to include them in my project?

JGV
  • 5,037
  • 9
  • 50
  • 94

1 Answers1

69

bootstrap.css should contain all the CSS you need to use Bootstrap in your project.

The files bootstrap-reboot.css and bootstrap-grid.css are cut down versions containing just the necessary styles for reboot and Bootstrap's flexbox grid respectively. They are to be used if you don't want to include the entirety of Bootstrap in your project and will only be making use of either of these features.

The docs explain it here: https://getbootstrap.com/docs/4.1/getting-started/contents/#css-files

Liam Hammett
  • 1,631
  • 14
  • 18
  • 2
    Where are the instructions on how to turn reboot off? It seems to squash many global css declarations unless you contextualize them 3-4 contexts deep. I can't get the damn 'a' tag hover underline to go away because this thing is overriding anything I try to add unless I add CSS for every single A tag context I want to create. That is insane! – Scott Feb 21 '19 at 16:38
  • 1
    @Scott You cannot turn Reboot off - it is required for Bootstrap to work properly at all. You should not have problems with it overriding your own styles though so long as Reboot is loaded before your custom styles. You can try looking at [the styles it applies](https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css) and [learning more about how CSS cascading works](https://www.smashingmagazine.com/2016/11/css-inheritance-cascade-global-scope-new-old-worst-best-friends/) to find a solution for your problems. – Liam Hammett Mar 01 '19 at 14:37
  • 1
    well that's stupid when it causes so many problems. Google around. I'm not the only one complaining about it breaking stuff. – Scott Mar 05 '19 at 20:19
  • 1
    It's not that stupid, any big CSS framework has global resets to do things that affect all of its elements, such as changing `box-sizing` to `border-box` — if it couldn't do things like that the framework would look and behave completely differently, or the compiled CSS file would have to be much larger to apply these styles in each class. It's not a problem, it's just how CSS cascading works — if you're having a problem with that feel free to raise a new question showing your exact issue and I can attempt to help you out. – Liam Hammett Mar 06 '19 at 08:51
  • 1
    OK, but then how do you set global settings for your website if you're using bootstrap 4? Sounds to me like you don't! If say you want to always use a given font by default. Sorry! You have to declare it every single time? Seriously?!?! – Scott Mar 06 '19 at 16:57
  • 1
    As per the CSS cascade's [source order](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Source_order), you need to make sure you're declaring your preferred styles _after_ Bootstrap's, if no other specificity rules come into it. – Liam Hammett Apr 29 '19 at 10:34
  • Umm, ok, but how does that change what I said? You still have to override every single style one at a time. – Scott May 06 '19 at 16:36
  • 1
    You don't. If your styles are given priority in the cascade, they will take precedence over Bootstrap's. – Liam Hammett May 07 '19 at 09:38
  • ok, then. How do you give priority to global styles in the cascade? – Scott May 07 '19 at 17:06
  • (because I added a body style after bootstrap was loaded and it didn't override anything) – Scott May 07 '19 at 17:06
  • 2
    Do you have an example of this failing? Here is an example of what you have described and, and the custom styles overwrite Bootstrap's as intended. https://codepen.io/anon/pen/wbKzXW – Liam Hammett May 08 '19 at 11:03