Skip to content

Elements:Colours Utils

Useful colour classes for making text and blocks stand out or fade in.

Text Colours

White text has background colour so it can be seen.

.text-muted Esca imputo melior quia singularis tamen.

.text-primary Nibh proprius quadrum ratis sagaciter turpis verto.

.text-info Blandit modo volutpat. Ex lenis lucidus saepius vulpes.

.text-success Conventio facilisi lenis probo refoveo roto ut.

.text-warning Defui eu paratus plaga populus saluto uxor vicis.

.text-danger Aptent eu ullamcorper voco. Appellatio dolus eligo ex mauris ymo.

.text-white Amet antehabeo eros sudo tum utinam.

.text-dark Aliquam at brevitas jus odio probo validus vereor vero virtus.

.text-light Abbas et facilisis illum patria premo suscipere valde velit.

.text-grey Augue cogo eros esca lobortis minim verto.

.text-grey-dark Adipiscing damnum dignissim elit exputo nisl proprius quis.

.text-primary-faded Distineo enim hos premo sagaciter ulciscor.

.text-primary-dark Abluo autem consequat euismod inhibeo praesent.

.text-green Aliquip amet illum incassum quidne. Abico accumsan augue ex huic illum vero.

.text-red Immitto macto nulla quibus. Similis torqueo usitas verto voco wisi.

.text-blue Dolus humo luptatum. Bene mauris patria pneum.

.text-purple Abdo eum similis. Abluo at augue ibidem imputo inhibeo saepius sagaciter usitas venio.

.text-pink Esse neo odio olim wisi. Feugiat imputo iusto letalis loquor os utrum.

.text-orange Praemitto premo velit. Haero molior torqueo.

.text-lime Dignissim feugiat macto utinam. Acsi minim sudo ullamcorper.

.text-blue-dark Brevitas genitus neque quia sagaciter utinam.

.text-red-dark Quidem refero sit ulciscor. Abico abluo dignissim exerci iaceo inhibeo nisl populus refoveo.

.text-brown Autem gemino oppeto pala ratis saepius te utrum.

.text-cyan-dark Bene conventio eum imputo nimis scisco venio vulpes.

.text-yellow Ad adipiscing diam feugiat jus nostrud odio.

.text-slate Huic ideo iusto rusticus torqueo typicus valetudo.

.text-olive Genitus illum plaga tamen. Cui duis feugiat neo nimis praesent.

.text-teal Abico abigo accumsan eum in premo typicus voco.

.text-green-bright Exputo loquor saepius zelus. Enim jugis jus paratus.


Link Colours

White text has background colour so it can be seen.

.text-muted .text-primary .text-info .text-success .text-warning .text-danger .text-dark .text-light .text-grey .text-grey-dark .text-primary-faded .text-primary-dark .text-green .text-red .text-blue .text-purple .text-pink .text-orange .text-lime .text-blue-dark .text-red-dark .text-brown .text-cyan-dark .text-yellow .text-slate .text-olive .text-teal .text-green-bright

Background Colours

There are also a number of background colour classes which can be combined with the text colour classes above to provide contract.

.bg-faded Aliquip amet comis dolus meus minim nimis praemitto tego verto.

.bg-grey Abigo damnum diam dolor genitus iriure mauris nobis obruo vulputate.

.bg-grey-dark Comis dolore inhibeo mos nobis ratis secundum si uxor virtus.

.bg-primary Haero ideo melior roto sagaciter turpis.

.bg-primary-faded Dolore gemino ille iustum quidne secundum singularis vulpes.

.bg-primary-dark Aliquip consequat enim exerci nostrud quidne tum utrum voco.

.bg-info Gravis iaceo paulatim secundum turpis. Esca genitus ille jugis modo quidem tum ullamcorper ut virtus.

.bg-success Aliquam autem iustum obruo patria plaga probo quis saepius tation.

.bg-warning Diam occuro quia te. Decet dolore gravis jus paulatim tation tego.

.bg-danger Dolus eum nutus quidne uxor. Dignissim erat luctus saluto.

.bg-dark Commodo modo persto. Ad esca importunus incassum ludus praesent tincidunt.

.bg-light Aliquam gilvus lucidus luctus sino. Conventio eligo et nimis utrum.

.bg-shadow Duis suscipit tamen. Erat minim probo vicis.

.bg-gradient Commodo diam et exerci ludus metuo suscipere.

.bg-gradient-flip Abico eu probo suscipit usitas. Aptent fere jumentum praemitto scisco.

.bg-green Decet distineo eros esca et exerci minim qui quidne.

.bg-red Commodo consequat eros gemino illum plaga quia saluto torqueo valde.

.bg-blue Eros exerci iriure nunc pertineo torqueo virtus ymo.

.bg-purple Abigo ad causa dolore exerci neque probo vicis voco ymo.

.bg-pink Acsi amet camur damnum proprius. Cui dolor luptatum ratis sagaciter valde.

.bg-orange Acsi loquor quibus. Modo quibus sit utinam.

.bg-lime Aptent dolor hos occuro pneum typicus verto zelus.

.bg-blue-dark Blandit commodo dignissim in incassum melior nulla nutus refero saluto.

.bg-red-dark Cui elit hendrerit jus ludus si sudo tamen utinam.

.bg-brown Abdo accumsan augue causa ea incassum inhibeo paulatim tego typicus.

.bg-cyan-dark Abigo augue interdico lenis sino. Incassum lucidus melior persto similis wisi.

.bg-yellow Defui pneum tamen. Aliquam humo in natu nobis quae sudo.

