http://blog.codeply.com/Ghost 0.5Tue, 26 Sep 2017 21:45:07 GMT60In Bootstrap 3, adding a new grid tier (breakpoint) was not a simple process. It required various LESS or CSS customizations. Thanks to Bootstrap 4 SASS, and the new $grid-breakpoints variable it's very easy to add a new grid tier. Consider for example you want to add a new "extra extra small" breakpoint named xxs to support device widths less that 375 pixels. You can accomplish this with SASS...

First, add the new breakpoint by starting it at zero (0) pixels, and change the existing xs breakpoint to 375.

Over the last few years I've answered a lot (over 800!) of Bootstrap questions on Stack Overflow. Frequently these questions relate to the Bootstrap grid __ that powerful blend of containers, rows and columns that make responsive layouts possible and flexible with Bootstrap.

More often than not, questions about the Bootstrap grid can be answered by understanding a few basics about what exactly the grid is, and how it works. I will clarify the Bootstrap grid here so that you're no longer left wondering about things like...

How do the different grid sizes (or breakpoints) work?

Why does Bootstrap have a 12 unit (columns) grid?

Can I have more that 12 columns in a single row?

Why does the row have a negative margin?

Grid Basics

It doesn't take much time before Bootstrap newbies feel at home with the grid. Here's the HTML markup we'd use in Bootstrap to make a simple 2-column Web page layout.

Containers

The root (top-level) element of the Bootstrap grid is the container. At first the container may seem trivial or unneccessary, but it's very important in controlling layout width. Bootstrap provides 2 types (classes) of containers:

Bootstrap containers (container or container-fluid) work in close partnership with the row and col-* (columns) to create "the grid".

Rows & Columns

Inside the container, the row class is used to contain the grid columns. Rows should always be placed inside of a container to ensure proper spacing (between page content and the edge of the browser). If you don't put a row inside a container, the row will be wider than the width of the viewport, causing a horizontal scrollbar.

The Bootstrap row uses negative margins (-15px) to counteract the padding (15px) of the container. The end result is no visual spacing (margin or padding) on the sides of the row within the container. There are several reasons why the "negative margin" approach is used in Bootstrap.

Why does Bootstrap use negative margins?

The "negative margin" approach isn't just a gimmick, it works better. Some grid systems instead adjust the padding (or margin) on the first/last columns using CSS child selector logic. But, as you can see here this doesn't work well since the first & last columns rendered visually, can be different than the actual first & last columns in the HTML markup of any given row. There are also other reasons Bootstrap uses the negative margins including simpler CSS, nesting and column wrapping which is discussed later in this article.

The relationship between container and row is made complete with columns (col-*). Each row is divided horizontally using Bootstrap's column classes col-*. Only columns should be the immediate children of rows.Horizontal layoutacross the page is relevant because screen width is an important consideration for responsive design.

The visual space between each column (known as the gutter) is created with padding (15px) on the left & right side of each column. As a result, the effective gutter between the content of each column is 30px (15px on the left + 15px on the right). The first (left-most) and last (right-most) columns line up perfectly to the edge of the row thanks to that negative margin discussed earlier.

Often users ask "Why does Bootstrap have 12 columns?". The reason Bootstrap has a 12-unit grid (instead of 10, 16, etc..) is that 12 evenly divides into 6 (halves), 4 (quarters) and 3 (thirds). This makes adapting to a variety of layouts much easier. Bootstrap's grid columns are identified by different col-(breakpoint)-(units) CSS classes. So for example, col-md-3 would be a column that takes up 3 of the 12 units (or 25%) across in a row.

To enable or "set" a column width in your layout, simply use the appropriate col-*-* class in your HTML markup. The columns consume a percentage width of their container:

As you see, the appropriate col-* class is used to create various layouts.

Grid sizes (A.K.A - Breakpoints)

In addition to the concept of column width, Bootstrap has different "breakpoints" or grid sizes. The Bootstrap 3 grid comes in four (4) sizes to accomodate different screen (or viewport) widths. Each grid "size" encompasses a range that is designed to best-fit typical device screen widths such as that of desktops, laptops, tablets and smartphones. Bootstrap uses CSS media queries to create responsive breakpoints that establish a boundary for each grid size. These grid sizes enable you to change the layout of columns to best match different screen widths and devices__ the essence of responsive design.

xs - for the smallest screen widths like smartphones < 768 px

