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 Aptent capto dignissim nimis. Cogo erat lucidus te vero virtus.

.text-primary Laoreet molior nostrud persto premo ratis scisco suscipere torqueo.

.text-info Abbas consequat ea neque nisl pneum qui quis sed.

.text-success Adipiscing eu patria populus. In odio populus.

.text-warning Augue cui esse quae velit. Damnum luctus melior patria secundum.

.text-danger Bene persto sagaciter secundum sed verto.

.text-white Ad molior quadrum quis rusticus vicis.

.text-dark Torqueo turpis voco. Ad autem caecus diam dolor incassum inhibeo melior metuo.

.text-light Dolus huic ille persto tation. Blandit damnum enim interdico iustum luctus meus nutus rusticus turpis.

.text-grey Aliquam humo minim nobis os vicis.

.text-grey-dark Erat os te utrum. Abbas abigo defui diam eligo ex facilisis ludus saluto usitas.

.text-primary-faded Eligo paratus usitas. Caecus decet huic olim praesent qui sino sit.

.text-primary-dark Autem jumentum laoreet neo veniam. Amet elit esca hendrerit hos jumentum pneum refoveo suscipere suscipit.

.text-green Abbas conventio rusticus. Augue enim genitus laoreet nisl qui tamen.

.text-red Aliquip comis commodo humo metuo ratis vero.

.text-blue Huic in pagus persto scisco vereor virtus vulpes ymo.

.text-purple At erat eros imputo loquor neo occuro quidne rusticus tincidunt.

.text-pink Abluo cui gemino genitus iaceo imputo neque refoveo utinam valetudo.

.text-orange Eligo iaceo ille in luptatum magna patria pneum quibus saluto.

.text-lime Abico aptent conventio distineo gravis incassum obruo saluto uxor.

.text-blue-dark Commodo diam illum oppeto pagus premo ut vicis wisi.

.text-red-dark Diam distineo ex ille immitto iusto jugis secundum valde.

.text-brown Defui iaceo suscipit. Camur comis eu humo importunus inhibeo macto paratus uxor volutpat.

.text-cyan-dark Appellatio gravis metuo tincidunt. Aptent os pagus plaga tation torqueo.

.text-yellow Abdo amet facilisis gilvus haero huic jumentum quibus saluto.

.text-slate Bene elit euismod letalis minim molior quis turpis typicus validus.

.text-olive Ea iusto minim torqueo. Adipiscing appellatio enim ludus praesent sed typicus veniam.

.text-teal Amet ea jus nobis secundum similis vero.

.text-green-bright Blandit haero te. Pecus pneum rusticus.


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 Commoveo elit interdico nisl paulatim quae valde.

.bg-grey Consectetuer eu interdico nostrud paulatim refero roto vel wisi zelus.

.bg-grey-dark Abluo ea iriure neo persto qui saluto scisco.

.bg-primary Appellatio blandit luctus nutus pecus. Ad camur in loquor neque nulla premo torqueo vindico.

.bg-primary-faded Appellatio eligo jus mauris vulputate wisi.

.bg-primary-dark Genitus nulla venio. Brevitas haero neo persto tation valetudo.

.bg-info Camur capto eros huic macto nulla patria ut.

.bg-success Diam euismod facilisis ibidem macto praesent suscipit tum.

.bg-warning Aliquip augue capto iaceo mauris minim nobis nutus sudo suscipere.

.bg-danger Caecus comis conventio esca haero iaceo saepius secundum sit.

.bg-dark Accumsan esse immitto nisl nobis quidem roto sino tamen.

.bg-light Amet exerci lenis mos quis sino typicus voco.

.bg-shadow Camur decet iusto modo quidne tation.

.bg-gradient Abigo nunc quis validus. Abico abluo euismod exerci inhibeo laoreet pertineo sudo suscipit vero.

.bg-gradient-flip Brevitas iriure lenis mauris olim proprius saepius similis validus.

.bg-green Ad aliquam blandit caecus inhibeo quibus.

.bg-red Capto eum genitus importunus lenis pertineo similis vel veniam.

.bg-blue Lobortis mos nobis pecus quae quidne tation.

.bg-purple Amet autem eros huic inhibeo jus quibus vero.

.bg-pink Diam hendrerit iustum lucidus modo nisl nunc pneum saluto.

.bg-orange Gemino saluto veniam. Amet conventio ideo lobortis probo quae sit typicus venio.

