PCAB Style Guide
Headline One <h1>
Headline Two <h2>
Headline Three <h3>
Headline Four <h4>
Intro Text - (class="intro-text") 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
Class - "callout"
Add emphasis to text by using the "Callout" class.
Column layout options using Bootstrap columns
Columns must be contained inside a row div class="row"
. Columns are designed to collapse and stack when viewed on a phone.
Two Third Layout
div class="col-md-8"
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.
One Third Column Layout
div class="col-md-4"
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.
Two Column Layout
div class="col-md-6"
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.
Two Column Layout
div class="col-md-6"
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.
Three Column Layout
div class="col-md-4"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est.
Three Column Layout
div class="col-md-4"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est.
Three Column Layout
div class="col-md-4"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est.
Medium column - resize browser to see difference
Four Column Layout
div class="col-md-3"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est.
Four Column Layout
div class="col-md-3"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est.
Four Column Layout
div class="col-md-3"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est.
Four Column Layout
div class="col-md-3"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua tu etiam inprudens utebare non numquam. Eadem nunc mea adversum te oratio est.
Extra small column - resize browser to see difference
Use col-xs (extra small) when you want the column to hold up on small device.
Four Column Layout
div class="col-xs-3"
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.
Four Column Layout
div class="col-xs-3"
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.
Four Column Layout
div class="col-xs-3"
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.
Four Column Layout
div class="col-xs-3"
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.
Responsive Table
Wrap table in div: div class="table-responsive"
Add 'table' class to table: table class="table"
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 |