.bg-slate Acsi commoveo gemino hendrerit metuo neo torqueo ullamcorper ymo zelus.

.bg-olive Antehabeo dolor uxor volutpat. Euismod immitto modo quidem tego ullamcorper verto.

.bg-teal Antehabeo facilisi ludus mauris nibh pecus venio volutpat.

.bg-green-bright Acsi defui occuro pala utinam vulpes.


Background Colour Opacity

Control background colour opacity using the .bg-op-(1-9) classes for ultimate control over background colours.

.bg-op-1 + .bg-faded Dolore ibidem loquor. Brevitas eum feugiat illum melior.

.bg-op-2 + .bg-faded Ad eum facilisi fere olim pneum praesent wisi.

.bg-op-3 + .bg-faded Antehabeo importunus pecus vulpes.

.bg-op-4 + .bg-faded Antehabeo aptent sed suscipit ut.

.bg-op-5 + .bg-faded Facilisis hos lobortis loquor luptatum mauris metuo persto quibus.

.bg-op-6 + .bg-faded Commoveo fere inhibeo jumentum nutus plaga.

.bg-op-7 + .bg-faded Abbas ludus melior secundum verto.

.bg-op-8 + .bg-faded Ad blandit duis et ludus qui sino usitas ymo.

.bg-op-9 + .bg-faded Eligo mauris saluto ullamcorper validus.

.bg-op-1 + .bg-grey Accumsan commoveo quibus verto virtus.

.bg-op-2 + .bg-grey Aptent duis enim facilisis nutus quis validus vero.

.bg-op-3 + .bg-grey Bene cui ex exerci interdico modo sudo venio.

.bg-op-4 + .bg-grey Ex gemino immitto olim quis.

.bg-op-5 + .bg-grey Nunc olim pertineo suscipere.

.bg-op-6 + .bg-grey Camur jus modo nunc pneum.

.bg-op-7 + .bg-grey Autem defui luctus patria sit sudo validus vicis zelus.

.bg-op-8 + .bg-grey Abdo conventio melior saepius.

.bg-op-9 + .bg-grey Decet dolus enim gravis iriure laoreet metuo vulputate.

.bg-op-1 + .bg-grey-dark Aliquam consequat diam eros gilvus illum importunus nibh olim.

.bg-op-2 + .bg-grey-dark Dolore et ex nobis occuro similis tincidunt vereor volutpat.

.bg-op-3 + .bg-grey-dark Caecus eligo euismod. Abigo interdico metuo nisl paratus ratis utinam vel vicis.

.bg-op-4 + .bg-grey-dark Abigo gilvus incassum letalis nunc occuro pertineo sudo ulciscor.

.bg-op-5 + .bg-grey-dark Enim fere genitus immitto interdico modo refero sino verto ymo.

.bg-op-6 + .bg-grey-dark Brevitas dolus erat nimis uxor verto vindico volutpat.

.bg-op-7 + .bg-grey-dark Exputo feugiat pneum probo suscipere suscipit.

.bg-op-8 + .bg-grey-dark Elit gravis ut venio.

.bg-op-9 + .bg-grey-dark Aptent autem elit eros ut vindico vulpes.

.bg-op-1 + .bg-primary Duis incassum iusto molior.

.bg-op-2 + .bg-primary Acsi consectetuer erat imputo nobis os rusticus secundum sit torqueo.

.bg-op-3 + .bg-primary Causa ideo illum metuo meus nutus occuro sit.

.bg-op-4 + .bg-primary Decet diam et exputo hendrerit qui saluto verto.

.bg-op-5 + .bg-primary Ad aptent haero inhibeo interdico nulla wisi.

.bg-op-6 + .bg-primary Esca et iaceo quia ratis suscipit tation.

.bg-op-7 + .bg-primary Causa conventio dignissim exerci importunus similis.

.bg-op-8 + .bg-primary Aliquam macto proprius vero wisi.

.bg-op-9 + .bg-primary Praemitto secundum tation utrum.

.bg-op-1 + .bg-primary-faded Antehabeo hendrerit laoreet. Caecus cui jugis nutus persto refero.

.bg-op-2 + .bg-primary-faded Facilisis illum in jugis melior praemitto sino tamen verto.

.bg-op-3 + .bg-primary-faded Eros et gravis hos nibh valetudo.

.bg-op-4 + .bg-primary-faded Conventio haero vulpes. Esca roto suscipit.

.bg-op-5 + .bg-primary-faded Commodo consequat dolore exerci ibidem nutus.

.bg-op-6 + .bg-primary-faded Consectetuer eum exerci ideo iustum proprius.

.bg-op-7 + .bg-primary-faded Bene capto genitus laoreet neo valetudo.

.bg-op-8 + .bg-primary-faded Commoveo haero proprius. Gemino meus scisco similis tum.

.bg-op-9 + .bg-primary-faded Eum interdico iustum lobortis nostrud occuro quis refoveo similis vindico.

.bg-op-1 + .bg-primary-dark Abbas comis nostrud utrum volutpat.

.bg-op-2 + .bg-primary-dark Bene letalis odio. Cui eu gilvus nimis occuro verto.

.bg-op-3 + .bg-primary-dark Gemino jus occuro turpis.

.bg-op-4 + .bg-primary-dark Amet humo praemitto quadrum ratis similis suscipere voco.

.bg-op-5 + .bg-primary-dark Abluo praesent si tego vulpes.

.bg-op-6 + .bg-primary-dark Caecus ludus refoveo similis torqueo tum ulciscor verto.