.bg-lime Bene consectetuer modo olim sit torqueo.

.bg-blue-dark Inhibeo neque pecus quidem. Amet antehabeo damnum esse inhibeo luptatum proprius sit venio.

.bg-red-dark Camur immitto iustum luctus suscipit. Comis ex huic ille ut.

.bg-brown Ad erat pertineo torqueo. Abico loquor quibus.

.bg-cyan-dark Bene facilisi lucidus magna molior quis.

.bg-yellow Cui iaceo turpis. Cogo gilvus lenis molior ratis roto velit.

.bg-slate Consectetuer gravis hos incassum zelus. Amet facilisi immitto lenis refero tum volutpat.

.bg-olive Macto nisl praesent typicus. Haero jumentum letalis nimis qui refero rusticus singularis sino vel.

.bg-teal Augue ille probo saepius uxor. Abico causa diam interdico nibh nutus ullamcorper.

.bg-green-bright At dignissim illum vulputate. Accumsan consectetuer diam jumentum macto molior mos nulla suscipit.


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 Laoreet mauris olim patria plaga suscipit tego utrum vicis.

.bg-op-2 + .bg-faded Et plaga populus probo proprius quae saepius secundum si verto.

.bg-op-3 + .bg-faded Jugis macto quis saluto utrum vereor.

.bg-op-4 + .bg-faded Accumsan cogo cui exputo praesent valetudo vulpes.

.bg-op-5 + .bg-faded Elit et in modo pertineo.

.bg-op-6 + .bg-faded Abbas dolor elit modo natu paulatim qui usitas ut.

.bg-op-7 + .bg-faded Et gilvus ideo qui utinam.

.bg-op-8 + .bg-faded Cui mos wisi. Praemitto vereor vero.

.bg-op-9 + .bg-faded Caecus consequat distineo huic importunus nulla sed si uxor voco.

.bg-op-1 + .bg-grey Abbas brevitas haero hos lucidus.

.bg-op-2 + .bg-grey Abdo commodo conventio ex incassum pertineo quidne si te ullamcorper.

.bg-op-3 + .bg-grey Lobortis magna modo turpis vereor.

.bg-op-4 + .bg-grey Antehabeo euismod exerci metuo nulla refoveo si.

.bg-op-5 + .bg-grey Duis mos qui. Abigo defui enim incassum melior nobis torqueo vero zelus.

.bg-op-6 + .bg-grey Eros facilisi natu pneum similis tamen usitas.

.bg-op-7 + .bg-grey Consectetuer ex gilvus ludus minim quidem sit tamen usitas.

.bg-op-8 + .bg-grey Defui dolor immitto luctus veniam virtus.

.bg-op-9 + .bg-grey Adipiscing paulatim populus tamen te.

.bg-op-1 + .bg-grey-dark Accumsan dolore olim pertineo populus similis virtus.

.bg-op-2 + .bg-grey-dark Eligo facilisi feugiat interdico pala populus qui suscipere zelus.

.bg-op-3 + .bg-grey-dark Aliquam appellatio caecus consectetuer consequat loquor os rusticus secundum te.

.bg-op-4 + .bg-grey-dark Dignissim gilvus laoreet. Abluo ad capto cui iaceo suscipit.

.bg-op-5 + .bg-grey-dark At brevitas importunus lobortis ludus ratis ut valetudo.

.bg-op-6 + .bg-grey-dark Enim exerci nutus verto.

.bg-op-7 + .bg-grey-dark Abdo bene capto eros iriure obruo paulatim tation validus.

.bg-op-8 + .bg-grey-dark Esse magna neo quidem tum.

.bg-op-9 + .bg-grey-dark Acsi cui eligo laoreet magna nobis patria pertineo refoveo uxor.

.bg-op-1 + .bg-primary Aptent esca lenis lobortis luctus os.

.bg-op-2 + .bg-primary Aliquam diam fere meus nibh pagus verto.

.bg-op-3 + .bg-primary Capto eum facilisis jugis magna patria pneum tation.

.bg-op-4 + .bg-primary Ille meus occuro pala tincidunt.

.bg-op-5 + .bg-primary Bene blandit dolus nibh quidne sed tincidunt tum voco.

.bg-op-6 + .bg-primary Consectetuer hendrerit utrum venio.

.bg-op-7 + .bg-primary Augue jumentum torqueo. Elit gilvus huic lobortis macto saepius suscipere usitas wisi.

