Content Styling based on grid system
FOR ADVANCED CONTENT CREATORS ONLY.
If you can code with HTML, you can use the reference page below to create more sophisticated multi-column, but mobile compatible content.
You will notice how the columns adapt as you shrink or widen the browser window.
Click here to see the HTML code that created the sections.
This will open a new browser tab with the code, which you can copy and paste into your articles and fill in the Lorem Ipsum text with your own content.
12 Grid (1 column across the page)
Eget tincidunt est proin, imperdiet nec leo nisl tellus morbi, ac vitae nec est ultricies integer. Tristique pellentesque ut vestibulum quis quam ornare, lorem ipsum tristique nunc massa veritatis augue. Ultricies volutpat aenean ante non, lorem proin quis velit, est ullamcorper dui nullam diam integer, mi non felis posuere in eget. Magna turpis ullamcorper, eu cras aliquam purus laoreet, dis tellus, euismod dui in. Nec pretium aliquet sed consectetuer hendrerit, est morbi blandit semper, laoreet ornare in suscipit pellentesque erat amet. Euismod leo pharetra tristique nulla, nec vitae. A quisque faucibus. Erat sapien nam quam, vehicula egestas elit pellentesque vitae vel nam, ac lacus enim cras sagittis, ipsum accumsan rutrum nibh vitae sodales. Ipsum mauris mauris et. Eu ut, dictum commodo, enim duis etiam consequat donec torquent, ridiculus vitae eu. Sodales ac, et ante imperdiet, habitant nunc auctor dapibus bibendum lectus, adipiscing odio ac non nunc pede aenean. Dignissim velit condimentum, quis metus posuere sed et nulla, vulputate eget commodi commodo, aliquam nullam, wisi magna ac pretium montes. Vitae suspendisse sit accumsan sed eget neque, vestibulum ac wisi commodo sodales scelerisqu
6 Grid + 6 Grid (2 column even)
Column #1
Ultricies purus vestibulum feugiat lectus, dui dapibus, et velit ad lorem nibh, libero eget ligula enim donec, orci omnis vulputate porta lacinia. Gravida orci, ipsum lacinia, varius duis tincidunt, eget semper integer sed. Placerat sit pulvinar fringilla parturient dictum netus, pellentesque ultricies magna vitae at est id. Dignissim diam id nulla odio, aliquet lorem, et faucibus elementum, vel quis facilisis mattis molestie nec dis, hac justo maecenas quis eget dolor dapibus.
Ultricies purus vestibulum feugiat lectus, dui dapibus, et velit ad lorem nibh, libero eget ligula enim donec, orci omnis vulputate porta lacinia. Gravida orci, ipsum lacinia, varius duis tincidunt, eget semper integer sed. Placerat sit pulvinar fringilla parturient dictum netus, pellentesque ultricies magna vitae at est id. Dignissim diam id nulla odio, aliquet lorem, et faucibus elementum, vel quis facilisis mattis molestie nec dis, hac justo maecenas quis eget dolor dapibus.
Column #2
Ultricies purus vestibulum feugiat lectus, dui dapibus, et velit ad lorem nibh, libero eget ligula enim donec, orci omnis vulputate porta lacinia. Gravida orci, ipsum lacinia, varius duis tincidunt, eget semper integer sed. Placerat sit pulvinar fringilla parturient dictum netus, pellentesque ultricies magna vitae at est id. Dignissim diam id nulla odio, aliquet lorem, et faucibus elementum, vel quis facilisis mattis molestie nec dis, hac justo maecenas quis eget dolor dapibus.
Ultricies purus vestibulum feugiat lectus, dui dapibus, et velit ad lorem nibh, libero eget ligula enim donec, orci omnis vulputate porta lacinia. Gravida orci, ipsum lacinia, varius duis tincidunt, eget semper integer sed. Placerat sit pulvinar fringilla parturient dictum netus, pellentesque ultricies magna vitae at est id. Dignissim diam id nulla odio, aliquet lorem, et faucibus elementum, vel quis facilisis mattis molestie nec dis, hac justo maecenas quis eget dolor dapibus.
4 Grid + 8 Grid (2 column 30% by 70%)
Column #1
Ultricies purus vestibulum feugiat lectus, dui dapibus, et velit ad lorem nibh, libero eget ligula enim donec, orci omnis vulputate porta lacinia. Gravida orci, ipsum lacinia, varius duis tincidunt,
Ultricies purus vestibulum feugiat lectus, dui dapibus, et velit ad lorem nibh, libero eget ligula enim donec, orci omnis vulputate porta lacinia. Gravida orci, ipsum lacinia, varius duis tincidunt,
Column #2
Ultricies purus vestibulum feugiat lectus, dui dapibus, et velit ad lorem nibh, libero eget ligula enim donec, orci omnis vulputate porta lacinia. Gravida orci, ipsum lacinia, varius duis tincidunt, eget semper integer sed. Placerat sit pulvinar fringilla parturient dictum netus, pellentesque ultricies magna vitae at est id. Dignissim diam id nulla odio, aliquet lorem, et faucibus elementum, vel quis facilisis mattis molestie nec dis, hac justo maecenas quis eget dolor dapibus.
Ultricies purus vestibulum feugiat lectus, dui dapibus, et velit ad lorem nibh, libero eget ligula enim donec, orci omnis vulputate porta lacinia. Gravida orci, ipsum lacinia, varius duis tincidunt, eget semper integer sed. Placerat sit pulvinar fringilla parturient dictum netus, pellentesque ultricies magna vitae at est id. Dignissim diam id nulla odio, aliquet lorem, et faucibus elementum, vel quis facilisis mattis molestie nec dis, hac justo maecenas quis eget dolor dapibus.
4 + 4 + 4 Grid (3 column even)
Column #1
Ultricies purus vestibulum feugiat lectus, dui dapibus, et velit ad lorem nibh, libero eget ligula enim donec, orci omnis vulputate porta lacinia. Gravida orci, ipsum lacinia, varius duis tincidunt, eget semper integer sed. Placerat sit pulvinar fringilla parturient dictum netus, pellentesque ultricies magna vitae at est id. Dignissim diam id nulla odio, aliquet lorem, et faucibus elementum, vel quis facilisis mattis molestie nec dis, hac justo maecenas quis eget dolor dapibus.
Ultricies purus vestibulum feugiat lectus, dui dapibus, et velit ad lorem nibh, libero eget ligula enim donec, orci omnis vulputate porta lacinia. Gravida orci, ipsum lacinia, varius duis tincidunt, eget semper integer sed. Placerat sit pulvinar fringilla parturient dictum netus, pellentesque ultricies magna vitae at est id. Dignissim diam id nulla odio, aliquet lorem, et faucibus elementum, vel quis facilisis mattis molestie nec dis, hac justo maecenas quis eget dolor dapibus.
Column #2
Ultricies purus vestibulum feugiat lectus, dui dapibus, et velit ad lorem nibh, libero eget ligula enim donec, orci omnis vulputate porta lacinia. Gravida orci, ipsum lacinia, varius duis tincidunt, eget semper integer sed. Placerat sit pulvinar fringilla parturient dictum netus, pellentesque ultricies magna vitae at est id. Dignissim diam id nulla odio, aliquet lorem, et faucibus elementum, vel quis facilisis mattis molestie nec dis, hac justo maecenas quis eget dolor dapibus.
Ultricies purus vestibulum feugiat lectus, dui dapibus, et velit ad lorem nibh, libero eget ligula enim donec, orci omnis vulputate porta lacinia. Gravida orci, ipsum lacinia, varius duis tincidunt, eget semper integer sed. Placerat sit pulvinar fringilla parturient dictum netus, pellentesque ultricies magna vitae at est id. Dignissim diam id nulla odio, aliquet lorem, et faucibus elementum, vel quis facilisis mattis molestie nec dis, hac justo maecenas quis eget dolor dapibus.
Column #3
Ultricies purus vestibulum feugiat lectus, dui dapibus, et velit ad lorem nibh, libero eget ligula enim donec, orci omnis vulputate porta lacinia. Gravida orci, ipsum lacinia, varius duis tincidunt, eget semper integer sed. Placerat sit pulvinar fringilla parturient dictum netus, pellentesque ultricies magna vitae at est id. Dignissim diam id nulla odio, aliquet lorem, et faucibus elementum, vel quis facilisis mattis molestie nec dis, hac justo maecenas quis eget dolor dapibus.
Ultricies purus vestibulum feugiat lectus, dui dapibus, et velit ad lorem nibh, libero eget ligula enim donec, orci omnis vulputate porta lacinia. Gravida orci, ipsum lacinia, varius duis tincidunt, eget semper integer sed. Placerat sit pulvinar fringilla parturient dictum netus, pellentesque ultricies magna vitae at est id. Dignissim diam id nulla odio, aliquet lorem, et faucibus elementum, vel quis facilisis mattis molestie nec dis, hac justo maecenas quis eget dolor dapibus.
2 + 2 + 4 +4 Grid (4 column - 2 Small - 2 wide)
two columns
Erat sapien nam quam, vehicula egestas elit pellentesque vitae vel nam, ac lacus enim cras sagittis, ipsum accumsan rutrum nibh vitae sodales. Ipsum mauris mauris et. Eu ut, dictum commodo, enim duis etiam consequat donec torquent, ridiculus vitae eu.
Erat sapien nam quam, vehicula egestas elit pellentesque vitae vel nam, ac lacus enim cras sagittis, ipsum accumsan rutrum nibh vitae sodales. Ipsum mauris mauris et. Eu ut, dictum commodo, enim duis etiam consequat donec torquent, ridiculus vitae eu.
two columns
Erat sapien nam quam, vehicula egestas elit pellentesque vitae vel nam, ac lacus enim cras sagittis, ipsum accumsan rutrum nibh vitae sodales. Ipsum mauris mauris et. Eu ut, dictum commodo, enim duis etiam consequat donec torquent, ridiculus vitae eu.
Erat sapien nam quam, vehicula egestas elit pellentesque vitae vel nam, ac lacus enim cras sagittis, ipsum accumsan rutrum nibh vitae sodales. Ipsum mauris mauris et. Eu ut, dictum commodo, enim duis etiam consequat donec torquent, ridiculus vitae eu.
four columns
Erat sapien nam quam, vehicula egestas elit pellentesque vitae vel nam, ac lacus enim cras sagittis, ipsum accumsan rutrum nibh vitae sodales. Ipsum mauris mauris et. Eu ut, dictum commodo, enim duis etiam consequat donec torquent, ridiculus vitae eu. Erat sapien nam quam, vehicula egestas elit pellentesque vitae vel nam, ac lacus enim cras sagittis, ipsum accumsan rutrum nibh vitae sodales. Ipsum mauris mauris et. Eu ut, dictum commodo, enim duis etiam consequat donec torquent, ridiculus vitae eu.
Erat sapien nam quam, vehicula egestas elit pellentesque vitae vel nam, ac lacus enim cras sagittis, ipsum accumsan rutrum nibh vitae sodales. Ipsum mauris mauris et. Eu ut, dictum commodo, enim duis etiam consequat donec torquent, ridiculus vitae eu. Erat sapien nam quam, vehicula egestas elit pellentesque vitae vel nam, ac lacus enim cras sagittis, ipsum accumsan rutrum nibh vitae sodales. Ipsum mauris mauris et. Eu ut, dictum commodo, enim duis etiam consequat donec torquent, ridiculus vitae eu.
four columns
Erat sapien nam quam, vehicula egestas elit pellentesque vitae vel nam, ac lacus enim cras sagittis, ipsum accumsan rutrum nibh vitae sodales. Ipsum mauris mauris et. Eu ut, dictum commodo, enim duis etiam consequat donec torquent, ridiculus vitae eu. Erat sapien nam quam, vehicula egestas elit pellentesque vitae vel nam, ac lacus enim cras sagittis, ipsum accumsan rutrum nibh vitae sodales. Ipsum mauris mauris et. Eu ut, dictum commodo, enim duis etiam consequat donec torquent, ridiculus vitae eu.Erat sapien nam quam, vehicula egestas elit pellentesque vitae vel nam, ac lacus enim cras sagittis, ipsum accumsan rutrum nibh vitae sodales. Ipsum mauris mauris et. Eu ut, dictum commodo, enim duis etiam consequat donec torquent, ridiculus vitae eu.
Erat sapien nam quam, vehicula egestas elit pellentesque vitae vel nam, ac lacus enim cras sagittis, ipsum accumsan rutrum nibh vitae sodales. Ipsum mauris mauris et. Eu ut, dictum commodo, enim duis etiam consequat donec torquent, ridiculus vitae eu. Erat sapien nam quam, vehicula egestas elit pellentesque vitae vel nam, ac lacus enim cras sagittis, ipsum accumsan rutrum nibh vitae sodales. Ipsum mauris mauris et. Eu ut, dictum commodo, enim duis etiam consequat donec torquent, ridiculus vitae eu.Erat sapien nam quam, vehicula egestas elit pellentesque vitae vel nam, ac lacus enim cras sagittis, ipsum accumsan rutrum nibh vitae sodales. Ipsum mauris mauris et. Eu ut, dictum commodo, enim duis etiam consequat donec torquent, ridiculus vitae eu.
Custom List Style #1
Custom List Style #2
Block Quote Left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous Source Title
Block Quote right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous Source Title
Description Lists
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Making Buttons - Go in paragraph tags
Large collection of available ICONS
- Download icon in H1 tag
- Facebook Icon in Paragraph tag
See the full set available at this link: http://fortawesome.github.io/Font-Awesome/icons/