.bg-op-7 + .bg-primary-dark Genitus illum neo obruo zelus.

.bg-op-8 + .bg-primary-dark Iustum olim si. Erat iaceo mauris oppeto pala vel zelus.

.bg-op-9 + .bg-primary-dark Abico consequat enim facilisi magna meus minim refero singularis ulciscor.

.bg-op-1 + .bg-info Luctus ludus nibh oppeto veniam.

.bg-op-2 + .bg-info Facilisis humo ideo illum interdico jugis usitas virtus.

.bg-op-3 + .bg-info Ille nimis nobis plaga populus si.

.bg-op-4 + .bg-info Amet at proprius. Euismod fere persto probo saepius.

.bg-op-5 + .bg-info Ad pagus te. Ad autem fere gemino mos paratus quidem.

.bg-op-6 + .bg-info Diam eros esse interdico natu nobis tego valetudo velit.

.bg-op-7 + .bg-info Ex fere illum importunus modo natu nisl odio sino sit.

.bg-op-8 + .bg-info Proprius qui ut vindico.

.bg-op-9 + .bg-info Consectetuer dignissim eros fere interdico tation.

.bg-op-1 + .bg-success Cogo enim eu inhibeo saluto tincidunt typicus.

.bg-op-2 + .bg-success Cogo dignissim gemino os quidem scisco torqueo veniam vereor voco.

.bg-op-3 + .bg-success Adipiscing brevitas dignissim dolor exerci quia tum.

.bg-op-4 + .bg-success Augue bene commodo pneum refero sudo ulciscor ullamcorper vel.

.bg-op-5 + .bg-success Cogo ulciscor vindico. Ad consequat gemino jus luctus melior metuo nibh similis turpis.

.bg-op-6 + .bg-success Brevitas diam melior utrum virtus.

.bg-op-7 + .bg-success Causa conventio gilvus lenis populus ymo.

.bg-op-8 + .bg-success Abigo haero patria saepius voco.

.bg-op-9 + .bg-success Cogo decet jumentum scisco velit.

.bg-op-1 + .bg-warning Exputo letalis nunc wisi.

.bg-op-2 + .bg-warning Cui pertineo tamen turpis.

.bg-op-3 + .bg-warning Diam gilvus mos quadrum.

.bg-op-4 + .bg-warning Ad eros immitto in mos typicus.

.bg-op-5 + .bg-warning Abluo autem et eum nibh nostrud occuro saluto valetudo zelus.

.bg-op-6 + .bg-warning Acsi gilvus roto suscipit tego tincidunt ymo.

.bg-op-7 + .bg-warning Cogo consectetuer consequat diam enim hos letalis nimis obruo populus.

.bg-op-8 + .bg-warning Abico causa luctus neque nunc sudo suscipit vel verto vindico.

.bg-op-9 + .bg-warning Acsi ea eligo ideo iustum nobis patria tamen.

.bg-op-1 + .bg-danger Aliquam blandit eu exerci odio pertineo refero scisco tincidunt utrum.

.bg-op-2 + .bg-danger Duis incassum jugis pertineo pneum sed similis.

.bg-op-3 + .bg-danger Aliquip eu inhibeo meus pecus refoveo tincidunt.

.bg-op-4 + .bg-danger Antehabeo neo saepius. Immitto modo virtus.

.bg-op-5 + .bg-danger Nisl praemitto refoveo te zelus.

.bg-op-6 + .bg-danger Eu imputo loquor patria ulciscor.

.bg-op-7 + .bg-danger Consectetuer iaceo vicis. Capto elit gilvus importunus laoreet tamen ulciscor.

.bg-op-8 + .bg-danger Aliquip antehabeo comis nostrud rusticus uxor.

.bg-op-9 + .bg-danger Acsi persto turpis. Enim huic in lucidus molior nobis sagaciter.

.bg-op-1 + .bg-dark Ad augue gemino luctus quis rusticus utrum vero.

.bg-op-2 + .bg-dark Autem comis dolor euismod incassum macto os roto utinam.

.bg-op-3 + .bg-dark Decet incassum iusto natu tincidunt.

.bg-op-4 + .bg-dark Elit eum lenis secundum suscipit.

.bg-op-5 + .bg-dark Acsi diam ibidem iustum nostrud ratis torqueo virtus.

.bg-op-6 + .bg-dark Aliquip duis enim euismod patria plaga singularis.

.bg-op-7 + .bg-dark Eligo huic modo nobis plaga turpis valetudo.

.bg-op-8 + .bg-dark Abbas capto elit gravis iustum mauris melior patria quae ut.

.bg-op-9 + .bg-dark Abigo blandit eligo elit facilisi metuo obruo volutpat.

.bg-op-1 + .bg-light Blandit causa dolore gravis persto sudo.

.bg-op-2 + .bg-light Abico augue causa interdico pneum praemitto singularis sino tincidunt venio.

.bg-op-3 + .bg-light Bene defui ea in.

.bg-op-4 + .bg-light Cui facilisis ibidem ideo ille iusto refero tation.

.bg-op-5 + .bg-light Augue huic nostrud. Jumentum letalis lobortis macto olim.

.bg-op-6 + .bg-light Eligo esca macto plaga rusticus vicis vulputate.

.bg-op-7 + .bg-light Adipiscing autem importunus jumentum vereor.

.bg-op-8 + .bg-light Blandit ideo ludus macto persto quae roto tamen tum virtus.

.bg-op-9 + .bg-light Abluo bene eu roto.

.bg-op-1 + .bg-gradient Eum ille ludus neo persto praemitto.

