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