Base Layers Kitchen Sink 🛀
Buttons
Left aligned
Center aligned
Right aligned
Justified
Disabled
Text Alignment
Left aligned
All
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
Desktop only
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
Center aligned
All
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
Desktop only
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
Right aligned
All
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
Desktop only
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
Justified
All
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
Desktop only
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
Font size
xxxs - The quick brown fox jumped over the lazy dog
xxs - The quick brown fox jumped over the lazy dog
xs - The quick brown fox jumped over the lazy dog
sm - The quick brown fox jumped over the lazy dog
md - The quick brown fox jumped over the lazy dog
lg - The quick brown fox jumped over the lazy dog
xl - The quick brown fox jumped over the lazy dog
xxl - The quick brown fox jumped over the lazy dog
xxxl - The quick brown fox jumped over the lazy dog
Responsive font sizes
This changes size depending on the breakpoint
Grid Column Offsets
You can use .col-<bp>-push-<number>
to push and pull columns. This can be used to center a layout, e.g.
a 10/12 centered layout, or to create an overlapping magazine-style layout.
Creating a 10/12 centered layout is easier without using offsets,
you can add the class row--center, e.g.
row row--center like the font size section above.
You can see the columns layout with the Base Layers Chrome extension .
col-xs-12 col-md-3 col-md-push-1
col-xs-12 col-md-4 col-md-pull-1
col-xs-12 col-md-4 col-md-pull-1
col-xs-12 col-md-3 col-md-pull-2