Fluid Jumbotron!

This is a fluid jumbotron. Fluid jumbotrons occupy the entire horizontal space of its parent.

Fluid jumbotrons are new in Bootstrap 4.

Jumbotron Examples »

Bigger Grid

OK, maybe not bigger but... Bootstrap 4 uses a 5 tier grid system compared to the 4 tier grid system in Bootstrap 3.

Bootstrap 4 added sm to its grid classes, so it now supports xs, sm, md, lg, and xl (for example, class="col-sm-6).

.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-2
.col-sm-3
.col-sm-7
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-5
.col-sm-7
.col-sm-6
.col-sm-6
.col-sm-12

The following table shows how different grid options work with different viewport sizes.

  Extra small <34em Small ≥34em Medium ≥48em Large ≥62em Extra large ≥75em
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 34rem 45rem 60rem 72.25rem
Class prefix .col-xs- .col-sm- .col-md- .col-lg- .col-xl-
Number of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Introducing Cards

In Bootstrap 4, cards replace panels, thumbnails and wells from Bootstrap 3.

Card 1

Text for this card.

Card 2

Text for this card.

Card 3

Text for this card. Here's why.

Footer
Card 4

Text for this card.

Footer

Card 5

Text for this card.

Card 6

Text for this card. Here's why.

Card 7

Text for this card. Here's why.

Footer

Card 8

Text for this card.

Introducing Tags

Bootstrap's tag classes can be used to highlight additional information that's appended to a string of text.

Tags replace labels from Bootstrap 3.

Contextual Tags

Add some color based on context.

Default Primary Success Info Warning Danger

Pill Tags

Use the .tag-pill class to give your tags rounded corners.

Default Primary Success Info Warning Danger

Introducing Custom Forms

Bootstrap 4 introduces custom forms. These are custom form elements that completely replace the browser defaults. The idea behind custom forms is that they allow for more customization and cross browser consistency.

Outline Buttons

Bootstrap 4 introduces outline buttons — buttons with a contextual outline.

Progress Bars

Bootstrap 4 takes advantage of the HTML5 <progress> element when working with progress bars.

73% 50% 35% 20%

Responsive Tables

Bootstrap 4 allows you to apply the .table-responsive class directly to the table (as opposed to being required to apply it to a parent element, like in Bootstrap 3).

Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8 Header 9 Header 10
Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell

Reflow Tables

There's a new .table-reflow class that effectively turns your table on its side.

Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8 Header 9 Header 10
Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell

Table Head Styles

You can add background color to your table headers in Bootstrap 4.

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell