The Bootstrap Grid: Everything you always wanted to know but had no one to ask

 

A Grid do Bootstrap

 
What if there was a way to create a responsive website without going crazy with Media Query calculations and rules?
 
Do not despair, there is a way ... And this way you will find out now!
 
I wrote this article simply because I was tired of looking for something complete about Bootstrap Grid. The most I found were tutorials that just copied the text (super short) from the Bootstrap website itself.
 
So, humbly I wrote this article and named it:

The Bootstrap Grid: Everything you always wanted to know but had no one to ask.

 

Introduction: What is a Grid

 
The grid is one of the best ways to create a responsive layout.
 
It can be said that the Bootstrap Grid is the backbone of this framework. So, understanding how your rules and classes work is paramount.
 
This framework has become so widely used that even a Portuguese version, Globo Boostrap , has been created. An initiative of the development team at Globo.com to use it on the news portal.
 
But how do you know if you are working properly and using all Bootstrap features?
 
If you want to know the answer to this and many other questions, keep reading this article. In it you will understand more about:
  • How size classes work ( col-xs- * col-sm- * col-md- * col-lg- * )
  • How to create columns of various sizes and responsive
  • Nesting columns (insert one inside the other)
  • How to push a column to the right
  • How to switch the position of the speakers with each other
  • How to show and / or hide a column according to the screen size
 
 

Read this common story

 
You start to make a layout, move it here, adjust it there .. Analyze competitors, choose colors, fonts, etc ...
After hours of working on your project, you finally come up with a good result. Get excited and put yourself in the web design group asking for suggestions and criticism ...
 

But, the crowd begins to criticize:

  • "It's out of alignment"
  • "Centralize it"
  • "It's borderless"
  • "It's sticking together"
  • "There is no space"

Have you been through this?

If not, you must have seen a similar story. This is because, in most cases, one of the best Design tools was missing: A Grid .
 
But what is a grid after all? Glad you asked. This brings us to the next part of this article.
 
[well type=””]

If you think this article is helpful, share it so that others can be helped as well. Just choose your favorite social network and click on one of the floating buttons on the right >>>
[/well]
 
 

What a grid is and how it came about

A grid (or mesh) is an element that emerged to give organization to the design. It is a tool that gives order to visual elements. The idea was to facilitate the layout of blocks of text and images , guiding the reader's eyes. On the Chief of Design website there is a great Guide on Grid .
 
 
Visual example of how it is simpler to organize a layout when using a grid
The blue lines show how a grid aligns the information blocks
 
 
 
Yes, grids have been in design since long before Frameworks . In fact, long before the Internet came into being.

See in the example below, a poster by the Swiss Designer Josef Müller-Brockmann. Its structured style allows us to easily detect the use of grids in the organization of this design piece.

 
Notice the structured layout style
Notice the structured layout style
 
 
 
“The grid system is an aid, not a guarantee. It allows for a number of possible uses and each designer can look for a solution appropriate to their personal style. But you need to learn how to use a grid ; it is an art that requires practice ”
Josef Muller-Brockmann
 
Then, the grid was created to give order and facilitate the design of printed materials. But we also use it in digital design .
 

The grid is present in Webdesign , Application Design and many other electronic interfaces, helping us to improve the organization of information.

See on the Tech Crunch website, how the grid was used to align the contents. I added the red lines to highlight the visualization of the grid.
 
Grid do Site Tech Crunch
 
 

Ah, do you mean that the Grid was not an invention of the Webdesigners? "

 
Exactly. They have existed since ancient times, in books and scrolls.
Now look at the following figure. Notice how the blocks of text are aligned according to a pattern.
 
Grid from an old book
 
 
 

A Grid no Webdesign

 
When a website has a well-designed grid system, it creates consistency and organization in design in general. This is important to improve the usability and organization of information .
 
 
In the digital environment, grids are an important support for creating responsive layouts .
They started to gain notoriety at about the same time that mobile browsers and different screen sizes were emerging. Creating responsive layouts without the use of a grid system makes the work of the Front End Developer much more difficult. And it gets worse as we have more screens and different internal system layouts.
 
Imagine the G1 website without a grid. How would it be?
 
G1 sem grid
 
Can you notice that it is more difficult to scroll through the page looking for a news item? We also see that there are no blocks of information and everything seems to be playing on the page.
 

Main advantages of using a grid

 

On the Developer side

  • Simplifies the creation process
  • Facilitates content alignment
  • Improves the accuracy of a layout
 
