Menu
In the newest version of Bootstrap (current version at the time of asking the question is [email protected]) there are 3 different files and a standard one:
Are the first 3 files an extension to bootstrap.css (#4)?
I can imagine, that the bootstrap-flex use the features of CSS Flexbox, bootstrap-grid is probably the old and already existing way, but what about bootstrap-reboot?
Which one do I have to include (especially then, if I use ng-bootstrap with Angular 2)?
968
Flexbox. The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats, to handle the layout. The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
It's important to understand that Bootstrap 4's grid system is built with Flexbox. What sets Bootstrap apart from using Flexbox alone is the process of writing code. With Bootstrap, you can create a grid using only HTML. With Flexbox, you must use HTML and CSS.
They have exactly the same function, but the . min. css version has been minified, meaning all whitespace has been removed to reduce file size and increase speed.
Of course, you can use both in a project. A lot of people is doing that. In fact for making equal height columns you can use flexbox in bootstrap. Check the code pen link below for better understanding.
Take a look at the source:
bootstrap-flex.scss
Bootstrap with Flexbox enabled
Includes all the imports from the standard Bootstrap project, but enables the flexbox variable.
bootstrap-grid.scss
Bootstrap Grid only
Includes relevant variables and mixins for the regular (non-flexbox) grid system, as well as the generated predefined classes (e.g.,
.col-4-sm).
bootstrap-reboot.scss
Bootstrap Reboot only
Includes only Normalize and our custom Reboot reset.
bootstrap.scss
The main Bootstrap library
And the answer is yes, the first 3 files are optional for Bootstrap.
The minimum required is bootstrap.css, it already includes bootstrap-reboot.
Replace with bootstrap-grid if you want the Bootstrap's grid only.
Replace with bootstrap-flex if you want to use Bootstrap with Flexbox. It is bootstrap.css with Flexbox features.
87
As @Nhan said: yes, the -reboot, -flex, and -grid files extend the primary bootstrap.css and if you use one of them, then that file is the only you need to include.
As far as the ng-bootstrap portion of your question, I'm using the same and I've only included the bootstrap.min file as I don't plan to use flexbox and I need more than the grid styles.
Hopefully that adds a bit of clarification about what is strictly necessary within the context of your question.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
