Skip to content

Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Teachable.

Setting one column width – Bootstrap


For the best viewing experience, click the Edit on CodePen button in the upper righthand corner of the Pen to open it in a new tab.


<div class="container">
  <div class="row">
    <div class="col">
    <div class="col-6">
    <div class="col">


You can modify the col class by adding a dash and a number at the end. You can use the numbers 1 through 12 (e.g., col-1, col-2, col-3, all the way up to col-12).

By adding a number to the column class, you are specifying the size of that column. Remember, Bootstrap is based on a 12-column system. If you use the class col-12, that column will take up the entire row. If you use col-6, that column will take up half of the row, and the other columns will fill in the remaining space.

Desktop View
Smartphone View


Recreate the HTML code from the Demo section in your index.html file.


Setting one column width | Bootstrap Docs

Back to: Bootstrap Reference > Bootstrap Grid System