Interface

Grid & Panels

Grid

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. There are some examples below, but please read the full documentation on the Bootstrap website.

Default padding

By default, columns have a 30px gap between them (15px on each side).

Column 1
25% at more than 992px
50% at more than 767px
100% at less than 767px
Column 2
25% at more than 992px
50% at more than 767px
100% at less than 767px
Column 3
25% at more than 992px
50% at more than 767px
100% at less than 767px
Column 4
25% at more than 992px
50% at more than 767px
100% at less than 767px

Half padding

To half the padding between columns to 15px  (7.5px on each side), add the class half-padding to the row.

Column 1
25% at more than 992px
50% at more than 767px
100% at less than 767px
Column 2
25% at more than 992px
50% at more than 767px
100% at less than 767px
Column 3
25% at more than 992px
50% at more than 767px
100% at less than 767px
Column 4
25% at more than 992px
50% at more than 767px
100% at less than 767px

No padding

To have no gap between columns add the class no no-padding to the row.

Column 1
25% at more than 992px
50% at more than 767px
100% at less than 767px
Column 2
25% at more than 992px
50% at more than 767px
100% at less than 767px
Column 3
25% at more than 992px
50% at more than 767px
100% at less than 767px
Column 4
25% at more than 992px
50% at more than 767px
100% at less than 767px

Dividing lines

You can add a dividing line between columns to either the left or right. The syntax works in a similar way to columns.

  • Add col-xs-divider-left or col-xs-divider-right for all screen widths.
  • Add col-sm-divider-left or col-sm-divider-right to just show on screens wider than 767px.
  • Add col-md-divider-left or col-md-divider-right to just show on screens wider than 992px.
  • Addcol-lg-divider-left or col-lg-divider-right to just show on screens wider than 1200px.
Column 1
25% at more than 992px
50% at more than 767px
100% at less than 767px
Column 2
25% at more than 992px
50% at more than 767px
100% at less than 767px
Column 3
25% at more than 992px
50% at more than 767px
100% at less than 767px
Column 4
25% at more than 992px
50% at more than 767px
100% at less than 767px

Panels

The white panels are reserved for the main page content. They are white so that the content is the most important focus of the page.

Columns with panels

Column 1
25% at more than 992px
50% at more than 767px
100% at less than 767px
Column 2
25% at more than 992px
50% at more than 767px
100% at less than 767px
Column 3
25% at more than 992px
50% at more than 767px
100% at less than 767px
Column 4
25% at more than 992px
50% at more than 767px
100% at less than 767px

Columns inside a panel

Column 1
33% at more than 767px
100% at less than 767px
Column 2
33% at more than 767px
100% at less than 767px
Column 3
33% at more than 767px
100% at less than 767px

Panel headings with buttons

Panel heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod sodales leo, at vestibulum purus viverra vitae. Mauris in aliquam erat, eget cursus dolor. Mauris laoreet tempor ligula in sodales. Duis auctor facilisis elit in congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod sodales leo, at vestibulum purus viverra vitae. Mauris in aliquam erat, eget cursus dolor. Mauris laoreet tempor ligula in sodales. Duis auctor facilisis elit in congue.

Panel headings with pills

Panel heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod sodales leo, at vestibulum purus viverra vitae. Mauris in aliquam erat, eget cursus dolor. Mauris laoreet tempor ligula in sodales. Duis auctor facilisis elit in congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod sodales leo, at vestibulum purus viverra vitae. Mauris in aliquam erat, eget cursus dolor. Mauris laoreet tempor ligula in sodales. Duis auctor facilisis elit in congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod sodales leo, at vestibulum purus viverra vitae. Mauris in aliquam erat, eget cursus dolor. Mauris laoreet tempor ligula in sodales. Duis auctor facilisis elit in congue.