.bg-op-8 + .bg-primary Adipiscing camur diam eros natu patria praemitto quia venio.

.bg-op-9 + .bg-primary Autem blandit eum luctus nunc tamen.

.bg-op-1 + .bg-primary-faded Immitto persto quibus usitas wisi ymo.

.bg-op-2 + .bg-primary-faded Adipiscing aliquam distineo facilisi ille meus quidne sagaciter suscipere ut.

.bg-op-3 + .bg-primary-faded Autem elit iaceo nostrud plaga rusticus torqueo valetudo.

.bg-op-4 + .bg-primary-faded Causa imputo modo. Laoreet saepius sagaciter wisi.

.bg-op-5 + .bg-primary-faded Abigo defui huic incassum minim populus praesent quadrum similis.

.bg-op-6 + .bg-primary-faded Accumsan enim genitus luctus ludus persto saepius saluto.

.bg-op-7 + .bg-primary-faded Acsi conventio esca esse et genitus tincidunt usitas.

.bg-op-8 + .bg-primary-faded Abico eu gravis imputo odio utinam.

.bg-op-9 + .bg-primary-faded Euismod paratus pneum proprius sed tego valetudo validus vereor.

.bg-op-1 + .bg-primary-dark Dolus duis exerci sagaciter ulciscor vindico.

.bg-op-2 + .bg-primary-dark Accumsan mauris metuo nutus olim quidne sagaciter typicus.

.bg-op-3 + .bg-primary-dark Decet ideo loquor nobis occuro quidem secundum tincidunt.

.bg-op-4 + .bg-primary-dark Brevitas nunc nutus suscipit voco.

.bg-op-5 + .bg-primary-dark At obruo paulatim probo saluto te.

.bg-op-6 + .bg-primary-dark Abdo et lenis saluto volutpat.

.bg-op-7 + .bg-primary-dark Accumsan duis iusto persto roto sit ymo.

.bg-op-8 + .bg-primary-dark Abico adipiscing amet autem euismod ex melior modo nunc.

.bg-op-9 + .bg-primary-dark Blandit causa genitus magna nimis pneum quae ulciscor.

.bg-op-1 + .bg-info Consequat incassum jugis natu obruo paratus praemitto sagaciter.

.bg-op-2 + .bg-info Autem lobortis praesent. Diam erat letalis molior os populus saluto.

.bg-op-3 + .bg-info Neque populus praemitto. Ad adipiscing dolore facilisis pala paulatim validus.

.bg-op-4 + .bg-info Cui enim hendrerit quibus saluto tation volutpat.

.bg-op-5 + .bg-info Causa nimis quibus rusticus sagaciter.

.bg-op-6 + .bg-info Defui gemino ille nibh patria uxor vereor.

.bg-op-7 + .bg-info Abico accumsan bene brevitas luctus magna sit suscipere ulciscor.

.bg-op-8 + .bg-info Causa duis iusto lobortis natu nobis quia.

.bg-op-9 + .bg-info Gemino inhibeo nostrud velit.

.bg-op-1 + .bg-success At consectetuer cui eros neo sed tego.

.bg-op-2 + .bg-success Autem diam ea iaceo in luptatum refero saluto.

.bg-op-3 + .bg-success Lobortis natu nutus sit turpis vereor voco.

.bg-op-4 + .bg-success Acsi dolor huic immitto refero sudo typicus vero.

.bg-op-5 + .bg-success Abigo erat metuo minim paulatim tamen tincidunt virtus.

.bg-op-6 + .bg-success Abluo facilisis macto sagaciter sudo suscipit utrum.

.bg-op-7 + .bg-success Causa huic importunus magna meus tum.

.bg-op-8 + .bg-success Appellatio feugiat plaga refoveo.

.bg-op-9 + .bg-success Iriure mos nostrud. Caecus capto ea iaceo immitto luctus ludus luptatum patria vulpes.

.bg-op-1 + .bg-warning Abluo brevitas cogo hendrerit tation usitas uxor vel venio.

.bg-op-2 + .bg-warning Abigo exerci jus laoreet mauris nisl pertineo quibus ullamcorper vicis.

.bg-op-3 + .bg-warning At consectetuer decet ea iaceo minim saluto scisco ut.

.bg-op-4 + .bg-warning Abdo brevitas lenis molior pneum.

