Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Containers

Bootstrap 4 uses container classes to wrap the page's contents.

There are two container classes to choose from:

  • .container - provides a responsive fixed width container
  • .container-fluid - provides a full width container, spanning the entire width of the viewport
.container
.container-fluid

Bootstrap 4 Container

The .container class provides a responsive fixed width container.

You can create a fixed width container by using the .container class as shown below:

<div class="container">
...
...
...
</div>

The following example shows the code for a basic Bootstrap 4 page (with a responsive fixed width container):

My First Bootstrap Page

This is a simple web page with fixed width container by using .container class.

The .container class is used to wrap the page content with fixed width.

Run code


Bootstrap 4 Fluid Container

The .container-fluid class provides a full width container, spanning the entire width of the viewport.

You can create a full width container by using the .container-fluid class as shown below:

<div class="container-fluid">
   ...
   ...
   ...
</div>

The following example shows the code for a basic Bootstrap 4 page (with a full width container):

My First Bootstrap Page

This is a simple web page with full width container by using .container-fluid class.

The .container-fluid class provides a full width container, spanning the entire width of the viewport.

Run code