BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon


MetLife's grid system is based on Bootstrap and is fully responsive from desktop through phone viewports.

Grid Sizes

Grids are designed to hold cards: multiple small containers of information that serve as entry points to more detailed information. A card can fill several columns of the grid and can "flip" and expand across all columns to show more detailed information.

The desktop grid (based on 1200px width) is 12 columns of 70px each, with 15px padding at either side of the viewport and 30px gutters.

Since column widths are fluid (but padding and gutters are fixed widths):

  • • 12 columns for views from 980px and up
  • • 8 columns for views from 979px to 769px
  • • 6 columns from 768px to 421px
  • • Below 420px the grid changes to single column

Desktop container sizes for illustrative purposes:


Grid Gutter

Our grid columns have a 15px padding on either side that results in a 30px gutter between columns and a 15px gutter on the grid edges. Even though our columns are fluid, the gutter remains constant.

Mixed Grid

This layout shows how container sizes can be mixed on a single page (most relevant to marketing sites.)

Servicing Grid

Desktop Grid
Tablet Grid
Mobile Grid