From the User's point of view
  • It helps to guide your look through the blocks of information.
  • Makes it easy to identify content
  • Organizes information blocks
Usually a grid is a css framework , with pre-established columns and widths.
 
 
[cta id = ”884 ″ vid =” 0 ″]
 

What is a CSS Framework

A framework is a set of CSS classes created to facilitate the development of websites and systems. These rules optimize the start of a project. This way we avoid having to start from scratch every time a new layout starts.
Regarding grids, there are usually size rules for html elements. In almost all frameworks, columns are used to achieve these different sizes.
 
Then, several frameworks appeared using grids:
  • 960gs
  • GridPak
  • Responsify
  • Gridinator
  • and others…
Over time, some frameworks started to insert not only grids but also interface elements .
In addition to the grid, some include:
  • Tables
  • Both
  • Modal Popups
  • Buttons
  • Accordions
That's when more robust frameworks, such as Foundation and Bootstrap, began to emerge. They started to include javascript, which allowed us to have certain features already created beforehand.
 
In addition, they still have Typography and Colors standards , that is, they are complete frameworks!

 

A grid do Bootstrap

It is a set of predefined classes to facilitate the creation of responsive pages . With it you can assemble almost any layout.
 
Responsiveness comes from the use of media queries in css, which greatly facilitates the life of the Front End developer .
 
It is organized in columns ranging from 1 to 12. These columns are organized within rows . The lines are inside a main container.
 
This container can be fluid or fixed in width. In the fluid version, it will always occupy the entire length of the window, or “viewport”. In the fixed version, it will have 3 fixed sizes for different viewport widths. We will see what these sizes are later on.

For the fixed version we have the class “ .container ” and for the fluid version, “ .container-fluid “. The structure of HTML, in a simple way, is: Container> Row> Columns.

 
See the figure below for an example of a two-line Bootstrap grid. In the first line we have 2 elements. The first occupies the space of 4 columns, while the second occupies 8 columns.
In the second line, we have 4 elements. Their respective sizes are: 2, 2, 3 and 5 columns. Note that, in both the first and second lines, the sum of the widths of all elements is 12.
The gray bars were placed only to illustrate and facilitate the understanding of how the elements behave. They always follow the alignment of these “invisible” columns.
 
Bootstrap Grid and Column Example
 
 
Are you enjoying the article? Then register your email below. You will be part of our smart community and be the first to receive new content.
 [inbound_forms id=”122″ name=”Cadastro no Post”]
 

Difference between fluid and fixed layout

 
 
A “.container-fluid” (fluid layout) will always occupy 100% of the viewport's width. In this case, your website will always be "full screen".
 
See in the image below how a “.container-fluid” occupies all the available size. Note that the columns also become wider.
 
 
Layout fixo e layout fluido bootstrap
 
A ".container" (fixed layout) has 3 fixed sizes, which will be used according to the size of the viewport (browser window) where the site is being viewed.
 
  • For viewport sizes from 0 to 767px, the “.container” is always auto width.
  • From 768px to 991px, it will have 750px .
  • From 992px to 1199px, our “.container” is 970px .
  • 1200px upwards, it will always have 1170px
The values where the width of the “.container” changes are called Break Points. These changes are possible thanks to Media Queries.
 
To understand what Media Query is, see my mini tutorial below
 

 

Breakpoints Boostrap

  • 768px
  • 992px
  • 1200px
 
These values indicate from what size, new css rules will take effect. In a simplified way, we can say that you can have a layout for the size from 0 to 767px, another layout for the size between 768px and 991px, plus a layout between 992px and 1199px and finally another layout for sizes greater than or equal to 1200px.
 
Have you ever stopped to think about the power of this?
 
Study the table below to understand how Bootstrap classes behave according to the size of the viewport. This table is a translation of the original content of the Bootstrap website.
 
Grid do Bootstrap 3
Extra Peq.(extra small)
Ceulares (<768px)
Small (sm all )
Tablets (≥768px)
Medium (m and d ium )
Desktops (≥992px)
Large ( l ar g e)
Desktops (≥1200px)
Maximum container width
None (auto)750px970px
1170px
Grid behavior
Horizontal always
One over the other at the beginning, horizontal above the breakpoints
Class Prefix
.col-xs-.col-sm-.col-md-
.col-lg-
Maximum column width
Auto~62px~81px
~ 97px
Space between columns
15px on each side of the column (total 30px)
 
 
 
