Can you nest Bootstrap containers?

Question

From the docs at http://getbootstrap.com/css/

You can choose one of two containers for use in your projects. Note that due to filling and more, no container is nested.

and

Rotate any grid of a fixed-width grid into a full-width layout by changing your outer container. Liquid container.

The second sentence implies that you can have nested containers. The first sentence seems to imply that there should be one container per page.

What is it?

(A case may require a container-liquid to be inserted inside the container or simply inside some other fixed-width element).

Answer 1

You are right about the possibility of using container fluid

h4 { margin-top: 25px; } .container { border: solid 5px red; } .row { margin-bottom: 20px; } .row .row { margin-bottom: 0; } .nested-container { border: solid 3px green; } .container-fluid { border: solid 3px blue; } [class*="col-"] { padding-top: 15px; padding-bottom: 15px; background-color: #eee; background-color: rgba(86, 61, 124, .15); border: 1px solid #ddd; border: 1px solid rgba(86, 61, 124, .2); } hr { margin-top: 40px; margin-bottom: 40px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> </div> <div class="row"> <div class="col-xs-12"> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> </div> </div> <div class="container nested-container"> <div class="row"> <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div> </div> </div> </div> </div> </div>