.bg-op-5 + .bg-warning Magna obruo pala. Defui dolor enim esca mos patria typicus vulpes vulputate.

.bg-op-6 + .bg-warning Antehabeo aptent cui et interdico mos nobis turpis venio wisi.

.bg-op-7 + .bg-warning Abico adipiscing aliquip erat nostrud pagus persto premo velit ymo.

.bg-op-8 + .bg-warning Amet appellatio facilisi lucidus proprius vulpes wisi.

.bg-op-9 + .bg-warning Acsi commoveo enim ex iriure.

.bg-op-1 + .bg-danger Abbas erat laoreet lobortis lucidus quadrum roto tum vero zelus.

.bg-op-2 + .bg-danger Odio sit sudo. Genitus jumentum probo refero.

.bg-op-3 + .bg-danger At bene cogo cui feugiat laoreet luctus probo roto.

.bg-op-4 + .bg-danger Defui ibidem metuo paratus utinam velit vulpes.

.bg-op-5 + .bg-danger Ad antehabeo aptent augue facilisis lobortis lucidus praesent turpis vicis.

.bg-op-6 + .bg-danger Bene consequat elit veniam.

.bg-op-7 + .bg-danger Esca genitus ibidem ideo laoreet melior rusticus.

.bg-op-8 + .bg-danger Ad caecus commoveo ille nulla si tincidunt.

.bg-op-9 + .bg-danger Cui macto quidne scisco ut.

.bg-op-1 + .bg-dark Brevitas consequat loquor nibh nutus pneum saluto.

.bg-op-2 + .bg-dark Accumsan loquor luctus refoveo sagaciter si ulciscor.

.bg-op-3 + .bg-dark Abdo aptent enim esca.

.bg-op-4 + .bg-dark Augue esca incassum lucidus pagus pecus plaga proprius.

.bg-op-5 + .bg-dark Abigo appellatio brevitas cogo esse humo jus singularis verto.

.bg-op-6 + .bg-dark Abbas abluo importunus luptatum paulatim ratis refero rusticus ymo.

.bg-op-7 + .bg-dark Abdo autem commoveo quadrum quidem.

.bg-op-8 + .bg-dark Luctus refoveo tamen vel.

.bg-op-9 + .bg-dark Cogo defui dolore fere incassum mos pagus ulciscor velit volutpat.

.bg-op-1 + .bg-light Adipiscing aliquam antehabeo blandit cui in suscipere.

.bg-op-2 + .bg-light Imputo obruo pagus premo scisco.

.bg-op-3 + .bg-light Abico facilisis iustum loquor odio paulatim usitas ut velit.

.bg-op-4 + .bg-light Acsi decet enim et gravis importunus neque nimis nulla sagaciter.

.bg-op-5 + .bg-light Aliquip appellatio esca letalis mos pagus roto ulciscor valde wisi.

.bg-op-6 + .bg-light Dolore duis exerci jus neque quidne rusticus secundum utrum vel.

.bg-op-7 + .bg-light Fere lucidus odio. Damnum gravis ille occuro pneum probo verto.

.bg-op-8 + .bg-light Ad eum neo. Abluo appellatio facilisis fere hendrerit ideo immitto.

.bg-op-9 + .bg-light Consequat damnum gilvus iustum nibh oppeto refero secundum ullamcorper valetudo.

.bg-op-1 + .bg-gradient Adipiscing importunus inhibeo iusto oppeto paratus singularis.

.bg-op-2 + .bg-gradient Dignissim feugiat ut vel.

.bg-op-3 + .bg-gradient Abluo aliquam gravis huic paulatim si utrum.

.bg-op-4 + .bg-gradient Ea hendrerit iusto meus voco.

.bg-op-5 + .bg-gradient Abluo capto elit eum odio suscipere zelus.

.bg-op-6 + .bg-gradient Acsi bene illum iustum letalis scisco zelus.

.bg-op-7 + .bg-gradient Lucidus nibh olim tego.

.bg-op-8 + .bg-gradient Damnum jumentum sed uxor.

.bg-op-9 + .bg-gradient Comis ideo iriure mos quibus vero vicis.

.bg-op-1 + .bg-gradient-flip Aptent luptatum neque vel vulputate.

.bg-op-2 + .bg-gradient-flip Causa damnum wisi. Ad aliquip melior olim sino.

.bg-op-3 + .bg-gradient-flip Aliquip amet augue mauris nobis probo proprius quibus validus.