.bg-op-2 + .bg-gradient Dolore lenis pertineo. Comis exerci loquor occuro.

.bg-op-3 + .bg-gradient Cui fere turpis. Facilisis ulciscor vereor.

.bg-op-4 + .bg-gradient Aptent autem ex fere loquor nunc oppeto praemitto quadrum.

.bg-op-5 + .bg-gradient Acsi commoveo exerci fere feugiat typicus.

.bg-op-6 + .bg-gradient Ad augue commoveo dignissim feugiat ideo pecus quadrum.

.bg-op-7 + .bg-gradient Aptent at caecus nunc persto similis valetudo.

.bg-op-8 + .bg-gradient Adipiscing blandit eligo facilisi importunus laoreet pala quae qui.

.bg-op-9 + .bg-gradient Camur quis scisco. Cui molior qui similis.

.bg-op-1 + .bg-gradient-flip Abbas augue esse nisl probo quibus.

.bg-op-2 + .bg-gradient-flip Abluo gravis huic modo persto si utinam.

.bg-op-3 + .bg-gradient-flip Aliquam cogo ea fere ideo rusticus.

.bg-op-4 + .bg-gradient-flip Abdo enim iriure. Caecus defui elit gravis mos neo tum utrum.

.bg-op-5 + .bg-gradient-flip Autem lenis luptatum utinam vereor vulputate.

.bg-op-6 + .bg-gradient-flip Augue nulla occuro persto suscipit ullamcorper verto virtus.

.bg-op-7 + .bg-gradient-flip Diam lucidus nisl oppeto vereor ymo.

.bg-op-8 + .bg-gradient-flip Cogo distineo pagus qui ulciscor.

.bg-op-9 + .bg-gradient-flip Abico autem brevitas camur gravis lobortis macto mauris molior paratus.

.bg-op-1 + .bg-green Iriure pecus proprius valetudo.

.bg-op-2 + .bg-green Capto nutus typicus. Ideo nisl nutus.

.bg-op-3 + .bg-green Abluo brevitas caecus cui defui eum macto occuro.

.bg-op-4 + .bg-green Amet iustum patria secundum tincidunt utrum.

.bg-op-5 + .bg-green Accumsan genitus loquor lucidus quidne saepius voco.

.bg-op-6 + .bg-green Abdo comis esse iaceo.

.bg-op-7 + .bg-green Eu macto natu pneum refoveo secundum velit.

.bg-op-8 + .bg-green Abbas letalis tego voco.

.bg-op-9 + .bg-green Erat immitto jus lucidus meus.

.bg-op-1 + .bg-red Dolore eros suscipit. Et praemitto uxor.

.bg-op-2 + .bg-red Comis duis paulatim populus praesent.

.bg-op-3 + .bg-red Ex exputo hendrerit illum inhibeo ludus si singularis sino typicus.

.bg-op-4 + .bg-red Camur eligo ibidem illum occuro sagaciter ut veniam.

.bg-op-5 + .bg-red Abdo erat et nimis oppeto paulatim praesent typicus vicis.

.bg-op-6 + .bg-red Jugis modo olim. Abbas aliquam dolus facilisi jus quidem quis te ut.

.bg-op-7 + .bg-red Camur esse euismod importunus imputo molior vulpes.

.bg-op-8 + .bg-red Consequat secundum vel. Caecus hos populus quidne similis.

.bg-op-9 + .bg-red Caecus fere humo loquor qui tamen vindico wisi.

.bg-op-1 + .bg-blue Commoveo iaceo quae. Jumentum loquor quibus.

.bg-op-2 + .bg-blue Modo persto probo. Mauris nobis quidem.

.bg-op-3 + .bg-blue Ad commoveo distineo lobortis ludus nisl nunc persto refero verto.

.bg-op-4 + .bg-blue Defui erat facilisi gemino nobis paulatim suscipit tamen vel.

.bg-op-5 + .bg-blue Bene camur esse gilvus mos olim pneum uxor validus verto.

.bg-op-6 + .bg-blue Esca ludus ratis typicus venio.

.bg-op-7 + .bg-blue Facilisis inhibeo praesent uxor.

.bg-op-8 + .bg-blue Abluo acsi elit natu pagus quae quidem venio.

.bg-op-9 + .bg-blue Gravis ibidem incassum quadrum.

.bg-op-1 + .bg-purple Antehabeo diam sit. Accumsan ad at eligo elit melior qui.

.bg-op-2 + .bg-purple Abdo comis genitus ibidem velit.

.bg-op-3 + .bg-purple Appellatio distineo elit exputo facilisi pala quibus vereor vindico.

.bg-op-4 + .bg-purple Exputo feugiat jugis metuo nobis quadrum similis.

.bg-op-5 + .bg-purple Esca huic ulciscor. Caecus erat interdico nostrud quae tation ullamcorper ut.

.bg-op-6 + .bg-purple Importunus jumentum populus. Eros tation vel.

.bg-op-7 + .bg-purple Dolor importunus tincidunt. Esse in tamen.

.bg-op-8 + .bg-purple Amet augue capto illum occuro quidem validus zelus.

.bg-op-9 + .bg-purple Consequat facilisi nostrud voco zelus.

.bg-op-1 + .bg-pink Abluo lobortis magna praesent.

.bg-op-2 + .bg-pink Dolus gemino occuro pala wisi.

.bg-op-3 + .bg-pink Adipiscing consequat genitus incassum iusto iustum pagus refero verto.

.bg-op-4 + .bg-pink Aliquip augue dolor exerci importunus praesent si vel.

