Common layouts

Three column layout that breaks to a single column on medium-width screens and smaller.

1/3
1/3
1/3

Specify one column to be 1/3 width, let the other column take up the rest of the space, and break to a single column on medium-width screens and smaller.

2/3
1/3

More items than will fit in a single row, but you know you want 1/2 width columns on medium-width screens or larger.

1/2
1/2
1/2
1/2

Adding images or icons that float to the left of a block of text

A cat that doubts your ideas.

This is a headline

Here’s some body text that is very interesting and is much accentuated by having that cool image or icon to the side.

Vertically centering that image

A cat that doubts your ideas.

Nullam a volutpat urna, nec posuere dui. Cras quis tortor eget sapien ultricies mollis vel non massa. Aenean accumsan vitae ex et pretium. Maecenas in ipsum non sapien tincidunt scelerisque consequat non turpis. Duis accumsan nisl sit amet sodales vestibulum. Pellentesque in nunc elit. Donec vulputate blandit nunc, quis eleifend leo hendrerit a. Phasellus turpis libero, bibendum ut luctus lacinia, euismod nec nisi. Nullam a volutpat urna, nec posuere dui. Cras quis tortor eget sapien ultricies mollis vel non massa. Aenean accumsan vitae ex et pretium. Maecenas in ipsum non sapien tincidunt scelerisque consequat non turpis. Duis accumsan nisl sit amet sodales vestibulum. Pellentesque in nunc elit. Donec vulputate blandit nunc, quis eleifend leo hendrerit a. Phasellus turpis libero, bibendum ut luctus lacinia, euismod nec nisi.

Put the image to the right

A cat that doubts your ideas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet blandit lacus. Proin bibendum eros ut turpis tempor finibus. Vivamus ac scelerisque lectus. Nullam in justo vel mauris fermentum tempus.