And the lines? There is only one class for them: “.row”.
 
And finally the columns. Now we have to keep in mind that these columns vary in size according to two basic rules:
  • Viewport width
  • Number of columns we choose for them.
In Bootstrap, an HTML element can have its width defined between 1 and 12 columns . This means that when we choose size 12, this element will be 100% the width of the “.container” element. If we want this element to be half the width of the “.container” we will use 6 columns for its width.
 
How to achieve this? Using pre-established classes, which range from 1 to 12.
 
Let's look at the 50% size example. Just add the class “.col-md-6”. If we wanted this element to be 1/3 the width of the “.container”, then we would add the class “.col-md-4”. Did you notice that 4 is 1/3 of 12?
 
 

Let's take a practical example?

 
 

See the Pen Simple example of Bootstrap columns by Rodrigo Ribeiro de Abreu ( @ millano572 ) on CodePen .

NOTE: To see the behavior of the code correctly, open it in a new tab by clicking on “Edit on Codepen”
 
 
In the example above, both divs in the first column occupy 50% of the viewport. In the second line, each element occupies 1/3 of the size of the container.
 
But this “md” thing in the middle?
 
I'm glad you asked. This is an abbreviation for “medium”. It means that, for medium viewports, the element will be 50% of the width of the Viewport
 
For each viewport measure we have a prefix:
  • sx - Extra Small
  • sm - Small
  • md - Medium
  • lg - Large (Large)

 

See the figure below, where I show what type of size each class will be active in.
 
Active classes according to screen size
 
 
 
xs
sm
md
lg
This prefix will be interpreted by the browser when the screen width is between 0 and 767px
This prefix will be interpreted by the browser when the screen width is between 768px and above
This prefix will be interpreted by the browser when the screen width is between 992px and above
This prefix will be interpreted by the browser when the screen width is between 1200px and above
Container width = 100%
Container width = 750px
Container width = 970px
Container width = 1170px
Column Width = Auto
Column Width: Approximately 62px
Column Width: Approximately 81px
Column Width: Approximately 97px
 
 
 
See in the example below how you can achieve several layouts just by working with the Bootstrap grid classes
 

See here ... Example of grid layout by Rodrigo Ribeiro de Abreu ( @ millano572 ) on CodePen .

NOTE: To see the behavior of the code correctly, open it in a new tab by clicking on “Edit on Codepen”
 
Explaining the code above
 
Our first div is the container, which will vary in size according to the width of the viewport. I suggest that you open this code in a new tab and keep it smaller and wider in the browser window. This will show you in a 100% practical way how classes work and how each element gains a different width.
The second div is the line, with the class “.row” as I mentioned earlier.
Within the line we have 4 divs that behave differently.
 
Studying the column classes
 
ATTENTION! If you want to keep just one thing from this article, understand everything that is explained in the 4 blocks of text below!
 
Our first div has the following classes:
.Col-sm-12 “, indicating that when the viewport is greater than or equal to 768px , this element will have the width of 12 columns , or 100%
.Col-md-6 “, indicating that when the viewport is greater than or equal to 992px , this element will occupy the space of 6 columns
.Col-lg-3 “, which will make this element have its width equivalent to 3 columns when the viewport is greater than or equal to 1200px
 
Our second div has the following classes:
.Col-sm-9 “, indicating that when the viewport is greater than or equal to 768px , this element will have the width of 9 columns
.Col-md-6 “, indicating that when the viewport is greater than or equal to 992px , this element will occupy the space of 6 columns
.Col-lg-6 “, making this element have a width equivalent to 6 columns too, when the viewport is greater than or equal to 1200px
 
Our third div has the following classes:
.Col-xs-6 “, indicating that from 0px this element starts with the width of 6 columns
.Col-sm-3 “, indicating that when the viewport is greater than or equal to 768px , this element will have the width of 3 columns , or 100%
.Col-md-9 “, indicating that when the viewport is greater than or equal to 992px , this element will occupy the space of 9 columns
.Col-lg-2 “, which will make this element have its width equivalent to 2 columns when the viewport is greater than or equal to 1200px
 
Our fourth div has the following classes:
.Col-xs-6 “, indicating that from 0px this element starts with the width of 6 columns
.Col-sm-12 “, indicating that when the viewport is greater than or equal to 768px , this element will have the width of 12 columns , or 100%
.Col-md-3 “, indicating that when the viewport is greater than or equal to 992px , this element will occupy the space of 3 columns
.Col-lg-1 “, which will make this element have its width equivalent to 1 column when the viewport is greater than or equal to 1200px
 
 