sm - for small screen widths like smartphones and tablets >= 768 px

md - for medium screen widths like tablets and laptops >= 992 px

lg - for large screen widths like desktops >= 1200 px

The upcoming Bootstrap 4 grid will add a new xl breakpoint to accomodate the widest high-res Desktop screens. The various breakpoints are combined with the column units to create different column layouts on different devices. For example, col-md-3 would be 25% width on medium size screens, and then you could add col-xs-6 to make the same column 50% width on the smallest screens. To enable or "use" a grid size, you simply specify it using the appropriate col-*-* class in your HTML markup. For example,

3-units wide on medium screens.. <div class="col-md-3">..</div>

6-units wide on small screens.. <div class="col-sm-6">..</div>

Combine the classes to use change column widths on different grid sizes.. <div class="col-md-3 col-sm-6">..</div>

Key points to remember about breakpoints and grid sizes:

Columns will stack vertically (and become full-width) on xs screens unless you use a specific col-xs-* class in your HTML markup. Use xs to prevent vertical stacking.

The smaller grid classes also apply to larger screens unless overriden specifically for larger screens. So, <div class="col-md-6"></div> is effectively the same as <div class="col-md-6 col-lg-6"></div>. Therefore, ou only need to use the class for the smallest device width you want to support.

Here are several more examples that demonstrate various Bootstrap grid layouts using different breakpoints.

Advanced Bootstrap Layouts

As you create different responsive layouts you find that some scenarios require more complex combinations of rows & columns to make "things fit" on multiple devices.

Column Wrapping

In some responsive scenarios you'll see that it's necessary to have columns exceeding 12 units in a single .row element. Consider for example a layout where we want 3 columns on larger devices, and 2 columns on smaller devices:

Offsets

The offset feature of the grid enables you to move columns to the right, or create more whitespace to the left. This comes in handy when you want a narrower centered layout. Here's an example of 2 - 33% width columns (col-*-4) that are centered by moving the first columns over 2 units (col-offset-md-2).

Nesting

Many scenarios require that columns inside columns, and in this case our columns become the containers. Bootstrap allows us to nest row and col-* inside other col-* which enables more control over when columns stack vertically at specific breakpoints. If we remember to think "mobile-first", we can nest the desired smaller device layout inside the desired larger layout. The enables the columns to switch positions (change the order) when the columns stack vertically on small devices:

When nesting, always remember to use another row around the inner columns to ensure proper spacing/padding. Also inner rows shouldn't exceed 12 columns. While you can use nesting to change the position of columns on different devices, you can also use Bootstrap's push and pull classes.

Ordering (Push - Pull)

Often, the vertical stacking of columns is desired on smaller screen devices (tablets/phones) where horizontal space is limited. A typical 2-column page layout is where we can see the most common use case for column ordering. Using the Bootstrap col-*-push-* and col-*-pull-* CSS classes we're able to utilize the column ordering feature of the Bootstrap grid. On small (mobile) screens we want to show our main content at the top and then the sidebar nav below. This also helps SEO as the main content is closer to the top of the page when Google bot indexes the page.

An important point to remember is that both nesting and push/pull classes can be used to change column order. It's also important to think "mobile-first". First create the markup for the desired small screen layout, and then adjust the markup accordingly for the desired large screen layout.

So as you can see the Bootstrap grid is a powerful, well-considered "machine" of containers, columns and rows that enables us to build amazingly flexible responsive layouts. I look forward to the upcoming Bootstrap 4, and I will be revisiting these concepts with the new Bootstrap 4 grid which will introduce more breakpoints, CSS3 flexbox layouts and the long-awaited "equal height rows".

The upcoming Bootstrap 4 is built with SASS, and you can customize many options in the _variables.scss. There are several options to quickly change the default Bootstrap look. Set the SASS variables to easily change the grid breakpoints, container widths, borders, colors, fonts and more. There is also a variable to enable flexbox and used flexbox enabled components like the grid columns, cards and form inputs.

Bootstrap 4 also makes use of CSS 3 flexbox which is an option that can be enabled by changing the $enable-flex variable. Enabling flexbox lets us make use of flexbox enabled components like the grid columns, cards and form inputs.