.bg-op-4 + .bg-gradient-flip Eros ulciscor utinam. Dolore ideo nimis vicis.

.bg-op-5 + .bg-gradient-flip Comis ludus neo odio praesent rusticus.

.bg-op-6 + .bg-gradient-flip Illum odio rusticus volutpat.

.bg-op-7 + .bg-gradient-flip Genitus melior valetudo. Feugiat immitto mos quia scisco torqueo voco.

.bg-op-8 + .bg-gradient-flip Accumsan aliquip amet augue eligo eros jumentum ratis secundum valde.

.bg-op-9 + .bg-gradient-flip Ea genitus iriure luptatum magna mos nobis tincidunt vel vulputate.

.bg-op-1 + .bg-green Et hos iaceo laoreet roto saepius scisco secundum tego.

.bg-op-2 + .bg-green Refero ullamcorper usitas. Abdo accumsan autem elit natu nulla pecus sit wisi.

.bg-op-3 + .bg-green Decet nobis ulciscor. Modo proprius si vel vulpes.

.bg-op-4 + .bg-green Commoveo eligo feugiat mos probo scisco si sino volutpat.

.bg-op-5 + .bg-green Camur duis iaceo pala patria populus sed tation.

.bg-op-6 + .bg-green Dolore hendrerit huic iustum laoreet pala qui refoveo utinam wisi.

.bg-op-7 + .bg-green Eu huic laoreet plaga saepius similis.

.bg-op-8 + .bg-green Defui esse imputo persto quis.

.bg-op-9 + .bg-green Autem lobortis tation. Aliquam erat macto nisl nutus persto tum utinam zelus.

.bg-op-1 + .bg-red Abdo dolore lobortis quadrum torqueo velit vicis zelus.

.bg-op-2 + .bg-red Appellatio camur metuo roto valde.

.bg-op-3 + .bg-red Appellatio decet diam feugiat nulla pecus quidne sit ut.

.bg-op-4 + .bg-red Eligo et minim olim os vindico.

.bg-op-5 + .bg-red Conventio dolore mos valde.

.bg-op-6 + .bg-red Blandit gravis metuo patria quadrum quis roto.

.bg-op-7 + .bg-red Augue eligo huic humo interdico luptatum nibh rusticus vero virtus.

.bg-op-8 + .bg-red Abigo duis esca humo metuo verto.

.bg-op-9 + .bg-red Adipiscing enim ibidem refero sed suscipit utinam valetudo veniam.

.bg-op-1 + .bg-blue Ludus macto nulla. Bene consectetuer damnum esca ibidem immitto laoreet minim nibh.

.bg-op-2 + .bg-blue Dolore modo refero. Aptent consectetuer eligo exerci huic quidne ullamcorper wisi.

.bg-op-3 + .bg-blue Adipiscing populus saepius tego wisi.

.bg-op-4 + .bg-blue Consequat dolus interdico lobortis mos persto quidne saluto scisco zelus.

.bg-op-5 + .bg-blue Elit gilvus wisi. Abico diam elit humo meus pala quidem.

.bg-op-6 + .bg-blue Inhibeo nostrud populus verto.

.bg-op-7 + .bg-blue Consequat decet minim quidem saluto typicus.

.bg-op-8 + .bg-blue Camur feugiat gilvus iustum lucidus qui saepius si torqueo wisi.

.bg-op-9 + .bg-blue Aptent exerci facilisis minim suscipit te utinam.

.bg-op-1 + .bg-purple Adipiscing eum ideo iustum quadrum refoveo roto similis torqueo vulputate.

.bg-op-2 + .bg-purple Abbas iriure luctus nulla.

.bg-op-3 + .bg-purple Letalis tamen tum. Bene nisl ullamcorper valetudo.

.bg-op-4 + .bg-purple Abbas acsi fere iriure iustum patria quidem typicus validus vicis.

.bg-op-5 + .bg-purple Abico capto gemino iaceo inhibeo jugis natu pagus patria ullamcorper.

.bg-op-6 + .bg-purple Causa dolore letalis. Lobortis nibh verto.

.bg-op-7 + .bg-purple Enim luctus nostrud quae tincidunt.

.bg-op-8 + .bg-purple Accumsan antehabeo capto conventio in modo nobis scisco si.

.bg-op-9 + .bg-purple Causa exputo pneum. Decet facilisis nobis ulciscor.

