Setting up the Bootstrap Flexbox layout grid

Whether your are using Flexbox or not, the grid is based on Bootstrap's regular row and column classes. If you are familiar with the Bootstrap grid, this will work exactly as you expect it to. Before you start any Bootstrap project, you need to decide if you want to use a Flexbox or regular grid. Unfortunately, you can't use both at the same time in a Bootstrap project. Since the focus of this chapter is on Flexbox, we'll be using the appropriate grid configuration. By default Bootstrap is set up to use the regular grid. Therefore, we are going to need to edit the source files to activate the Flexbox grid. Let's start by downloading the source files again from http://v4-alpha.getbootstrap.com/ .

Once you've downloaded the ZIP file, expand it and rename it so you don't get confused. Call it something like Flexbox Bootstrap. Next we'll need to edit a file and recompile the source files to apply the changes.

Updating the Sass variable

To use the Flexbox grid, we need to edit a Sass variable in the _variables.scss file. The way Sass variables work is that you set a single value in the _variables.scss file. When you run the built-in compiler, that value is written into every component of the Bootstrap framework where it is needed. You can then grab the compiled bootstrap.min.css file and it will have all the required code you need to use the Flexbox grid:

In your new source file directory, using the Terminal, navigate to:
```
      $ scss/_variables.scss
```
Open the file in a text editor such as Sublime Text 2 or Notepad and find the following line of code:
```
      $enable-flex: false !default;
```
Change the false value to true. The line of code should now read:
```
      $enable-flex: true !default;
```
Save the file and close it. Before this change is applied, we need to recompile the source files. Since we downloaded a new version of the source files, we'll need to reinstall the project dependencies. Navigate to the root of the new Flexbox source files in the Terminal and run the following command:
```
      $ npm install
```
This will likely take a couple minutes and you can follow the progress in the Terminal. Once it's done we need to compile the project. To do this we use Grunt. To run the compiler, simply enter the following command into the Terminal:
```
      $ grunt
```

Again this will take a minute or two and you can follow the progress in the Terminal. Once it completes, the source files will have been compiled into the /dist directory. If it isn't clear, the production files that you want to use in your actual project will be compiled into the /dist directory.

Before we move onto our project, it would be a good idea to confirm that everything worked. Go back to your text editor and open the dist/css/bootstrap.css file from the root of your source files.

This is the un-minified version of the compiled Bootstrap CSS framework file. Once it's open do a quick find (cmd + f on Mac or Ctrl + f on Windows) and search for flex. If everything worked, it should quickly find an instance of flex in the file. This confirms that your compile worked.

Previous Chapter

Wrapping your Flexbox

Next Chapter

Setting up a Flexbox project

Table of Contents for Bootstrap 4 – Responsive Web Design

Setting up the Bootstrap Flexbox layout grid

Updating the Sass variable

Table of Contents for
Bootstrap 4 – Responsive Web Design