Skip to Content
Learn
Learn Bootstrap 4: Grid
Setting Column Widths

In the previous exercise, we saw how columns take on a default width based on the size of the row. However, Bootstrap gives us more customization options so that we can make columns of varying widths. Take a look at 4th and 5th row of the diagram for examples of rows containing columns of differing widths:

Bootstrap columns can have different widths

We can decide the width of a column by appending a hyphen and a number to the "col" class like so:

<div class="col-8"> <p>This is the width of 8 columns.</p> </div>

In our example, our row still has 4 columns worth of space. If we decide to add an adjacent column, we could also set our desired width like so:

<div class="row"> <div class="col-8"> <p>This is the width of 8 columns.</p> </div> <div class="col-4"> <p>This has the width of 4 columns.</p> </div> </div>

If we didn’t specify a desired width for the second column, it would still resize itself to fill in the remaining space in the row. But, by adding "-4", we make our code more readable and allow other developers to clearly know our intentions.

Now let’s customize the widths of our columns!

Instructions

1.

In the first row, change the class of an existing column to render its width as 9 individual columns.

Then add a number to the other column to be as wide as 3 individual columns.

2.

In the second row, make the middle column as wide as 6 individual columns. Then assign the widths of the other two columns to fill in the remaining space in the row.

Folder Icon

Sign up to start coding

Already have an account?