Bootstrap class: .container-fluid

<div class="container-fluid">
  <!-- A fluid container that uses the full witdh -->
</div>

Preview

Use Shuffle AI to build your own Bootstrap templates

Quickly design stunning Bootstrap templates with the power of Shuffle AI — no coding required.

Check .container-fluid in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Open in Visual Editor →

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

Sass source

/* _grid.scss:18 */
.container-fluid {
  @include make-container();
}

/* _navbar.scss:148 */
> .container-fluid {
  padding-right: 0;
  padding-left: 0;
}
      }

      @include media-breakpoint-up($next) {
flex-flow: row nowrap;
justify-content: flex-start;

.navbar-nav {
  flex-direction: row;

  .dropdown-menu {
    position: absolute;
  }

Uses variables

/* _grid.scss:18 */


/* _navbar.scss:148 */
$next