Changing a column to the right: Offset

The offset pushes the column to the right using the same numbers as the column widths.

So, if we want a column to "walk" the space corresponding to 4 columns , just insert " .col-md-offset-4 ". This adds a margin to the left, which will push it across the width of four columns when the browser window is “md” in size and above it.
 

See the Pen Simple example of Bootstrap offset by Rodrigo Ribeiro de Abreu ( @ millano572 ) on CodePen .

NOTE: To see the behavior of the code correctly, open it in a new tab by clicking on “Edit on Codepen”
 
You can override this rule for other viewport sizes. Let's take an example: imagine that you have a column with size 6 when the viewport is in measure xs (0 to 767px).
What if you wanted this element to move 3 columns to the right?
Then you would use:
 
 
NOTE: Did you notice the “xs” there in the middle? So don't forget that this element will only be pushed to the right while the viewport size is less than 768px .
 
Now, for a larger screen size (sm) you want it to be size 4 but without any offset . Then you should add two classes: “col-sm-4” and “col-sm-offset-0”.
With the final result:
 
Note that the “col-sm-offset-0” class overrides the “.col-xs-offset-3” class, zeroing the left margin.

 

Nesting columns

 
Nesting columns is the same as inserting one column inside the other. But you need to create a new line inside the column and only then, create a column inside that new line.

 

Example

 
 
    
 
         
 
              
6
 
              
6
 
         
 
    
 
 
So, in relation to the main container, the second level “.col-sm-6” is 25% wide, while the first level “.col-sm-6” is 50% wide. So, be very careful not to get confused, because a second level “.col-sm-6” is the same width as a first level “.col-sm-3”!
 
 

See the Pen Nesting Columns in the Bootstrap by Rodrigo Ribeiro de Abreu ( @ millano572 ) on CodePen .

NOTE: To see the behavior of the code correctly, open it in a new tab by clicking on “Edit on Codepen”

Changing the order of columns

You can change the layout of a page without having to change the position of the HTML in the document. Imagine that in HTML you choose to put one section before another. This can happen for reasons of SEO, for example. You can reverse this order in the layout using the “pull” and “push” classes.
 
Here's an example:

See the Pen Changing the column order in Bootstrap by Rodrigo Ribeiro de Abreu ( @ millano572 ) on CodePen .

NOTE: To see the behavior of the code correctly, open it in a new tab by clicking on “Edit on Codepen”

 
What's the catch? These two classes work by changing the values of 'position' using “left” and “right” with the respective values according to the class used.
 
In the example above, the class “col-md-push-6” contains the rule “left: 50%”. Why this value? First, let's point out that this rule only applies to when the viewport is greater than or equal to 992px, since we use "col- -push- md *". The value “50%” was used because the number 6 is equivalent to half of the viewport. So let's play the column to the right over a distance of 6 columns (or 50%). In the section “# our-jobs” we use the class “.col-md-pull-6” which brings the column to the left in the measure of 6 columns, or 50%.
 
Note: In English, “push” means “push”. "Pull" means "pull". For sonically remembering “pull”, we often confuse “push” with “pull”. IT IS ALWAYS THE CONTRARY.
 
Again, see how much simpler to explain using an illustration:
 

Pull e Push

 
Did you notice that the columns alternated their orders after adding “.col-md-push-6” in the first and “.col-md-pull-6” in the second?
 
 

Column wrapping

When you place more than 12 columns in a row, the extra columns are played down, following the “float: left” of the entire column.
 

See the Pen Column Wrapping no Bootstrap by Rodrigo Ribeiro de Abreu (@millano572) on CodePen.

NOTE: To see the behavior of the code correctly, open it in a new tab by clicking on “Edit on Codepen”
 
It is possible to create more than one line without necessarily adding a new element with the class “.row”
 
Although this is possible, it is rarely used. Working like this can generate some layout breaks that become more difficult to get around as your project grows.
 

Responsive column resets

It may happen that one column locks into another, depending on the rules for small screens. This usually happens when one of the columns is much taller than the other
 
Carefully analyze the code below and compare how the two example layouts look different.
 

See the Pen Responsive column resets no Bootstrap by Rodrigo Ribeiro de Abreu (@millano572) on CodePen.

