Skip to content
This repository has been archived by the owner on Feb 1, 2022. It is now read-only.

E014

Jump to bottom
Herst edited this page Oct 21, 2018 · 4 revisions

E014

Bootlint v0.x

Columns (.col-*-*) can only be children of .rows or .form-groups

Bootstrap's grid system requires that grid columns must be children of grid rows (or .form-groups, because they extend .row in the Less source).

Wrong:

<div class="my-random-thing">
  <div class="col-sm-6">...</div>
  <div class="col-sm-6">...</div>
</div>

<div class="row">
  <div class="col-sm-12">
    <div class="col-sm-12">...</div>
    <!-- You can't nest columns directly like this. This is missing a level of .row -->
  </div>
</div>

Right:

<div class="row">
  <div class="col-sm-6">...</div>
  <div class="col-sm-6">...</div>
</div>

<div class="form-horizontal">
  <div class="form-group">
    <div class="col-sm-6">...</div>
    <div class="col-sm-6">...</div>
  </div>
</div>

<div class="row">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-12">...</div>
    </div>
  </div>
</div>

Bootlint v1.x (Bootlint for Bootstrap v4 and newer)

Columns (.col*) can only be children of .rows or .form-rows

Bootstrap's grid system requires that grid columns must be children of grid rows or .form-rows.

Wrong:

<div class="my-random-thing">
  <div class="col-sm-6">...</div>
  <div class="col-sm-6">...</div>
</div>

<div class="row">
  <div class="col-sm-12">
    <div class="col-sm-12">...</div>
    <!-- You can't nest columns directly like this. This is missing a level of .row -->
  </div>
</div>

Right:

<div class="row">
  <div class="col-sm-6">...</div>
  <div class="col-sm-6">...</div>
</div>

<div class="form-horizontal">
  <div class="form-group">
    <div class="col-sm-6">...</div>
    <div class="col-sm-6">...</div>
  </div>
</div>

<div class="row">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-12">...</div>
    </div>
  </div>
</div>

Bootlint documentation wiki content is licensed under the CC BY 3.0 License, and based on Bootstrap's docs which are copyright Twitter, Inc.

Clone this wiki locally