Search code examples
htmlbootstrap-4col

Does bootstrap support col in row without container


I'm using bootstrap 4.6.0 and wondering if next usage is supported. Everything works, but shouldn't I use another container:

<div class="container-fluid">
  <div class="row">
    <div class="col-6">
      <!-- <div class="container-fluid"> -->
      <div class="row">
        <div class="col-6">A1</div>
        <div class="col-6">A2sdfgsdfgsdfgsdfgsd fgsdfgdfgsdfgsdfg</div>
      </div>
      <!-- </div> -->
    </div>
    <div class="col-6">
      <h1>Blasdfgsdfgsdfgsdfgsdfgsdsdfgsdfgsdfgsdfgsdfgsd sdfgsdfgsdfgsdfgsdfgsd</h1>
    </div>
  </div>
</div>

Are there any drawbacks for this usage? Inspecting bootstrap .container-fluid, it has only this style:

.container, .container-fluid, .container-xl, .container-lg, .container-md, .container-sm {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

Solution

  • No need to use container or container-fluid classes to nest rows.

    Documentation: https://getbootstrap.com/docs/4.6/layout/grid/#nesting

    .bd-example-row .row>.col, .bd-example-row .row>[class^="col-"] {
        padding-top: .75rem;
        padding-bottom: .75rem;
        background-color: rgba(86,61,124,0.15);
        border: 1px solid rgba(86,61,124,0.2);
    }
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container bd-example-row">
      <div class="row">
        <div class="col-sm-9">
          Level 1: .col-sm-9
          <div class="row">
            <div class="col-8 col-sm-6">
              Level 2: .col-8 .col-sm-6
            </div>
            <div class="col-4 col-sm-6">
              Level 2: .col-4 .col-sm-6
            </div>
          </div>
        </div>
      </div>
    </div>