Geek Answers Handbook

Differences between bootstrap-flex, bootstrap-grid and bootstrap-reboot

In the latest version of Bootstrap (the current version when asking a question bootstrap@4.0.0-alpha.5 ) there are 3 different files and a standard one:

  • bootstrap-flex.css
  • bootstrap-grid.css
  • bootstrap-reboot.css
  • bootstrap.css

Are the first 3 files an extension to bootstrap.css (# 4)?

I can imagine that bootstrap-flex uses CSS Flexbox functions, bootstrap-grid is probably old and already existing, but what about bootstrap-reboot ?

Which should I include (especially if I use ng-bootstrap with Angular 2)?

+7
css angular twitter-bootstrap-4 bootstrap-4 ng-bootstrap
source share
2 answers

Check out the source :

bootstrap-flex.scss

Flexbox loading tray enabled

Includes all imports from the standard Bootstrap project, but includes the Flexbox variable.

bootstrap-grid.scss

Bootstrap grid only

Includes appropriate variables and mixins for a regular (non-flexbox) grid, as well as generated predefined classes (e.g. .col-4-sm ).

bootstrap-reboot.scss

Bootprap reboot only

Includes only Normalize and our user reset reset.

bootstrap.scss

Bootstrap core library

And the answer is yes, the first 3 files are optional for Bootstrap.

The required minimum bootstrap.css , it already includes bootstrap-reboot .

Replace bootstrap-grid if you want only Bootstrap grid.

Replace bootstrap-flex if you want to use Bootstrap with Flexbox. This is bootstrap.css with Flexbox features.

+3
source share

As @Nhan said: yes, the -reboot, -flex and -grid files expand the main bootstrap.css file, and if you use one of them, then this file will be the only thing you need to include.

As for the ng-bootstrap part of your question, I use the same thing, and I only included the bootstrap.min file, since I don't plan on using flexbox, and I need more than grid styles.

Hope this adds some clarification on what is strictly necessary in the context of your question.

0
source share

More articles:


All Articles