.bg-op-5 + .bg-pink Diam imputo macto mos olim persto ulciscor wisi.

.bg-op-6 + .bg-pink Esse iaceo macto nibh os quidne roto vero ymo.

.bg-op-7 + .bg-pink Consectetuer imputo secundum. Abigo duis nibh torqueo ut.

.bg-op-8 + .bg-pink Blandit distineo et. Augue causa incassum jus nimis volutpat.

.bg-op-9 + .bg-pink Antehabeo autem esca jugis nobis nunc torqueo vulpes.

.bg-op-1 + .bg-orange Gravis lenis rusticus saepius.

.bg-op-2 + .bg-orange Enim loquor nimis quibus sudo.

.bg-op-3 + .bg-orange Aliquam nisl pala paratus tego veniam.

.bg-op-4 + .bg-orange Abdo amet caecus ideo persto probo similis tincidunt ullamcorper.

.bg-op-5 + .bg-orange Gilvus ullamcorper vereor vicis.

.bg-op-6 + .bg-orange At eligo importunus iriure jus nobis populus praemitto sudo wisi.

.bg-op-7 + .bg-orange Aliquip antehabeo aptent occuro qui turpis validus.

.bg-op-8 + .bg-orange Cui magna melior modo proprius tincidunt ullamcorper vereor volutpat zelus.

.bg-op-9 + .bg-orange Duis feugiat huic jugis paulatim turpis vicis.

.bg-op-1 + .bg-lime Abdo acsi exerci meus quibus saepius si vero voco.

.bg-op-2 + .bg-lime Esse ideo jus molior quadrum sagaciter vicis.

.bg-op-3 + .bg-lime At commodo humo illum patria.

.bg-op-4 + .bg-lime Iaceo melior refoveo tego.

.bg-op-5 + .bg-lime Causa conventio loquor molior pecus roto rusticus valetudo.

.bg-op-6 + .bg-lime Iriure loquor olim quae vero.

.bg-op-7 + .bg-lime Comis elit praemitto. Consectetuer turpis vulputate.

.bg-op-8 + .bg-lime Commoveo elit euismod nimis persto turpis vulpes zelus.

.bg-op-9 + .bg-lime Camur eum gilvus natu.

.bg-op-1 + .bg-blue-dark Commodo consequat erat esca gemino iaceo pecus tation.

.bg-op-2 + .bg-blue-dark Commoveo eu premo saepius tego tincidunt zelus.

.bg-op-3 + .bg-blue-dark Ea facilisis ibidem nisl tincidunt.

.bg-op-4 + .bg-blue-dark Dolore erat exputo pagus quae refero similis turpis ut validus.

.bg-op-5 + .bg-blue-dark Caecus jus neo nisl olim veniam.

.bg-op-6 + .bg-blue-dark Conventio ille torqueo. Abico damnum persto.

.bg-op-7 + .bg-blue-dark Ad et eu imputo iustum molior neo nimis pala te.

.bg-op-8 + .bg-blue-dark Defui oppeto premo. Causa dolor gilvus pagus proprius ratis.

.bg-op-9 + .bg-blue-dark Abigo acsi elit facilisi turpis verto.

.bg-op-1 + .bg-red-dark Iaceo illum interdico iriure paulatim.

.bg-op-2 + .bg-red-dark Jumentum modo nostrud. Abico dolus gilvus hos ideo turpis.

.bg-op-3 + .bg-red-dark Camur minim pala populus praesent quibus quis tego ymo.

.bg-op-4 + .bg-red-dark Augue consectetuer eu jumentum praesent quidem.

.bg-op-5 + .bg-red-dark Accumsan elit paulatim usitas validus vulputate.

.bg-op-6 + .bg-red-dark Consectetuer incassum iusto lenis praesent quibus refoveo valde.

.bg-op-7 + .bg-red-dark Eligo imputo iriure macto minim suscipere typicus.

.bg-op-8 + .bg-red-dark Adipiscing ille refero valde.

.bg-op-9 + .bg-red-dark Antehabeo hos lobortis. Eros esca imputo iriure nibh quadrum torqueo.

.bg-op-1 + .bg-brown Brevitas consectetuer imputo paulatim sagaciter sed.

.bg-op-2 + .bg-brown Decet immitto sagaciter. Eum qui refero suscipere validus vel venio.

.bg-op-3 + .bg-brown Antehabeo dolor iustum lucidus quidem sit.

.bg-op-4 + .bg-brown Autem caecus commoveo quibus saepius torqueo.

.bg-op-5 + .bg-brown Dolus esca ex gilvus in inhibeo proprius quidem vel.

.bg-op-6 + .bg-brown Comis eligo eu immitto ludus saluto.

.bg-op-7 + .bg-brown Causa magna mauris typicus ut.

.bg-op-8 + .bg-brown Capto dolus et laoreet lucidus mauris nostrud nulla verto vulpes.

.bg-op-9 + .bg-brown Decet nimis paulatim probo sed.

.bg-op-1 + .bg-cyan-dark Cui nimis praemitto probo quia quis torqueo ulciscor utinam.

.bg-op-2 + .bg-cyan-dark At facilisi pala. Capto interdico iusto lenis refoveo valde.

.bg-op-3 + .bg-cyan-dark Praemitto tincidunt vereor. Acsi molior quae quis scisco secundum voco.

.bg-op-4 + .bg-cyan-dark Brevitas ideo meus tincidunt.

.bg-op-5 + .bg-cyan-dark Abbas caecus dolor letalis natu nibh refoveo sit tego tincidunt.

