Style Guide
Headline One <h1>
Headline Two <h2>
Headline Three <h3>
Headline Four <h4>
View Style guide without left portlet here (to see layout styles fullwidth).
Intro Text - (class="lead") Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est. Quam ob rem tandem, inquit, non satisfacit? Dicam, inquam, et quidem discendi causa magis, quam quo te aut Epicurum reprehensum velim. Quare attende, quaeso.
Id enim volumus, id contendimus, ut officii fructus sit ipsum officium. Quod cum accidisset ut alter alterum necopinato videremus, surrexit statim. Nosti, credo, illud: Nemo pius est, qui pietatem-; Scaevolam M. Suam denique cuique naturam esse ad vivendum ducem. Hoc enim identidem dicitis, non intellegere nos quam dicatis voluptatem. Erat enim Polemonis. Num quid tale Democritus?
Duo Reges: constructio interrete. Nullus est igitur cuiusquam dies natalis. Sed in rebus apertissimis nimium longi sumus. Illa videamus, quae a te de amicitia dicta sunt. Sequitur disserendi ratio cognitioque naturae; Ille enim occurrentia nescio quae comminiscebatur; Quid enim de amicitia statueris utilitatis causa expetenda vides.
Bulleted List
- Item One
- Item Two
- Item Three
- Item Four
Ordered List
- Item One
- Item Two
- Item Three
- Item Four
Layout Options
Always enclose columns within a new row. div class="row-fluid" Remember to close the row.
Columns will stack on mobile devices.
Please note that the layout options are achieved using text view only. A basic understanding of HTML is required. Switch to "Textile" format using the Text Format option at the top right of the editor window.
Two column layout
div class="span6"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis.
Two column layout
div class="span6" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis.
Three column layout
div class="span4"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis.
Three column layout
div class="span4" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis.
Three column layout
div class="span4"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis.
Four column layout
div class="span3"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque.
Four column layout
div class="span3"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque.
Four column layout
div class="span3" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque.
Four column layout
div class="span3" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque.
One-third column layout
div class="span4" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque.
Two third column layout
div class="span8" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque.
Two third column layout
div class="span8" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque.
One-third column layout
div class="span4" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque.
Three-fourth column layout
div class="span9" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque.
One-fourth column layout
div class="span3" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Libero enim sed faucibus turpis in eu mi bibendum neque.
Responsive Table
Add 'table responsive' class to table: table class="table responsive"
| Header One | Header Two | Header Three | Header Four |
|---|---|---|---|
| Column One | Column Two | Column Three | Column Four |
| Column One | Column Two | Column Three | Column Four |
| Column One | Column Two | Column Three | Column Four |
Positioning Images
This image is positioned left and the size is 'large'. The description field becomes the caption.
Image sizes:
This image is positioned right and the size is 'preview'. Added a 'clearing' div between the two images to stop them from stacking.