.bg-op-1 + .bg-pink Commoveo nibh secundum. Abbas abico comis facilisis gilvus pagus quia saluto.

.bg-op-2 + .bg-pink Abigo aliquam defui eum gilvus melior nibh praesent proprius quidne.

.bg-op-3 + .bg-pink At feugiat illum immitto lenis sit.

.bg-op-4 + .bg-pink Consequat ideo jumentum luctus nobis secundum tation.

.bg-op-5 + .bg-pink Distineo obruo secundum veniam.

.bg-op-6 + .bg-pink Camur facilisi jumentum modo nisl quia roto saluto sino vulputate.

.bg-op-7 + .bg-pink Aliquip dolus euismod exputo persto refero valetudo velit.

.bg-op-8 + .bg-pink Interdico quis sit turpis utinam.

.bg-op-9 + .bg-pink Aptent eu eum hendrerit natu nutus proprius saepius vel.

.bg-op-1 + .bg-orange Aliquam eros humo imputo iusto jumentum lenis modo praemitto sed.

.bg-op-2 + .bg-orange Ad damnum inhibeo pala quis.

.bg-op-3 + .bg-orange Abigo dolus feugiat ille immitto inhibeo modo pala sagaciter te.

.bg-op-4 + .bg-orange Mos pala quidem tincidunt verto.

.bg-op-5 + .bg-orange Commoveo damnum gilvus inhibeo lucidus nobis paratus sit valde virtus.

.bg-op-6 + .bg-orange Diam dignissim iriure luctus molior pala sed usitas.

.bg-op-7 + .bg-orange Defui interdico jus quidne rusticus valetudo vero.

.bg-op-8 + .bg-orange Praesent quadrum volutpat. Eros et iaceo jus odio veniam.

.bg-op-9 + .bg-orange Ad caecus dolus humo proprius roto sit ulciscor.

.bg-op-1 + .bg-lime Occuro odio ratis sed similis tamen ymo.

.bg-op-2 + .bg-lime Ideo illum nobis paulatim sed.

.bg-op-3 + .bg-lime Comis gilvus olim utinam.

.bg-op-4 + .bg-lime Dolore hos iustum oppeto vero.

.bg-op-5 + .bg-lime Abico accumsan iaceo mauris tincidunt ymo.

.bg-op-6 + .bg-lime Illum importunus oppeto. Caecus defui humo ibidem luptatum quia quibus.

.bg-op-7 + .bg-lime Illum letalis nutus similis wisi.

.bg-op-8 + .bg-lime Augue caecus gemino illum minim nibh nisl plaga quis.

.bg-op-9 + .bg-lime Appellatio at bene melior.

.bg-op-1 + .bg-blue-dark Neo quia quibus refero rusticus ullamcorper valde.

.bg-op-2 + .bg-blue-dark Aliquip autem dolus quae sit tum verto ymo.

.bg-op-3 + .bg-blue-dark Cogo ideo jus olim quae.

.bg-op-4 + .bg-blue-dark Aptent dolus facilisis hendrerit.

.bg-op-5 + .bg-blue-dark Appellatio hendrerit nibh persto vel.

.bg-op-6 + .bg-blue-dark Interdico letalis quia wisi.

.bg-op-7 + .bg-blue-dark Eu exputo fere feugiat metuo tincidunt torqueo.

.bg-op-8 + .bg-blue-dark Elit natu nisl tation.

.bg-op-9 + .bg-blue-dark Abdo conventio interdico luctus refero refoveo sino.

.bg-op-1 + .bg-red-dark Abigo facilisi haero occuro sino utrum venio verto.

.bg-op-2 + .bg-red-dark Hos humo importunus lucidus ut.

.bg-op-3 + .bg-red-dark Abbas bene saepius. Appellatio eum modo obruo pneum suscipit torqueo virtus.

.bg-op-4 + .bg-red-dark Abigo feugiat jugis lucidus pagus proprius suscipit tamen usitas velit.

.bg-op-5 + .bg-red-dark Elit esse luctus mauris nostrud pertineo ratis singularis venio vicis.

.bg-op-6 + .bg-red-dark Lobortis nobis nulla pecus te.

.bg-op-7 + .bg-red-dark Adipiscing facilisi lenis premo qui tego.

.bg-op-8 + .bg-red-dark Euismod feugiat luctus nimis praesent probo ratis.

.bg-op-9 + .bg-red-dark Commodo consectetuer os. Abluo esse luctus olim quis ratis saluto wisi.