.bg-op-6 + .bg-cyan-dark Immitto quidne tincidunt ullamcorper validus.

.bg-op-7 + .bg-cyan-dark Comis dolore gilvus jugis paulatim quidne typicus.

.bg-op-8 + .bg-cyan-dark Amet dolor esse ex lenis melior minim obruo praemitto.

.bg-op-9 + .bg-cyan-dark Capto dolus elit neo torqueo.

.bg-op-1 + .bg-yellow Aliquam exputo humo metuo pneum populus sagaciter sed tation tincidunt.

.bg-op-2 + .bg-yellow Adipiscing dolus modo neo quidne sino suscipere te typicus verto.

.bg-op-3 + .bg-yellow Augue decet erat luctus nutus quae singularis suscipere usitas utrum.

.bg-op-4 + .bg-yellow Cui fere torqueo venio voco.

.bg-op-5 + .bg-yellow Ad commodo cui duis exputo importunus pala tamen vulpes.

.bg-op-6 + .bg-yellow Bene causa commodo hendrerit iaceo quidne vero.

.bg-op-7 + .bg-yellow Abbas adipiscing natu praesent si.

.bg-op-8 + .bg-yellow Appellatio caecus conventio enim ideo lenis odio praemitto.

.bg-op-9 + .bg-yellow Causa melior quibus ut.

.bg-op-1 + .bg-slate Dignissim loquor refoveo vindico.

.bg-op-2 + .bg-slate Ideo letalis loquor nimis populus utinam.

.bg-op-3 + .bg-slate Mauris utrum validus vulputate.

.bg-op-4 + .bg-slate Adipiscing cogo humo immitto nobis suscipere.

.bg-op-5 + .bg-slate Distineo dolor roto scisco.

.bg-op-6 + .bg-slate Abigo exerci jugis macto paratus wisi.

.bg-op-7 + .bg-slate Eum iriure si. Aliquam augue euismod facilisi gilvus lobortis lucidus rusticus sed.

.bg-op-8 + .bg-slate Augue bene os populus quia.

.bg-op-9 + .bg-slate Cogo immitto nostrud olim pagus sed typicus velit.

.bg-op-1 + .bg-olive Caecus et pertineo. Abigo at jugis suscipere.

.bg-op-2 + .bg-olive Abluo amet at augue causa jumentum occuro si ulciscor.

.bg-op-3 + .bg-olive Blandit eum facilisi huic neo quadrum.

.bg-op-4 + .bg-olive Decet hos huic humo oppeto pneum probo quadrum refoveo ut.

.bg-op-5 + .bg-olive Commodo esse quae venio.

.bg-op-6 + .bg-olive Accumsan aptent eligo et exputo mos natu quae saepius.

.bg-op-7 + .bg-olive Aptent consequat decet quis tincidunt.

.bg-op-8 + .bg-olive Distineo exputo imputo nimis nobis pertineo plaga proprius refoveo saluto.

.bg-op-9 + .bg-olive Commodo consequat hos. Natu pertineo uxor wisi.

.bg-op-1 + .bg-teal Eu gilvus huic jus quadrum ullamcorper.

.bg-op-2 + .bg-teal Dignissim dolus euismod immitto utinam.

.bg-op-3 + .bg-teal Causa decet esca genitus illum in interdico utinam ymo zelus.

.bg-op-4 + .bg-teal Gravis jugis rusticus suscipere uxor valetudo.

.bg-op-5 + .bg-teal Facilisis lobortis meus premo secundum suscipit valde valetudo vicis.

.bg-op-6 + .bg-teal Erat exerci ille importunus meus valetudo.

.bg-op-7 + .bg-teal At eros in jumentum os pertineo similis vulputate.

.bg-op-8 + .bg-teal Abico ad augue cui hos metuo quae vero verto.

.bg-op-9 + .bg-teal Distineo illum nunc persto sudo tum ulciscor.

.bg-op-1 + .bg-green-bright Adipiscing huic iaceo mos nulla pala quadrum valde velit.

.bg-op-2 + .bg-green-bright Amet exputo hendrerit ille illum iusto laoreet qui sed zelus.

.bg-op-3 + .bg-green-bright Adipiscing plaga suscipit. Abico ad bene blandit camur consectetuer jugis luptatum populus velit.

.bg-op-4 + .bg-green-bright Abluo populus verto. Dolore vel velit virtus.

.bg-op-5 + .bg-green-bright Consequat damnum dolor elit fere mos nimis quidne tation voco.

.bg-op-6 + .bg-green-bright Blandit dolore immitto metuo nobis.

.bg-op-7 + .bg-green-bright Abbas iaceo ibidem quia quibus refero volutpat zelus.

.bg-op-8 + .bg-green-bright Abigo commodo genitus letalis lucidus luctus pertineo ratis rusticus secundum.

.bg-op-9 + .bg-green-bright Duis eum lenis lobortis os pecus pertineo pneum te vulputate.


Border Colours

There are also a number of border colour classes which an elements bordered colour to be set.

You can set thicker borders using the border-w-(2-5) classes.

You can also remove borders using the border-0 and border-SIDE-0 classes.

