Bootstrap Grid System: Can .row within .col?

Navigation
1

I have a question regarding Bootstrap's Grid System, is it ok to use a .row within an element with class .col-x-y if I want to create more than one column within that .col-x-y ?

In short, is it a good practice or not to use .row within .col ?

    
asked by anonymous 18.04.2018 / 15:12

1 answer

2

Yes you can do it that way. There is even an example of this in the official documentation as you can see here: link 

<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>

This technique is called Nesting Grid

See the full example below: 

.row>[class^=col-] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />

<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>
    
18.04.2018 / 15:16
Composite primary key using a foreign key Unix Grep command handling the output if there is no result