There is much to look forward to in the new Bootstrap 4. The release date is still unknown, but Bootstrap's authors promise it to be a simpler migration from 3.x.

]]>http://blog.codeply.com/2016/03/19/play-with-bootstrap-4-sass-variables/225b90a7-328f-49df-81b3-6e3d3a2bd4e6Sat, 19 Mar 2016 14:24:37 GMTA closer look at: "Can I have more than 12 columns in a single Bootstrap row?"

Every time I see this question, someone inevitably answers "No, you should never do that", or "columns should never be more than 12". That's when I quietly whisper to myself, WTF. Contrary to popular opinion, it's totally OK to have columns that total more than 12 units in a single row. It causes the row to wrap. This is directly from the Bootstrap docs:

"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line"

You can also see examples of column wrapping (exceeding 12 units) in the Bootstrap docs.

In fact, there are many responsive scenarios where it's necessary to have columns exceeding 12 in a single .row element. Consider for example a layout where we want 3 columns across on larger devices, and 2 columns across on smaller devices:

By using more than 12 column units per row, the markup for this layout is simple:

If you try inserting a new row element every 12 units (or limiting the col-* units to 12 per row) you will find that it doesn't work. Remember, with Bootstrap 3 you can mix-and-match the column classes for different layouts for different viewports. Consider the "mixed grid" examples in the Bootstrap docs. You'll see cases where a single row contains 3 col-6-xs classes.

Additionally, having more than 12 columns per row is a common scenario when creating col-* dynamically. It can also be useful to go over 12 columns when you have an unknown amount of columns created dynamically, they will just wrap onto the next line, as they are floated left. If you're having a problem with gaps in columns of different height you can use a CSS clearfix every n-TH column like this.

If you're going to use more than 12 columns in a row, remember that column height does effect how things wrap because Bootstrap uses CSS floats. In some cases you may need to use responsive resets to clear the columns and prevent gaps. Bootstrap recommends "nested rows should include a set of columns that add up to 12 or fewer" if you're nesting columns inside other columns.

I hope that this post will enlighten some Bootstrap users who insist "Each row should have columns that add up to 12 and never exceed it". Read this post to learn more about how the Bootstrap grid works.

Yes, it's OK to have more than 12 columns in a single row.

Bootstrap 3's responsive grid is powerful, but getting columns to stack nicely in the desired order can be tricky. Here are some working examples and guidance that will help to make your responsive design life easier. You will find some tricks on using Bootstrap's push and pull classes to think "mobile-first".

These 4 grid sizes (xs, sm, md, lg) enable you to control grid behavior on different devices (desktop, laptops, tablet, smartphone, etc..). When Web browser width changes, the Bootstrap CSS media queries (breakpoints) "kick-in" to change the width of the columns and in some cases stack the columns vertically.

Why Use Column Ordering? A Simple Use Case.

Often, the vertical stacking of columns is desired on smaller screen devices (tablets/phones) where horizontal space is limited. This typical 2 column page layout is where we can see the most common use case for column ordering. Using the Bootstrap col-*-push-* and col-*-pull-* CSS classes we're able to utilize the real power of the Bootstrap grid.

When the sm breakpoint of less than 992 pixels is reached, the columns stack vertically and become 100% width. This places the sidebar above the main content on smaller devices.

However, the above example placed the sidebar above the main content which may not be desirable since the sidebar will push down the main content requiring users to scroll down on smaller devices. To resolve this, we use Bootstrap's push and pull classes to order the columns. The markup using push and pull changes to:

Using the push and pull classes we've pushed the 2nd column all the way to the right,
and pulled the 3 smaller columns back to the left. Now we have the desired layout:

Nest Smaller Inside Larger

Another rule to follow when creating ordered columns is to place the desired smaller layout columns, inside the larger layout columns using nesting.

Sometimes a simple pushpull won't work because of the desired column order. However, Bootstrap allows us to nest rows and col-* inside other col-* which enables us to have more control over when columns stack vertically at specific breakpoints. If we remember this, while continuing to think "mobile-first", we can nest the desired smaller device layout inside the larger layout like this...

Height Matters

Bootstrap columns always float left until stacked. As a result, shorter columns that exceed the 12 column total will naturally keep to the right of taller columns. When columns are about the same height, they stack into rows when the columns total exceeds 12 like this..

Not every case is suitable for push-pull, but if you understand the principal of mobile-first, it will make creating layouts much easier. In some cases it's necessary to float columns using the pull-left and pull-right classes. Of course there are exceptions to the rule. You'll see that in example #8 below pull-right is used, and not the mobile-first rule.