.border-primary Causa duis esse quae singularis ut vereor vero.
.border-info Autem exputo humo iustum jus lenis magna melior ut velit.
.border-success Antehabeo gravis pala. Diam exputo interdico natu.
.border-warning Brevitas causa commoveo incassum modo nutus oppeto vereor.
.border-danger At et os te vereor. Abico commoveo facilisi jugis luctus nimis olim tation tum vindico.
.border-grey Antehabeo blandit dolore genitus ideo luctus pertineo ymo.
.border-grey-dark Facilisi ludus metuo refero ymo. Abdo consequat enim facilisis nutus secundum utinam vel vulputate.
.border-primary-faded Caecus ideo minim nimis. Abdo damnum eligo ex importunus suscipere veniam venio.
.border-primary-dark Mauris refero suscipere tincidunt. Consectetuer dolore huic jus nobis paratus pecus secundum ut.
.border-dark Aliquip aptent duis esse letalis melior roto secundum vero.
.border-light Bene defui dolus eum fere illum lenis ulciscor.
.border-green Euismod exerci melior. Distineo nisl populus velit veniam.
.border-red Ad esca euismod natu nulla nutus paratus vereor zelus.
.border-blue Cui damnum exputo feugiat ibidem scisco singularis vicis.
.border-purple Ea probo rusticus vel vulputate. Dolore imputo nobis sagaciter similis singularis tation ut valde.
.border-pink Genitus iaceo occuro utinam. Consequat dolore jus olim paratus populus refero vicis.
.border-orange Dolus pala vulpes. Antehabeo damnum eu obruo venio.
.border-lime Amet huic iriure pala saluto suscipere tation usitas validus vindico.
.border-blue-dark Gravis mauris occuro olim sagaciter scisco zelus.
.border-red-dark Aptent causa facilisis immitto ludus nimis nutus quadrum valetudo.
.border-brown Abdo in iriure macto occuro premo.
.border-cyan-dark Camur humo paratus valetudo voco ymo.
.border-yellow Blandit dignissim eligo mos natu suscipere vicis volutpat.
.border-slate At importunus laoreet melior mos pecus sagaciter.
.border-olive Aptent consectetuer duis iustum luptatum minim pala paratus.
.border-teal Augue eu immitto macto neque praemitto praesent roto vicis.
.border-green-bright Brevitas dolor esca gravis nobis ratis saepius velit.

Border Colour Opacity

Control border colour opacity using the .border-op-(1-9) classes for ultimate control over border colours.

.border-op-1 + .border-primary

.border-op-2 + .border-primary

.border-op-3 + .border-primary

.border-op-4 + .border-primary

.border-op-5 + .border-primary

.border-op-6 + .border-primary

.border-op-7 + .border-primary

.border-op-8 + .border-primary

.border-op-9 + .border-primary

.border-op-1 + .border-info

.border-op-2 + .border-info

.border-op-3 + .border-info

.border-op-4 + .border-info

.border-op-5 + .border-info

.border-op-6 + .border-info

.border-op-7 + .border-info

.border-op-8 + .border-info

.border-op-9 + .border-info

.border-op-1 + .border-success

.border-op-2 + .border-success

.border-op-3 + .border-success

.border-op-4 + .border-success

.border-op-5 + .border-success

.border-op-6 + .border-success

.border-op-7 + .border-success

.border-op-8 + .border-success

.border-op-9 + .border-success

.border-op-1 + .border-warning

.border-op-2 + .border-warning

.border-op-3 + .border-warning

.border-op-4 + .border-warning

.border-op-5 + .border-warning

.border-op-6 + .border-warning

.border-op-7 + .border-warning

.border-op-8 + .border-warning

.border-op-9 + .border-warning

.border-op-1 + .border-danger

.border-op-2 + .border-danger

.border-op-3 + .border-danger

.border-op-4 + .border-danger

.border-op-5 + .border-danger

.border-op-6 + .border-danger

.border-op-7 + .border-danger

.border-op-8 + .border-danger

.border-op-9 + .border-danger

.border-op-1 + .border-grey

.border-op-2 + .border-grey

.border-op-3 + .border-grey

.border-op-4 + .border-grey

.border-op-5 + .border-grey

.border-op-6 + .border-grey

.border-op-7 + .border-grey

.border-op-8 + .border-grey

.border-op-9 + .border-grey

.border-op-1 + .border-grey-dark

.border-op-2 + .border-grey-dark

.border-op-3 + .border-grey-dark

.border-op-4 + .border-grey-dark

.border-op-5 + .border-grey-dark

.border-op-6 + .border-grey-dark

.border-op-7 + .border-grey-dark

.border-op-8 + .border-grey-dark

.border-op-9 + .border-grey-dark

.border-op-1 + .border-primary-faded

.border-op-2 + .border-primary-faded

.border-op-3 + .border-primary-faded

.border-op-4 + .border-primary-faded

.border-op-5 + .border-primary-faded

.border-op-6 + .border-primary-faded

.border-op-7 + .border-primary-faded

.border-op-8 + .border-primary-faded

.border-op-9 + .border-primary-faded

.border-op-1 + .border-primary-dark

.border-op-2 + .border-primary-dark

.border-op-3 + .border-primary-dark

.border-op-4 + .border-primary-dark

.border-op-5 + .border-primary-dark

.border-op-6 + .border-primary-dark

.border-op-7 + .border-primary-dark

.border-op-8 + .border-primary-dark

.border-op-9 + .border-primary-dark

.border-op-1 + .border-dark

.border-op-2 + .border-dark

.border-op-3 + .border-dark

.border-op-4 + .border-dark

.border-op-5 + .border-dark

.border-op-6 + .border-dark

.border-op-7 + .border-dark

.border-op-8 + .border-dark

.border-op-9 + .border-dark

.border-op-1 + .border-light

.border-op-2 + .border-light

.border-op-3 + .border-light

.border-op-4 + .border-light

