Custom Grids - Extending Bootstrap (2014)

Extending Bootstrap (2014)

Chapter 7. Custom Grids

Nowadays, all major CSS frameworks come with a built-in grid, and Bootstrap is no exception. The grid saw major improvements when Bootstrap 3 was released, and Bootstrap became mobile first, which means that the grid starts out stacked on mobile devices and is floated through media queries on devices with wider screens. In addition to being mobile first, the grid is also fluid, which means that it uses percentages instead of pixel values.

In this chapter, you will learn to identify when you need a custom grid, how to customize the Bootstrap grid to meet your needs, as well as how to disable responsiveness in Bootstrap.

Why use a custom grid?

The grid in Bootstrap consists of 12 columns by default, but it can be customized through LESS variables. Sometimes, you will need to create a custom grid to accomplish what you want instead of writing your own grid from scratch, which takes time and can be quite complicated. You can create your grid with Bootstrap or even use the grid in Bootstrap if necessary.

There are many reasons why you may need a custom grid. A few of the them are as follows:

· Custom breakpoints: It is quite common that designers decide on the responsive breakpoints in order to allow for better user experience. If that is the case, you will need to customize the breakpoints to work with the design.

· More columns: At times, you will need more than 12 columns, for example, 16 or even 24 columns to implement a design. With Bootstrap, you can have as many columns as you want.

· Bigger or smaller gutters: Sometimes, the default gutters might not work for you. In this case, you can easily adjust their size by customizing your grid.

Customizing the grid

Bootstrap uses LESS to build up its grid from the ground up, so it is fairly easy to customize it. More columns can be added to it or the size of the gutter can be changed by changing the value of a few LESS variables.

Change the number of columns in your Bootstrap project to 24 to demonstrate this by performing the following steps:

1. Open custom-variables.less and add the following line:

@grid-columns: 24;

2. Recompile your styles and reload the page; you will notice your content that uses columns now only occupies half of the page. In order to compensate for it, you need to change your column definitions in custom-theme.less as shown in the following code snippet:

3. .sidebar {

4. .make-md-column(6);

5. .....

6. }

7. .content {

8. .make-md-column(18);

}

Once you have recompiled your styles and reloaded the page, you should see that your content looks like it did before, as shown in the following screenshot:

Customizing the grid

Next, take a look at how to change the size of the grid gutters by performing the following steps:

1. Open custom-variables.less again and add the following line of code:

@grid-gutter-width: 50px;

2. Recompile your styles and reload the page to see that the space between each column is now 20 pixels larger than before, as shown in the following screenshot:

Customizing the grid

Now that you know how to do the most basic customization to the grid, it is time to look into customizing the responsive breakpoints of the grid.

Custom breakpoints

With custom breakpoints, you can control how the grid is floated on different devices. Bootstrap uses media queries to define its breakpoints, and each breakpoint can easily be customized by changing the value of its associated LESS variables.

Make some changes to the breakpoints in your Bootstrap project. Open custom-variables.less and add the following lines of code:

@screen-xs-min: 500px;

@screen-sm-min: 790px;

@screen-md-min: 1020px;

@screen-lg-min: 1240px;

If you now recompile your styles and reload the page, you will notice that all the breakpoints are invoked a bit later than before. This is especially useful when you have a design that requires certain breakpoints.

Next, we will take a look at how to disable responsiveness completely.

Disabling responsiveness

Sometimes you may not want your site to be responsive at all, either because it targets only a single device or due to some other reason. In such cases, it is important that you know how you can disable responsiveness in Bootstrap properly.

Since the grid in Bootstrap 3 is responsive by default, you need to go through a bit more trouble than before in order to disable it. Disable responsiveness for your Bootstrap project by performing the following steps:

1. Open index.html and remove the following line from within the <head> tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Next, remove the responsive elements from the navbar element:

3. <nav class="navbar navbar-default" role="navigation">

4. <div class="container">

5. <div class="navbar-header">

6. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

7. <span class="sr-only">Toggle navigation</span>

8. <span class="icon-bar"></span>

9. <span class="icon-bar"></span>

10. <span class="icon-bar"></span>

11. </button>

12. <a class="navbar-brand" href="#">Blog</a>

13. </div>

14. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

15. <ul class="nav navbar-nav">

16. <li class="active"><a href="#">Home</a></li>

17. <li><a href="#">Archive</a></li>

18. <li><a href="#">About</a></li>

19. <li><a href="#">Contact</a></li>

20. </ul>

21. </div>

22. </div>

</nav>

23. Open custom-theme.less and add the following rule:

24..container {

25. width: 970px !important;

}

Note

Usually, you may prefer to use the extra small columns, that is, the .col-xs-* classes instead of the other column types. However, the other columns work as well, so you do not have to change the column types.

26. If you now recompile your styles and reload the page, you should notice that it does not stack the columns when your browser window gets smaller. This is all there is to disabling the responsiveness in Bootstrap.

Summary

In this chapter, you learned how to customize the grid in Bootstrap by changing the number of columns, resizing the grid gutters, and customizing the breakpoints. You also learned how to properly disable responsiveness in Bootstrap.

In the next chapter, you will learn about useful jQuery plugins outside Bootstrap that you can extend your project with, such as Bootbox.js, Font Awesome, and typeahead.js.