Which bootstrap 4 files should be included in a project?

Question

I downloaded the files from Bootstrap 4 and came the following files:

CSS folder:

 - bootstrap.css
 - bootstrap.css.map  
 - bootstrap.min 
 - bootstrap.min.css.map   
 - bootstrap-grid 
 - bootstrap-grid.css.map 
 - bootstrap-reboot
 - bootstrap-reboot.css.map 
 - bootstrap-reboot.min
 - bootstrap-reboot.min.css.map

JS folder:

 - bootstrap.bundle
 - bootstrap.bundle.js.map
 - bootstrap.bundle.min
 - bootstrap.bundle.min.js.map
 - bootstrap.js
 - bootstrap.js.map
 - bootstrap.min
 - bootstrap.min.js.map

I would like to know which ones I should include and why in version 3 of Bootstrap those files weren’t coming bootstrap-grid, bootstrap-reboot and bootstrap-bundle.

In the Bootstrap 3 I used to insert the files js/bootstrap.min.js and the css/bootstrap.min.css besides the JQuery 3.2.1.

Answer 1

Is very broad, depends on the project, depends on the need, can’t say for sure.

It may be that if the project is simple only bootstrap.min.css it will be necessary, if it is a project that will use popups (bootstrap Apis) then it would be necessary bootstrap.min.css and jQuery and bootstrap.min.js, I can’t say, for example in most projects I use only the bootstrap.min.css, but have projects that use . js and . css

If it’s a project you need to debug, then add the .map together with non-minified sources (.min.js and .min.css) can help a lot to understand some behavior, usually I would use only in development or homologation environment.

About the map: https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps

I have projects that I don’t even need jQuery, usually it is so little the use that I just take advantage of the same Grids system.

What are bootstrap-grid, bootstrap-reboot and bootstrap-Bundle

Probably you downloaded the "source" for development, this 3 together are the "bootstrap", if you do not intend to participate as a Bootstrap collaborator or create a Fork of it it will be interesting (download the source with the separate files), similar to this project https://www.npmjs.com/package/bootstrap-grid, which is a "Fork"

But for most projects that get isolated is not even necessary, because we end up needing one or another time of a specific functionality, unless you only need one or another Bootstrap feature, so picking up only pieces of it can be useful, in most projects using CDN will be more than enough.

If you only need CSS add:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

If you need Apis add:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

---

Customizing Bootstrap

Note that up to 3.3 it was possible to customize the bootstrap to download only the desired components http://getbootstrap.com/docs/3.3/customize/, however it seems that this is not yet available in 4.0, but of course it is possible to "compile" manually by downloading the sources, just as you did