.border-op-5 + .border-light

.border-op-6 + .border-light

.border-op-7 + .border-light

.border-op-8 + .border-light

.border-op-9 + .border-light

.border-op-1 + .border-green

.border-op-2 + .border-green

.border-op-3 + .border-green

.border-op-4 + .border-green

.border-op-5 + .border-green

.border-op-6 + .border-green

.border-op-7 + .border-green

.border-op-8 + .border-green

.border-op-9 + .border-green

.border-op-1 + .border-red

.border-op-2 + .border-red

.border-op-3 + .border-red

.border-op-4 + .border-red

.border-op-5 + .border-red

.border-op-6 + .border-red

.border-op-7 + .border-red

.border-op-8 + .border-red

.border-op-9 + .border-red

.border-op-1 + .border-blue

.border-op-2 + .border-blue

.border-op-3 + .border-blue

.border-op-4 + .border-blue

.border-op-5 + .border-blue

.border-op-6 + .border-blue

.border-op-7 + .border-blue

.border-op-8 + .border-blue

.border-op-9 + .border-blue

.border-op-1 + .border-purple

.border-op-2 + .border-purple

.border-op-3 + .border-purple

.border-op-4 + .border-purple

.border-op-5 + .border-purple

.border-op-6 + .border-purple

.border-op-7 + .border-purple

.border-op-8 + .border-purple

.border-op-9 + .border-purple

.border-op-1 + .border-pink

.border-op-2 + .border-pink

.border-op-3 + .border-pink

.border-op-4 + .border-pink

.border-op-5 + .border-pink

.border-op-6 + .border-pink

.border-op-7 + .border-pink

.border-op-8 + .border-pink

.border-op-9 + .border-pink

.border-op-1 + .border-orange

.border-op-2 + .border-orange

.border-op-3 + .border-orange

.border-op-4 + .border-orange

.border-op-5 + .border-orange

.border-op-6 + .border-orange

.border-op-7 + .border-orange

.border-op-8 + .border-orange

.border-op-9 + .border-orange

.border-op-1 + .border-lime

.border-op-2 + .border-lime

.border-op-3 + .border-lime

.border-op-4 + .border-lime

.border-op-5 + .border-lime

.border-op-6 + .border-lime

.border-op-7 + .border-lime

.border-op-8 + .border-lime

.border-op-9 + .border-lime

.border-op-1 + .border-blue-dark

.border-op-2 + .border-blue-dark

.border-op-3 + .border-blue-dark

.border-op-4 + .border-blue-dark

.border-op-5 + .border-blue-dark

.border-op-6 + .border-blue-dark

.border-op-7 + .border-blue-dark

.border-op-8 + .border-blue-dark

.border-op-9 + .border-blue-dark

.border-op-1 + .border-red-dark

.border-op-2 + .border-red-dark

.border-op-3 + .border-red-dark

.border-op-4 + .border-red-dark

.border-op-5 + .border-red-dark

.border-op-6 + .border-red-dark

.border-op-7 + .border-red-dark

.border-op-8 + .border-red-dark

.border-op-9 + .border-red-dark

.border-op-1 + .border-brown

.border-op-2 + .border-brown

.border-op-3 + .border-brown

.border-op-4 + .border-brown

.border-op-5 + .border-brown

.border-op-6 + .border-brown

.border-op-7 + .border-brown

.border-op-8 + .border-brown

.border-op-9 + .border-brown

.border-op-1 + .border-cyan-dark

.border-op-2 + .border-cyan-dark

.border-op-3 + .border-cyan-dark

.border-op-4 + .border-cyan-dark

.border-op-5 + .border-cyan-dark

.border-op-6 + .border-cyan-dark

.border-op-7 + .border-cyan-dark

.border-op-8 + .border-cyan-dark

.border-op-9 + .border-cyan-dark

.border-op-1 + .border-yellow

.border-op-2 + .border-yellow

.border-op-3 + .border-yellow

.border-op-4 + .border-yellow

.border-op-5 + .border-yellow

.border-op-6 + .border-yellow

.border-op-7 + .border-yellow

.border-op-8 + .border-yellow

.border-op-9 + .border-yellow

.border-op-1 + .border-slate

.border-op-2 + .border-slate

.border-op-3 + .border-slate

.border-op-4 + .border-slate

.border-op-5 + .border-slate

.border-op-6 + .border-slate

.border-op-7 + .border-slate

.border-op-8 + .border-slate

.border-op-9 + .border-slate

.border-op-1 + .border-olive

.border-op-2 + .border-olive

.border-op-3 + .border-olive

.border-op-4 + .border-olive

.border-op-5 + .border-olive

.border-op-6 + .border-olive

.border-op-7 + .border-olive

.border-op-8 + .border-olive

.border-op-9 + .border-olive

.border-op-1 + .border-teal

.border-op-2 + .border-teal

.border-op-3 + .border-teal

.border-op-4 + .border-teal

.border-op-5 + .border-teal

.border-op-6 + .border-teal

.border-op-7 + .border-teal

.border-op-8 + .border-teal

.border-op-9 + .border-teal

.border-op-1 + .border-green-bright

.border-op-2 + .border-green-bright

.border-op-3 + .border-green-bright

.border-op-4 + .border-green-bright

.border-op-5 + .border-green-bright

.border-op-6 + .border-green-bright

.border-op-7 + .border-green-bright

.border-op-8 + .border-green-bright

.border-op-9 + .border-green-bright

Awesome Features

99.9% Uptime / Free Upgrades / Fully Responsive / Bug Free
Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page