NOTE: To see the behavior of the code correctly, open it in a new tab by clicking on “Edit on Codepen”

 
 

Hiding and revealing content according to the size of the screen (Responsive Utilities)

If you've read the article so far, you may have already noticed how powerful the Bootstrap Grid is. Oh, and I also say that you are to be congratulated. It means that you are committed to learning everything you ever wanted to know about Bootstrap Grid but had no one to ask.
 
So how about sharing with your colleagues so that everyone can learn?
[well type=””]

If you think this article is helpful, share it so that others can be helped as well. Just choose your favorite social network and click on one of the floating buttons on the right >>>
[/well]

 

 
Going back to our content, now it's time to learn how to show and hide content based on the size of the screen where your layout is being viewed.
 
Let’s say you didn’t want to show a banner to users browsing on their cell phones. In this case, you would use the “.hidden-xs” class. This banner would be visible to all other screen sizes, except for screens smaller than 768px.
For the other sizes, there are the classes “.hidden-sm”, “, hidden-md”, “.hidden-lg”.
Note that these classes hide for the chosen size but show for everyone else.
 
Imagine that now we want the opposite: show it to a specific size and hide it for everyone else.
Now the keyword is "visible". To show an element for mobile phones only, for example, we use “.visible-xs- *”.
 
The options are: “.visible-xs- *”, “.visible-sm- *”, “.visible-md- *”, “.visible-lg- *”
 
We now have an asterisk right after the size prefixes. We have options to choose the display mode for this element.
 
The options are:
 
Class group
 
CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;
 
 

Illustrative table of classes

 
 
 
Extra small
Small
Medium
Large
.visible-xs-*
Visible
Hidden
Hidden
Hidden
.visible-sm-*
Hidden
Visible
Hidden
Hidden
.visible-md-*
Hidden
Hidden
Visible
Hidden
.visible-lg-*
Hidden
Hidden
Hidden
Visible
.hidden-xs
Hidden
Visible
Visible
Visible
.hidden-sm
Visible
Hidden
Visible
Visible
.hidden-md
Visible
Visible
Hidden
Visible
.hidden-lg
Visible
Visible
Visible
Hidden
 
 
 
 
 
Let's take a practical example
 
 
Imagine that we need the following layouts, according to the illustration below
 
Hides and shows according to the viewport size
 
We will now make these layouts using Codepen
 
See that inside each element, I put an explanation of the classes that make it appear or disappear according to the layout.
 

See the Pen Responsive Utilities by Rodrigo Ribeiro de Abreu (@millano572) on CodePen.

NOTE: To see the behavior of the code correctly, open it in a new tab by clicking on “Edit on Codepen”
 
Understand these classes well and you will be able to make changes to your layout intelligently. However, be very careful and pay attention to the element that you hide. Remember that the element will always be hidden via CSS, however your HTML code is being loaded.
So, even if your layout is lean for mobile, all the HTML is being loaded, causing slowness.
 
For example, imagine that you have a carousel (slideshow) with 5 slides (images + texts). Even putting all of it as "hidden-xs", know that these images and all HTML are being loaded by the cell phone.
This is because the class. ”Hidden-xs” has the following rules:
 
@media (max-width:767px) {
.hidden-xs {
display:none !important
}
}
 
 
So take a good look at whether the content you're creating is really important and whether it deserves to be on the site.
 
Note: When using this property on an element, you automatically make this content “inaccessible” to screen readers. If you are interested in delving into this subject, read Maujor's article on display screen readers: none .
 
 

Conclusion

 
Grid will help you a lot to improve your layouts. Using the Bootstrap Grid then, you will build fully responsive websites and layouts without a lot of headaches.
 
Know that many problems that you always had when doing a Design, will cease to exist when you become a master in the Bootstrap Grid.
 
Combining everything you have read above, it will be possible to make several layouts, which fit perfectly in any screen sizes of any device that exist today or in the future.
 
 

Finally, I would like to know your opinion about this article.

Leave a comment below about what you liked best about this article, or about any extra tips you want to share with us or even any criticism about this text.

 
And remember: You didn't learn EVERYTHING about the Bootstrap Grid just by reading an article. You need to practice. And practice a lot.
 
So, the next time you start a responsive website, go back to this article and use it as a guide. Make sure it will be much easier than it has been so far.
 
Now is the best time for you to transform your future. Start practicing right now.
If you have questions, ask in the comments below.
 
Now you will be able to create a responsive website once and for all, believe me.