.bg-op-1 + .bg-brown Eu ex hendrerit interdico nutus proprius quia scisco utrum.

.bg-op-2 + .bg-brown Cui esse jumentum. Adipiscing ratis utinam.

.bg-op-3 + .bg-brown Consequat cui esse exputo meus obruo patria.

.bg-op-4 + .bg-brown Aptent dolor exerci luctus nibh quia veniam vereor.

.bg-op-5 + .bg-brown Commoveo gilvus ideo importunus mauris nibh paulatim quae.

.bg-op-6 + .bg-brown Accumsan esca ibidem in inhibeo lenis suscipit ulciscor.

.bg-op-7 + .bg-brown Nulla plaga ymo. Autem brevitas imputo interdico si tation vel.

.bg-op-8 + .bg-brown Cui jugis obruo pertineo refero tation turpis.

.bg-op-9 + .bg-brown Fere ideo singularis utinam utrum.

.bg-op-1 + .bg-cyan-dark Accumsan laoreet natu proprius qui utinam.

.bg-op-2 + .bg-cyan-dark Augue decet distineo genitus mos occuro paratus sed virtus.

.bg-op-3 + .bg-cyan-dark Blandit laoreet pala quae quis refoveo ut vel zelus.

.bg-op-4 + .bg-cyan-dark Acsi magna pagus pala probo ratis saepius vero.

.bg-op-5 + .bg-cyan-dark Abluo cogo ea eu facilisi importunus paratus typicus.

.bg-op-6 + .bg-cyan-dark Camur duis importunus tincidunt.

.bg-op-7 + .bg-cyan-dark Gravis imputo os probo torqueo verto.

.bg-op-8 + .bg-cyan-dark Accumsan aliquip camur erat eum jumentum quibus sagaciter secundum suscipit.

.bg-op-9 + .bg-cyan-dark Conventio eligo laoreet neo tum validus.

.bg-op-1 + .bg-yellow Antehabeo autem cogo defui importunus obruo pala quidem singularis sino.

.bg-op-2 + .bg-yellow Dolor importunus incassum nobis quadrum.

.bg-op-3 + .bg-yellow At ideo interdico quae quibus scisco uxor validus veniam.

.bg-op-4 + .bg-yellow Aliquam bene decet eligo quae zelus.

.bg-op-5 + .bg-yellow Comis damnum illum nulla.

.bg-op-6 + .bg-yellow Abbas haero minim si.

.bg-op-7 + .bg-yellow Accumsan eu exerci jugis quis refero scisco ullamcorper valde.

.bg-op-8 + .bg-yellow Hendrerit nulla quadrum quidne refero ut.

.bg-op-9 + .bg-yellow Et rusticus singularis vereor vulpes.

.bg-op-1 + .bg-slate Esca importunus iustum lenis metuo patria rusticus tation.

.bg-op-2 + .bg-slate Abigo defui erat incassum iustum lobortis mauris volutpat.

.bg-op-3 + .bg-slate Dolor feugiat huic modo mos praemitto probo scisco veniam voco.

.bg-op-4 + .bg-slate Abbas defui distineo minim saepius turpis ullamcorper vel vereor.

.bg-op-5 + .bg-slate Abico adipiscing facilisis incassum pneum praesent ut.

.bg-op-6 + .bg-slate Decet erat eros sino tincidunt.

.bg-op-7 + .bg-slate Autem ibidem pneum. Adipiscing aliquam amet jugis pagus qui rusticus sudo wisi.

.bg-op-8 + .bg-slate Camur causa damnum gravis metuo nutus pneum refero venio.

.bg-op-9 + .bg-slate In interdico nisl plaga praemitto roto tego utinam venio vereor.

.bg-op-1 + .bg-olive Appellatio dolor melior paratus quidne quis.

.bg-op-2 + .bg-olive Abbas abigo molior occuro secundum sed uxor.

.bg-op-3 + .bg-olive Abico acsi ad distineo iaceo proprius veniam ymo.

.bg-op-4 + .bg-olive Causa dignissim nisl proprius quis.

.bg-op-5 + .bg-olive Brevitas caecus erat haero lenis nulla ratis vicis.

.bg-op-6 + .bg-olive Cui quae quidne. Abluo antehabeo gilvus hos inhibeo natu similis te.

.bg-op-7 + .bg-olive Cogo consectetuer esse incassum lenis nibh pagus quibus venio.

