#Bootstrap grids how to
#Bootstrap grids update

Replace all the content inside the 'container' class with the following content: Let's take a look at what happens when we have multiple rows. Go under and we will end up with odd white space. Go over twelve and the columns will spill over into a new row (which will cause the page to become a mess). We could add more styling to the narrower column (such as a different colored background) to make it look more like a sidebar.Īs long as the total value of units in a row is exactly equal to twelve, this system will work smoothly. You'll see that the left column is 1/3 of the width of the right column.

#Bootstrap grids update

Update the code in the container to have the code above as well as some headers and text. Bootstrap is very flexible and we could create a sidebar by doing something like this: Our columns don't have to be equal width, though. We could use 'col-3' if we wanted to have four columns of equal width and 'col-2' if we wanted to have six columns of equal width. This is because twelve divided by three is four - so our three columns are each four units wide. The difference here is that we use the class 'col-4'. If we wanted to have three equal columns, we'd do the following: In order to have two columns then, each taking up half the width of the page, we need each of them to take up six units - that's why the class name is 'col-6'.

So to make up half of the width of the page, we need six of those units. We can think of each of these columns as a single unit of width. Why 6, though? Well, remember that we can have up to twelve columns in a row. Here, we have two columns nested in one row. Now let's take a look at the Bootstrap format for creating these columns: Just as with other Bootstrap elements, they are responsive if we resize the page. Let's take a look in the browser and then discuss what we're doing here.Īs we can see, we have two columns of equal width. This file isn't really meant to be part of our project - it's just an opportunity to practice with Bootstrap. Let's add another file to our section-in-review project called bootstrap.html. There is no limit to the number of rows a page can have - but there can be no more than twelve columns. Bootstrap Grid SystemĪ bootstrap grid is a set of rows, each containing columns. That's exactly what we'll do in this lesson. The good news is that we can easily implement Bootstrap's grid system and take advantage of this functionality without knowing anything about flexbox at all. The flexbox is a very important layout model for web designers, so if you have a specific interest in design, we recommend exploring it further on your own. It is built on a powerful CSS concept known as the flexbox. The Bootstrap grid system contains just two parts: rows and columns.

#Bootstrap grids how to

In this lesson, we'll explore how to implement this powerful feature in our own projects. The grid system allows us to use several Bootstrap classes to quickly create a wide variety of invisible grids that neatly space and line up content. That's why another most commonly-used Bootstrap feature is their grid system. Lining up content evenly with only HTML and CSS can prove to be pretty challenging.