Register to get access to free programming courses with interactive exercises
The grid is the main component of the Bootstrap framework. Many projects connect Bootstrap just to be able to use the grid. Indeed, the grid system has long been tried and tested on hundreds of projects.
Understanding how the grid works in Bootstrap is an essential skill when working. Once you understand the intricacies of building templates, you can make complex layouts and not resort to unnecessary style add-ons.
From the course on Grid you’ll know that a grid is a system of lines along which content is lined up within a template. These lines are invisible. Take a look at the Hexlet blog template. The image shows the project grid. The dark lines indicate columns, and the orange lines indicate indents between columns. Study this example and find patterns in the way the content is structured within the blog.
Grids in Bootstrap are responsible for block layout and for adaptivity. The grid determines how content blocks will be displayed at different resolutions.
The grid can be broken down into three constituent parts:
-
Container
-
Strings
-
Columns
As an example, we’ll use code that uses the Bootstrap grid:
<div class="container">
<div class="row">
<div class="col">
<p>Hexlet - hands-on programming courses. We help newbies become professional programmers, and help experienced developers gain new knowledge and grow professionally.</p>
<p>We believe that a real programmer must understand how a computer works and think like a computer. They should see a problem, not an assignment. They must be able to analyze and reason at the level of the problem and above, not just at a code level.</p>
<p>Given how many study materials, courses, and books are available, the main question a beginner faces nowadays is not “where do I study?” but “what should I study and in what order?” There are many opinions on this subject. Some advise starting with mathematics, some advise specific languages and technologies.</p>
</div>
</div>
</div>This layout demonstrates the container → row → column approach. Adding text to a column with the .col class will produce the following layout:
Visually, it may seem that nothing much happened, and the text is displayed as if no containers, rows, or columns were added. But this is not the case! The mechanism for the adaptive grid and the lining up of columns has already started. Let’s add another column with the same text:
<div class="container">
<div class="row">
<div class="col">
<p>Hexlet - hands-on programming courses. We help newbies become professional programmers, and help experienced developers gain new knowledge and grow professionally.</p>
</div>
<div class="col">
<p>We believe that a real programmer must understand how a computer works and think like a computer. They should see a problem, not an assignment. They must be able to analyze and reason at the level of the problem and above, not just at a code level.</p>
</div>
</div>
</div>
The two columns are the same width. It’s time to take a closer look at the classes that are described in HTML.
container
The container is a key element of the Bootstrap grid. The main purpose of the container is to limit the width of the content. By default, content in Bootstrap has a maximum width of 1140 pixels. This condition is due to accessibility; in this framework, the text is organically placed across the width and fits about 120 characters. If you have too many characters, it gets too difficult to read, since it’s harder for your eyes to move between lines.
This limitation can be bypassed. Bootstrap uses the .container-fluid, class for this, which doesn’t limit the width of the content within it. The two-column layout from the example above using .container-fluid will look like this:
The container stores elements of all kinds. It doesn’t have to be strings. If you don’t need a grid for elements, you shouldn’t create a string with one single element inside it.
Important: Do not put the container inside another container. This is bad practice. If you need more than one container, then you should separate them rather than nest them. If during markup you notice that you need a container inside another container, then calm down, have some coffee, and reconsider your approach.
row
Like with tables, rows are an inherent attribute of columns. In Bootstrap, the row takes on the role of a flex container, within which the columns' flex elements will be placed. If you don’t wrap the elements, the columns will stop working.
The .row class has the following styles:
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}The interesting thing here is the use of negative outside indents. This technique is used because columns within Bootstrap have internal indents that separate columns from each other by a fixed value of 30 pixels. In order to compensate for indentations on the left and right and not form extra indentations in the first and last element in the row, negative indentations are used for the container, which is .row.
.row contains only columns! This ensures proper nesting and the ability to create adaptability. Third-party elements are moved outside of .row.
#Since .row is a flex container, it’s possible to apply to it the available properties shown in the Flex course
col and col-*
The example with the two-column layout used the .col class, which distributes space evenly between the columns with these classes inside the .row container. In layouts, this operation is often not necessary, generally you need to give blocks their own number of columns. Bootstrap is a 12-column system. This means that in addition to the .col class 12 .col-* class columns are available when creating a grid, where \* is the number of columns the item will occupy.
<div class="container">
<div class="row">
<div class="col-4">
<p>Hexlet - hands-on programming courses. We help newbies become professional programmers, and help experienced developers gain new knowledge and grow professionally.</p>
</div>
<div class="col-8">
<p>We believe that a real programmer must understand how a computer works and think like a computer. They should see a problem, not an assignment. They must be able to analyze and reason at the level of the problem and above, not just at a code level.</p>
<p>Given how many study materials, courses, and books are available, the main question a beginner faces nowadays is not “where do I study?” but “what should I study and in what order?” There are many opinions on this subject. Some advise starting with mathematics, some advise specific languages and technologies.</p>
</div>
</div>
</div>In this example, the first part of the text got 4 columns out of 12, while the second part of the text got 8 columns out of 12. Bootstrap automatically moves columns if they add up to more than 12 parts. If there are fewer columns in the row, you don’t need to worry about this when adding a new element.
You can combine the .col class with the .col-\* classes. This will allow you to only limit the necessary part, automatically calculating the space for the column with the .col class. For example, when you create a two-column layout, you specify col-\* for the sidebar and .col for the content part.
<div class="container">
<div class="row">
<aside class="col-3">
<!-- Sidebar -->
</aside>
<main class="col">
<!-- Main Content -->
</main>
</div>
</div>Inside the columns, as you may have guessed, you can have absolutely any content. Any element can play the role of a column.
It’s important to note that: a structure such as container → row → column is mandatory. Keep this in mind every time you create a grid with Bootstrap.
Excluding the container from this chain is a common mistake. Even though`.row` isn’t directly dependent on container styles, if you don’t specify a container, one of the internal indentation compensations will be lost, and content for different viewport sizes won’t be aligned properly.
Are there any more questions? Ask them in the Discussion section.
The Hexlet support team or other students will answer you.
About Hexlet learning process
- Article “How to Learn and Cope with Negative Thoughts“
- Article “Learning Traps“
- Article “Complex and simple programming tasks“
For full access to the course you need a professional subscription.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
Sign up
Programming courses for beginners and experienced developers. Start training for free
- 130 courses, 2000+ hours of theory
- 1000 practical tasks in a browser
- 360 000 students
Our graduates work in companies:
Suggested learning programs
Profession
Under development
beginner
Layout with the latest CSS standards
start anytime
5 months
Use Hexlet to the fullest extent!
- Ask questions about the lesson
- Test your knowledge in quizzes
- Practice in your browser
- Track your progress
Sign up or sign in
Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.