Layout

All columns are wrapped in a full-width row div! For centred splits see the correct wrap divs.

16 columns class="sixteen columns column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum ante posuere eget. Nunc dictum nisi vel nibh rhoncus pharetra. Duis felis felis, auctor semper nisl eget, interdum lacinia nisi. Donec tortor nibh, fringilla at mauris a, porttitor interdum ligula. Suspendisse non odio id nisl facilisis dapibus.

12 columns centered class="twelve columns column-layout column-centered"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum ante posuere eget. Nunc dictum nisi vel nibh rhoncus pharetra. Duis felis felis, auctor semper nisl eget, interdum lacinia nisi. Donec tortor nibh, fringilla at mauris a, porttitor interdum ligula. Suspendisse non odio id nisl facilisis dapibus.

8 columns centered class="eight columns column-layout column-centered"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum ante posuere eget. Nunc dictum nisi vel nibh rhoncus pharetra. Duis felis felis, auctor semper nisl eget, interdum lacinia nisi. Donec tortor nibh, fringilla at mauris a, porttitor interdum ligula. Suspendisse non odio id nisl facilisis dapibus.

6 columns centered class="six columns column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum ante posuere eget. Nunc dictum nisi vel nibh rhoncus pharetra. Duis felis felis, auctor semper nisl eget, interdum lacinia nisi. Donec tortor nibh, fringilla at mauris a, porttitor interdum ligula. Suspendisse non odio id nisl facilisis dapibus.

6 columns centered class="six columns column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum ante posuere eget. Nunc dictum nisi vel nibh rhoncus pharetra. Duis felis felis, auctor semper nisl eget, interdum lacinia nisi. Donec tortor nibh, fringilla at mauris a, porttitor interdum ligula. Suspendisse non odio id nisl facilisis dapibus.

4 columns centered class="four columns column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum ante posuere eget. Nunc dictum nisi vel nibh rhoncus pharetra. Duis felis felis, auctor semper nisl eget, interdum lacinia nisi. Donec tortor nibh, fringilla at mauris a, porttitor interdum ligula. Suspendisse non odio id nisl facilisis dapibus.

4 columns centered class="four columns column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum ante posuere eget. Nunc dictum nisi vel nibh rhoncus pharetra. Duis felis felis, auctor semper nisl eget, interdum lacinia nisi. Donec tortor nibh, fringilla at mauris a, porttitor interdum ligula. Suspendisse non odio id nisl facilisis dapibus.

4 columns centered class="four columns column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum ante posuere eget. Nunc dictum nisi vel nibh rhoncus pharetra. Duis felis felis, auctor semper nisl eget, interdum lacinia nisi. Donec tortor nibh, fringilla at mauris a, porttitor interdum ligula. Suspendisse non odio id nisl facilisis dapibus.

5 columns centered class="five columns column-layout"

Blah Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum ante posuere eget. Nunc dictum nisi vel nibh rhoncus pharetra. Duis felis felis, auctor semper nisl eget, interdum lacinia nisi. Donec tortor nibh, fringilla at mauris a, porttitor interdum ligula. Suspendisse non odio id nisl facilisis dapibus.

5 columns centered class="five columns column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum ante posuere eget. Nunc dictum nisi vel nibh rhoncus pharetra. Duis felis felis, auctor semper nisl eget, interdum lacinia nisi. Donec tortor nibh, fringilla at mauris a, porttitor interdum ligula. Suspendisse non odio id nisl facilisis dapibus.

5 columns centered class="five columns column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum ante posuere eget. Nunc dictum nisi vel nibh rhoncus pharetra. Duis felis felis, auctor semper nisl eget, interdum lacinia nisi. Donec tortor nibh, fringilla at mauris a, porttitor interdum ligula. Suspendisse non odio id nisl facilisis dapibus.

8 columns 8:8 class="eight columns column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum ante posuere eget. Nunc dictum nisi vel nibh rhoncus pharetra. Duis felis felis, auctor semper nisl eget, interdum lacinia nisi. Donec tortor nibh, fringilla at mauris a, porttitor interdum ligula. Suspendisse non odio id nisl facilisis dapibus.

8 columns 8:8 class="eight columns column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum ante posuere eget. Nunc dictum nisi vel nibh rhoncus pharetra. Duis felis felis, auctor semper nisl eget, interdum lacinia nisi. Donec tortor nibh, fringilla at mauris a, porttitor interdum ligula. Suspendisse non odio id nisl facilisis dapibus.

10 columns 10:6 class="ten columns column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum ante posuere eget. Nunc dictum nisi vel nibh rhoncus pharetra. Duis felis felis, auctor semper nisl eget, interdum lacinia nisi. Donec tortor nibh, fringilla at mauris a, porttitor interdum ligula.

6 columns 10:6 class="six columns column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum.

6 columns 6:10 class="six columns column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum ante posuere eget. Nunc dictum nisi vel nibh rhoncus pharetra. Duis felis felis, auctor semper nisl eget, interdum lacinia nisi. Donec tortor nibh, fringilla at mauris a, porttitor interdum ligula.

10 columns 6:10 class="10 columns column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum.

4 columns 4:4:4:4 class="four columns column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum ante posuere eget. Nunc dictum nisi vel nibh rhoncus pharetra. Duis felis felis, auctor semper nisl eget, interdum lacinia nisi. Donec tortor nibh, fringilla at mauris a, porttitor interdum ligula. Suspendisse non odio id nisl facilisis dapibus.

4 columns 4:4:4:4 class="four columns column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum ante posuere eget. Nunc dictum nisi vel nibh rhoncus pharetra. Duis felis felis, auctor semper nisl eget, interdum lacinia nisi. Donec tortor nibh, fringilla at mauris a, porttitor interdum ligula. Suspendisse non odio id nisl facilisis dapibus.

4 columns 4:4:4:4 class="four columns column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum ante posuere eget. Nunc dictum nisi vel nibh rhoncus pharetra. Duis felis felis, auctor semper nisl eget, interdum lacinia nisi. Donec tortor nibh, fringilla at mauris a, porttitor interdum ligula. Suspendisse non odio id nisl facilisis dapibus.

4 columns 4:4:4:4 class="four columns column-layout"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus sollicitudin sodales. Cras eget erat vitae orci sollicitudin dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque nibh velit, at elementum ante posuere eget. Nunc dictum nisi vel nibh rhoncus pharetra. Duis felis felis, auctor semper nisl eget, interdum lacinia nisi. Donec tortor nibh, fringilla at mauris a, porttitor interdum ligula. Suspendisse non odio id nisl facilisis dapibus.