Fixed Layout vs Fluid Layout

Fixed Layout (.container)

The .container is used to create responsive layout of content. It is required when you are using Grid system. Its max-width changes at each breakpoint.

<div class="container containered">
  <h2>List Group with .container class</h2>
  <ul class="list-group">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
  </ul>
</div>

Output

Fluid Layout (.container-fluid)

The .container-fluid is used to create a full width container which is spanning the entire width of the viewport. It’s 100% wide all the time.

<div class="container-fluid">
  <h2>List Group with .container-fluid class</h2>
  <ul class="list-group">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
  </ul>
</div>

Output