.bg-op-8 + .bg-olive Abdo appellatio camur illum praemitto ratis roto sagaciter vindico.

.bg-op-9 + .bg-olive Acsi at diam jus nisl praemitto refoveo te wisi.

.bg-op-1 + .bg-teal Capto ea paratus venio.

.bg-op-2 + .bg-teal Blandit incassum natu premo ratis.

.bg-op-3 + .bg-teal Abico abigo autem fere natu proprius.

.bg-op-4 + .bg-teal Loquor nimis nobis nutus pertineo praesent tego.

.bg-op-5 + .bg-teal Commodo euismod nibh nutus valde vel vindico.

.bg-op-6 + .bg-teal Antehabeo consequat exputo. Ad distineo feugiat melior patria rusticus singularis tincidunt ullamcorper.

.bg-op-7 + .bg-teal Caecus facilisis gravis luctus nutus proprius tincidunt utrum volutpat.

.bg-op-8 + .bg-teal Amet oppeto pagus paratus secundum suscipit.

.bg-op-9 + .bg-teal Esca feugiat molior sagaciter.

.bg-op-1 + .bg-green-bright Iaceo jumentum luptatum praemitto singularis sino tamen turpis.

.bg-op-2 + .bg-green-bright Aliquam consectetuer ille oppeto os rusticus valetudo vel velit.

.bg-op-3 + .bg-green-bright Aliquam fere lenis lobortis macto validus vindico.

.bg-op-4 + .bg-green-bright Aptent incassum mauris sino tego.

.bg-op-5 + .bg-green-bright Gemino jumentum rusticus. Feugiat humo iriure nibh tincidunt.

.bg-op-6 + .bg-green-bright Elit mos ratis tation ulciscor.

.bg-op-7 + .bg-green-bright Abico ad exerci iriure molior os pecus quidem tation velit.

.bg-op-8 + .bg-green-bright Diam ea eros facilisi magna volutpat.

.bg-op-9 + .bg-green-bright At damnum eligo facilisi qui wisi.


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 Abluo jumentum pneum. Aliquam dignissim melior quadrum volutpat vulputate wisi.
.border-info Commodo enim populus quae voco ymo.
.border-success Bene dolor eu. Commodo enim iaceo.
.border-warning Antehabeo capto damnum imputo incassum nibh rusticus uxor zelus.
.border-danger Appellatio consectetuer fere genitus importunus oppeto tation valetudo.
.border-grey Acsi defui eros eu euismod facilisis molior odio sino.
.border-grey-dark Pertineo populus quis. Aliquam eu qui tamen ut.
.border-primary-faded Consequat eros sino turpis verto. Amet gilvus ille modo pala quis sino.
.border-primary-dark Aliquam amet conventio eum luptatum molior nostrud virtus vulpes.
.border-dark Blandit consequat huic ille imputo nisl persto pneum scisco ulciscor.
.border-light Abbas facilisis vel. Huic mauris molior nostrud persto.
.border-green Autem sagaciter secundum similis. Appellatio loquor occuro odio praesent similis uxor verto vulputate ymo.
.border-red Amet nulla quis. Autem euismod feugiat pertineo tincidunt.
.border-blue Decet natu nimis pala ut validus vicis vindico.
.border-purple Abdo natu nutus. Commodo exerci interdico mos patria plaga qui.
.border-pink Eu gravis in iusto luctus oppeto persto te.
.border-orange Autem commodo diam vereor. Accumsan dolor eligo macto nimis premo sudo valde.
.border-lime Duis ibidem jus quibus vel vicis.
.border-blue-dark Fere interdico lucidus nibh praemitto sagaciter sed veniam vero.
.border-red-dark Gilvus jumentum molior pala usitas vicis.
.border-brown Comis conventio vindico. Huic modo suscipere.
.border-cyan-dark Abico consectetuer lobortis volutpat. Bene feugiat premo quia validus.
.border-yellow Feugiat nostrud tum. Aptent bene natu nibh quidem tation tincidunt velit.
.border-slate Camur consequat distineo et melior neque nibh nobis occuro uxor.
.border-olive Eligo enim et eum genitus ideo in probo validus virtus.
.border-teal Bene consequat eum natu ymo. Abigo facilisi in os utrum zelus.
.border-green-bright Appellatio aptent causa jus lobortis praemitto quibus quis vindico.

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