1

I would like to use bootstrap 4 for a brand-new project, but I'm confused by it.

Q: Can I just download the source and then point to:

<link rel="stylesheet" href="bootstrap-4.0.0-alpha.2/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="bootstrap-4.0.0-alpha.2/dist/js/bootstrap.js"></script>

And that's all I need to worry about? Do I need to worry about Reboot, Grid Only or Flexbox? I just want to use bootstrap. I don't want to worry a whole lot about various options and setups.

cvrebert
  • 9,075
  • 2
  • 38
  • 49
Phillip Senn
  • 46,771
  • 90
  • 257
  • 373
  • 1
    Yes, I believe you can do that. Why not just... try it, though? – ceejayoz Dec 15 '15 at 18:24
  • Because my head is swimming with so many options. I'm having to read and understand each one of them to determine how to get started. – Phillip Senn Dec 15 '15 at 18:25
  • If you just getting started and don't want to add extra complexity to your project why would you bother with all the potential troubles of Bootstrap 4 alpha? I'd settle with released 3.3.6. – Anton Dec 15 '15 at 20:42
  • My thinking is: If it's going to be a major change from bootstrap 3, then I may as well use this pet project to learn the new way of doing things (like when it went from 2 to 3). If the changes are small, then I'm not worried about there being a bunch of pitfalls. – Phillip Senn Dec 16 '15 at 19:01

1 Answers1

4

Yes, you can download the compiled CSS code and point to the files from the dist folder as described in your question. Using the compiled CSS does not differ from Bootstrap 3.

Only in the case you start compiling your own modified or extended version you will need a Sass compiler and have to run the autoprefixer. Bootstrap 3 uses Less and Bootstrap 4 use Sass as precompiler for your CSS code. Notice that the autoprefixer is required since Bootstrap v3.2. See also: http://bassjobsen.weblogs.fm/prepared-bootstrap-v4/

The easiest way to compile Bootstrap is using the build system shipped with Bootstrap.

  1. Download and unzip the sourcecode
  2. Navigate to the bootstrap folder
  3. Run: npm install
  4. Run: grunt

When you compile your own version as described above Bootstrap comes with some extras.

Firstly you can compile your code to support flexboxes, notice that some older browsers do not support flexboxes, especially IE 8 and IE 9 do not support them, see also: http://caniuse.com/#feat=flexbox Enabling flexbox support for your layouts is as simple as setting a single Sass variable ($enable-flex: true;) to true. the scss/bootstrap-flex.scss shows you how to do this. You can also set this variable in your scss/bootstrap.scss file and keep the build system intact.

Secondly Bootstrap 4 enables you to only compile the grid (classes). An example can be found in the scss/bootstrap-grid.scss files. You can import this file into any other Sass project to use the Bootstrap Grid system. Notice that the grid requires box-sizing: border-box see the Why did Bootstrap 3 switch to box-sizing: border-box?, not set by the grid code.

Thirdly Bootstrap 4 ships with Reboot (which also sets the box-sizing: border-box as previously described). Reboot is a global reset and an extension of Normalize.css (https://github.com/necolas/normalize.css) you can use Reboot for other projects. To compile Reboot only you can compile the scss/bootstrap-reboot.scss file.

Finally notice that when you compile only the bootstrap.scss without running the autoprefixer your code does not contain any vendor prefix and do not work for all browsers supported by Bootstrap. Running autoprefixer for the same list of supported browsers as the default build system grantues your compiled CSS support the same browsers as the original code does. (And so matches the official compiled versions)

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • Well, since I'm just getting started, I don't have a modified or extended version. I DID find though, that I had to include /docs/assets/js/vendor/tether.min.js and a shortcut icon. – Phillip Senn Dec 19 '15 at 15:44
  • well Tether is not part of Bootstrap. And indeed Bootstrap v4 drops the glyphicon font, see also: http://stackoverflow.com/questions/32612690/bootstrap-4-glyphicons-migration/33768443 – Bass Jobsen Dec 19 '15 at 17:31