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 Facilisis importunus magna molior. Damnum dignissim jumentum refoveo tego.

.text-primary Loquor pertineo saluto wisi. Abigo fere gravis hendrerit letalis.

.text-info Dolor laoreet nisl torqueo ymo. Defui duis gemino hos.

.text-success Duis ex incassum lenis. Fere obruo occuro quidem secundum vicis.

.text-warning Appellatio ea fere neo quae ut valde.

.text-danger Blandit eum importunus odio refoveo sudo tation tego tum voco.

.text-white Eligo gravis laoreet neo os quadrum vero vulputate.

.text-dark Huic importunus imputo letalis ludus minim modo tamen te veniam.

.text-light Abdo aptent elit exerci jus nibh os.

.text-grey Ad erat ex illum magna modo nutus refero uxor wisi.

.text-grey-dark Acsi at cogo magna molior paratus quibus vulputate.

.text-primary-faded Dolor eligo interdico luctus nunc. Eu ex genitus paratus patria te ut venio.

.text-primary-darkend Euismod huic ibidem nutus paulatim saluto valetudo.

.text-green Caecus euismod facilisis os. Autem lenis olim qui.

.text-red Causa exerci minim vulpes. Ad cogo quadrum.

.text-blue Appellatio facilisis pala probo ulciscor vulputate.

.text-purple Facilisi hos huic letalis odio os valde.

.text-pink Aliquam appellatio pagus paratus zelus. Abbas aptent commoveo conventio lenis lobortis natu pneum populus virtus.

.text-orange Adipiscing haero nunc vindico. Camur ea in loquor patria quis ratis saluto te virtus.

.text-lime Commoveo fere nibh pertineo tego. Ex illum occuro paulatim tum.

.text-blue-dark Damnum neo quidne vero. Appellatio cui decet elit iusto te.

.text-red-dark Abdo adipiscing autem duis olim scisco.

.text-brown Modo nunc quidne sino suscipere volutpat.

.text-cyan-dark Comis gemino illum modo nutus sudo vulputate.

.text-yellow Abigo bene defui eu imputo mauris nibh obruo ratis roto.

.text-slate Eligo jugis lobortis pala. Accumsan eros jugis nimis os patria ullamcorper.

.text-olive Aliquip in premo singularis sino. Causa dolus imputo jus paulatim sagaciter sudo.

.text-teal Dolor facilisi nimis. Eros macto pagus pecus zelus.

.text-green-bright Aptent camur duis eu iustum nostrud.


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-darkend .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 Cogo esca iriure letalis voco. Causa esca genitus inhibeo letalis lucidus torqueo.

.bg-grey Hendrerit pecus qui sagaciter. Genitus gilvus imputo minim neque nulla.

.bg-grey-dark Ex exputo imputo macto metuo proprius similis validus vicis vindico.

.bg-primary Damnum genitus iaceo jus ludus pertineo plaga saluto torqueo.

.bg-primary-faded Augue gravis iaceo turpis. Abdo abico ea iriure macto nimis validus.

.bg-primary-darkend Abigo defui eligo exerci gilvus illum macto tincidunt.

.bg-info Iriure lobortis ulciscor. Antehabeo defui enim gravis haero macto rusticus singularis.

.bg-success Decet jumentum laoreet quadrum te. Consectetuer decet eligo ex exputo haero iaceo oppeto valde.

.bg-warning Nulla occuro olim. Adipiscing diam dignissim eum feugiat paratus tation tincidunt valde vereor.

.bg-danger Brevitas facilisi fere gravis ideo imputo melior minim obruo rusticus.

.bg-dark Lucidus minim molior occuro si sudo.

.bg-light Dolor jugis jumentum natu pagus pala secundum vulputate.

.bg-shadow Dolor huic ludus ulciscor. Iriure loquor ludus macto sudo ulciscor valetudo.

.bg-gradient Dolor incassum inhibeo mos neo. Abico haero proprius singularis validus vicis.

.bg-gradient-flip Abigo antehabeo facilisi genitus nimis pneum validus.

.bg-green Caecus letalis oppeto vulpes. Aliquam bene damnum et jumentum olim oppeto similis tincidunt valde.

.bg-red Esse iriure paulatim. Autem elit letalis minim vicis.

.bg-blue Acsi decet meus nobis obruo refoveo veniam.

.bg-purple Abbas humo paratus. Plaga singularis venio.

.bg-pink Amet exerci iaceo jus odio saluto suscipere suscipit.

.bg-orange At causa damnum distineo ludus metuo patria ut.

.bg-lime Exerci laoreet premo scisco sudo ymo.

.bg-blue-dark Aptent interdico iriure mos usitas ut.

.bg-red-dark Acsi damnum exputo lobortis mos secundum tation.

.bg-brown Brevitas jugis persto secundum tation. Causa erat jus nostrud ratis ullamcorper.

.bg-cyan-dark Duis ibidem magna nibh occuro odio velit.

.bg-yellow Aliquam dignissim erat magna nisl roto scisco sudo wisi.

.bg-slate Euismod exputo fere odio patria velit.

.bg-olive Dolus exerci interdico jus pecus typicus vindico.

.bg-teal Aliquam defui feugiat similis suscipit ullamcorper.

.bg-green-bright Exputo loquor pecus si vulpes. Autem conventio erat feugiat iaceo iustum laoreet lobortis refero sagaciter.


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 Eum gilvus pagus qui roto voco.

.bg-op-2 + .bg-faded Damnum esca nunc occuro populus refero tincidunt validus.

.bg-op-3 + .bg-faded At cogo commodo dolus hos nisl pala paulatim pneum quia.

.bg-op-4 + .bg-faded Abdo utinam verto. Abdo euismod hendrerit minim nibh obruo volutpat.

.bg-op-5 + .bg-faded Capto cui elit iriure letalis macto si.

.bg-op-6 + .bg-faded Dignissim duis eu occuro pala persto.

.bg-op-7 + .bg-faded Metuo molior tincidunt. Ad oppeto pneum quibus scisco tum ymo.

.bg-op-8 + .bg-faded Camur gemino ille incassum obruo occuro pneum sed sit tincidunt.

.bg-op-9 + .bg-faded Nunc os si ut.

.bg-op-1 + .bg-grey Consectetuer fere hos ibidem inhibeo os scisco singularis vero vulpes.

.bg-op-2 + .bg-grey Aptent autem commodo ex exerci gravis importunus neo.

.bg-op-3 + .bg-grey Gilvus premo quia roto.

.bg-op-4 + .bg-grey Accumsan ideo vicis. Abigo augue commodo ea esse nimis ratis validus.

.bg-op-5 + .bg-grey Damnum ea erat esca genitus iusto laoreet singularis.

.bg-op-6 + .bg-grey Decet et ibidem roto voco.

.bg-op-7 + .bg-grey Appellatio commodo eu genitus ille ludus suscipit validus virtus zelus.

.bg-op-8 + .bg-grey At augue consectetuer consequat iusto olim populus singularis ullamcorper.

.bg-op-9 + .bg-grey Autem dignissim exerci fere loquor nostrud nulla utrum.

.bg-op-1 + .bg-grey-dark Oppeto plaga usitas veniam.

.bg-op-2 + .bg-grey-dark Appellatio cui hos ille laoreet olim paratus patria.

.bg-op-3 + .bg-grey-dark Abigo autem feugiat haero incassum paulatim praesent suscipit vicis.

.bg-op-4 + .bg-grey-dark Ad bene camur cui natu tamen vereor.

.bg-op-5 + .bg-grey-dark At neo proprius sagaciter singularis.

.bg-op-6 + .bg-grey-dark Abbas autem ea genitus pala pecus sudo valetudo veniam zelus.

.bg-op-7 + .bg-grey-dark Autem damnum jus quia tincidunt.

.bg-op-8 + .bg-grey-dark Abico aptent nisl patria refoveo sino suscipere.

.bg-op-9 + .bg-grey-dark Accumsan dignissim haero refero tincidunt vulpes.

.bg-op-1 + .bg-primary Abdo facilisis nulla. Humo inhibeo laoreet nobis tincidunt.

.bg-op-2 + .bg-primary Adipiscing luptatum sudo. Euismod ille jumentum paratus ratis sagaciter secundum vel wisi.

.bg-op-3 + .bg-primary Dolus erat genitus in rusticus sudo suscipere zelus.

.bg-op-4 + .bg-primary Capto comis hendrerit imputo letalis populus quae tego.

.bg-op-5 + .bg-primary Enim laoreet luptatum modo venio.

.bg-op-6 + .bg-primary Elit lucidus torqueo. Enim hos olim quia.

.bg-op-7 + .bg-primary Gravis nimis oppeto sagaciter.

.bg-op-8 + .bg-primary Acsi aliquip gravis luctus.

.bg-op-9 + .bg-primary Consectetuer ibidem populus vel verto volutpat vulputate.

.bg-op-1 + .bg-primary-faded Eu meus mos nibh nimis paulatim roto validus.

.bg-op-2 + .bg-primary-faded Acsi cogo iriure pecus quis scisco tincidunt.

.bg-op-3 + .bg-primary-faded Dolore eligo huic laoreet ludus proprius quis roto tation voco.

.bg-op-4 + .bg-primary-faded Defui lenis macto neque populus tum vulpes.

.bg-op-5 + .bg-primary-faded Bene elit euismod gilvus imputo os sino suscipere wisi.

.bg-op-6 + .bg-primary-faded Esse genitus iusto qui tamen.

.bg-op-7 + .bg-primary-faded Praesent quia quis. Dolor dolore immitto laoreet obruo ratis utrum.

.bg-op-8 + .bg-primary-faded Abigo aptent haero modo paratus turpis virtus.

.bg-op-9 + .bg-primary-faded Damnum dolore facilisi nobis vel.

.bg-op-1 + .bg-primary-darkend Qui valde valetudo. Aliquam defui importunus iusto iustum laoreet mos proprius ratis ymo.

.bg-op-2 + .bg-primary-darkend Incassum neque obruo te tum turpis vero vicis voco.

.bg-op-3 + .bg-primary-darkend Bene neque olim pertineo sagaciter velit.

.bg-op-4 + .bg-primary-darkend Nutus pertineo quidem. Abico gravis haero ludus refoveo roto ulciscor vel velit.

.bg-op-5 + .bg-primary-darkend Abdo abico comis immitto jumentum typicus utrum voco.

.bg-op-6 + .bg-primary-darkend Abbas abdo aliquip damnum mos neo obruo.

.bg-op-7 + .bg-primary-darkend Appellatio et euismod immitto modo quae quidne sudo.

.bg-op-8 + .bg-primary-darkend Aliquip dolore virtus. Elit humo similis.

.bg-op-9 + .bg-primary-darkend Abico iaceo loquor. Aliquam conventio os populus ullamcorper.

.bg-op-1 + .bg-info Abbas esse obruo pertineo probo roto similis turpis.

.bg-op-2 + .bg-info Facilisis nulla nutus odio olim quadrum qui tamen.

.bg-op-3 + .bg-info Abbas incassum ratis valetudo volutpat.

.bg-op-4 + .bg-info Brevitas caecus haero probo rusticus zelus.

.bg-op-5 + .bg-info Dolus ex gravis ideo mauris pertineo quadrum suscipit torqueo.

.bg-op-6 + .bg-info Commodo eros ideo incassum nobis tamen veniam.

.bg-op-7 + .bg-info Abigo diam et inhibeo lenis pecus persto si volutpat ymo.

.bg-op-8 + .bg-info Decet neo praemitto quidem suscipere virtus.

.bg-op-9 + .bg-info Comis cui elit huic iaceo lenis pneum refoveo valetudo.

.bg-op-1 + .bg-success Augue exputo genitus huic ludus melior nisl ratis si tation.

.bg-op-2 + .bg-success Autem cui eligo modo tincidunt ulciscor venio vereor.

.bg-op-3 + .bg-success Euismod ludus mauris nisl premo torqueo.

.bg-op-4 + .bg-success Exputo huic lucidus magna minim si ulciscor utrum vero wisi.

.bg-op-5 + .bg-success Abbas defui distineo proprius saepius.

.bg-op-6 + .bg-success Abluo damnum feugiat gilvus huic quae secundum valetudo.

.bg-op-7 + .bg-success Distineo exerci haero immitto iusto magna sit.

.bg-op-8 + .bg-success Hos lobortis sudo vindico.

.bg-op-9 + .bg-success Hos humo vicis. Adipiscing damnum decet dolore iustum luctus quis vicis.

.bg-op-1 + .bg-warning Haero interdico iriure obruo pagus populus tincidunt valde voco ymo.

.bg-op-2 + .bg-warning Aliquip elit eu lenis obruo sed sit torqueo.

.bg-op-3 + .bg-warning Conventio dolus esca exerci magna oppeto suscipere ymo.

.bg-op-4 + .bg-warning Causa eum ex hos pneum saepius scisco sit volutpat.

.bg-op-5 + .bg-warning Capto consequat erat eu iaceo oppeto quadrum ulciscor valetudo vel.

.bg-op-6 + .bg-warning Exputo luctus meus natu pertineo premo scisco ullamcorper.

.bg-op-7 + .bg-warning Dolus erat eu hos olim populus similis turpis vicis vulpes.

.bg-op-8 + .bg-warning Abluo dolore quibus vulputate.

.bg-op-9 + .bg-warning Haero lenis pecus sed utrum.

.bg-op-1 + .bg-danger Aptent camur iusto lobortis nibh quibus sagaciter utinam vel.

.bg-op-2 + .bg-danger Gilvus lobortis metuo neo.

.bg-op-3 + .bg-danger Brevitas capto gemino iusto odio premo velit.

.bg-op-4 + .bg-danger Et gemino importunus laoreet lucidus luctus ullamcorper voco.

.bg-op-5 + .bg-danger Causa decet erat immitto pala pecus premo tego vindico.

.bg-op-6 + .bg-danger Dignissim esse fere gemino huic oppeto paulatim quibus.

.bg-op-7 + .bg-danger Comis diam huic iusto neo quibus.

.bg-op-8 + .bg-danger Appellatio augue bene consequat conventio meus oppeto quidem ut.

.bg-op-9 + .bg-danger Adipiscing caecus cui enim praesent zelus.

.bg-op-1 + .bg-dark Eum neo nibh saepius vicis.

.bg-op-2 + .bg-dark Abico ea eu gravis haero incassum inhibeo jugis obruo patria.

.bg-op-3 + .bg-dark Acsi cogo commodo duis esca incassum metuo nunc tation utrum.

.bg-op-4 + .bg-dark Amet esse gilvus incassum ludus luptatum natu nibh pertineo tum.

.bg-op-5 + .bg-dark Accumsan dolus patria quae tincidunt torqueo.

.bg-op-6 + .bg-dark Accumsan diam ex magna patria populus saluto uxor.

.bg-op-7 + .bg-dark Abluo accumsan fere pertineo premo tum typicus validus wisi.

.bg-op-8 + .bg-dark Bene brevitas cogo jus modo pagus singularis tum.

.bg-op-9 + .bg-dark Aliquam exerci luctus qui similis.

.bg-op-1 + .bg-light Eligo immitto nunc pneum ulciscor.

.bg-op-2 + .bg-light Accumsan aliquam et imputo persto quadrum sit tum valetudo.

.bg-op-3 + .bg-light Aptent paratus quadrum sed sit utinam validus.

.bg-op-4 + .bg-light Amet cogo damnum enim macto persto.

.bg-op-5 + .bg-light Euismod mos obruo wisi.

.bg-op-6 + .bg-light Abluo eu jugis. Abluo diam ex mos nisl patria quibus.

.bg-op-7 + .bg-light Erat neque tum veniam.

.bg-op-8 + .bg-light Interdico refero roto secundum wisi.

.bg-op-9 + .bg-light Appellatio eu gravis lobortis macto uxor vereor vulputate.

.bg-op-1 + .bg-gradient Aliquam diam eros esca eu illum interdico letalis obruo quae.

.bg-op-2 + .bg-gradient At in neque nunc pertineo quia similis uxor vulpes.

.bg-op-3 + .bg-gradient Brevitas duis ea facilisis jugis quidne quis ymo.

.bg-op-4 + .bg-gradient Abbas adipiscing cui nulla nutus.

.bg-op-5 + .bg-gradient Abigo adipiscing aliquip esse hos ideo laoreet nunc pertineo sit.

.bg-op-6 + .bg-gradient Lobortis ludus probo quadrum veniam.

.bg-op-7 + .bg-gradient Aliquam autem immitto sagaciter te velit.

.bg-op-8 + .bg-gradient Abluo commoveo exerci natu odio patria suscipere tation valetudo.

.bg-op-9 + .bg-gradient Conventio gilvus iaceo in similis venio.

.bg-op-1 + .bg-gradient-flip Eros plaga pneum premo scisco typicus utinam volutpat.

.bg-op-2 + .bg-gradient-flip Accumsan commoveo haero nisl.

.bg-op-3 + .bg-gradient-flip Loquor nisl scisco. Antehabeo aptent camur defui dignissim et eu ideo incassum saepius.

.bg-op-4 + .bg-gradient-flip Esse exerci lenis pertineo torqueo uxor vicis wisi.

.bg-op-5 + .bg-gradient-flip Abico causa distineo quia velit virtus.

.bg-op-6 + .bg-gradient-flip Brevitas exerci oppeto pagus secundum.

.bg-op-7 + .bg-gradient-flip Eu ex lucidus. Abico decet eligo esse mos nibh plaga quia turpis.

.bg-op-8 + .bg-gradient-flip Caecus decet inhibeo jugis lenis lucidus modo praesent singularis ymo.

.bg-op-9 + .bg-gradient-flip Causa commoveo metuo saepius vindico.

.bg-op-1 + .bg-green Ille importunus in. Blandit defui gravis importunus molior utrum verto vulputate.

.bg-op-2 + .bg-green Accumsan esca odio sagaciter usitas.

.bg-op-3 + .bg-green Consectetuer distineo luctus odio olim paulatim valde.

.bg-op-4 + .bg-green Abdo feugiat ibidem ideo paulatim ratis tincidunt valde.

.bg-op-5 + .bg-green Antehabeo euismod in melior neque populus premo probo.

.bg-op-6 + .bg-green Brevitas distineo ex illum.

.bg-op-7 + .bg-green Erat ratis utrum. Abbas camur ea gemino ludus minim nutus praemitto.

.bg-op-8 + .bg-green Camur erat exputo immitto jugis quidne.

.bg-op-9 + .bg-green Causa comis elit imputo minim rusticus sit.

.bg-op-1 + .bg-red Dolus quibus usitas. Augue comis elit illum persto sino.

.bg-op-2 + .bg-red Amet defui ille similis.

.bg-op-3 + .bg-red Commoveo et facilisi iustum quia tego ymo.

.bg-op-4 + .bg-red Commodo jus mos nobis persto quis refoveo sino ullamcorper usitas.

.bg-op-5 + .bg-red Jugis minim nutus probo quis saepius.

.bg-op-6 + .bg-red Autem nutus refoveo sit valde vero.

.bg-op-7 + .bg-red Amet consequat enim eu interdico iriure magna patria ulciscor virtus.

.bg-op-8 + .bg-red Accumsan appellatio importunus inhibeo magna minim refero.

.bg-op-9 + .bg-red Bene facilisis ille minim saluto sit validus.

.bg-op-1 + .bg-blue Gravis meus nobis valde vero verto wisi.

.bg-op-2 + .bg-blue Aptent exerci gravis ille nobis paulatim populus utinam virtus.

.bg-op-3 + .bg-blue Abluo damnum dolore hos minim neque sed tation uxor.

.bg-op-4 + .bg-blue Appellatio augue bene cogo decet metuo ut vulpes wisi.

.bg-op-5 + .bg-blue Similis usitas zelus. Appellatio cogo iriure iusto lucidus meus natu oppeto te voco.

.bg-op-6 + .bg-blue Bene commodo immitto minim nimis occuro uxor valetudo vereor ymo.

.bg-op-7 + .bg-blue Et iaceo jugis modo nimis velit.

.bg-op-8 + .bg-blue Aptent dolore et magna nisl.

.bg-op-9 + .bg-blue Amet dolus mauris molior nutus obruo paratus populus.

.bg-op-1 + .bg-purple Ea nostrud virtus. In laoreet lucidus valetudo vero.

.bg-op-2 + .bg-purple Antehabeo conventio dolor luptatum odio valde valetudo.

.bg-op-3 + .bg-purple Aliquam aliquip cui qui turpis ullamcorper.

.bg-op-4 + .bg-purple Camur diam ex laoreet lucidus luctus quia refoveo.

.bg-op-5 + .bg-purple Enim ex exputo facilisis gilvus gravis in proprius quidne utrum.

.bg-op-6 + .bg-purple Humo quia ulciscor. Caecus enim letalis validus.

.bg-op-7 + .bg-purple Abbas adipiscing capto olim valde vel.

.bg-op-8 + .bg-purple Damnum distineo nisl nunc pecus saepius sino vereor vicis.

.bg-op-9 + .bg-purple Comis fere in natu obruo paulatim plaga tincidunt vel velit.

.bg-op-1 + .bg-pink Amet facilisis in occuro proprius.

.bg-op-2 + .bg-pink Facilisi haero iriure macto minim pagus.

.bg-op-3 + .bg-pink Diam pagus pneum ulciscor.

.bg-op-4 + .bg-pink Commoveo esse huic luptatum pala proprius roto vicis voco.

.bg-op-5 + .bg-pink Abico causa facilisi in ludus pala patria sit tamen venio.

.bg-op-6 + .bg-pink Abigo ad autem cogo duis mos roto sudo tation usitas.

.bg-op-7 + .bg-pink Caecus camur lobortis loquor luptatum nisl.

.bg-op-8 + .bg-pink Commodo commoveo consectetuer dolor euismod metuo utinam.

.bg-op-9 + .bg-pink Ad facilisis fere hos illum neque nunc sagaciter volutpat vulpes.

.bg-op-1 + .bg-orange Abico dolus luctus melior quadrum.

.bg-op-2 + .bg-orange Cui euismod imputo mos nobis nutus secundum sino ulciscor.

.bg-op-3 + .bg-orange Causa ideo occuro populus saluto scisco.

.bg-op-4 + .bg-orange Et occuro ulciscor. Exerci iaceo refoveo sudo.

.bg-op-5 + .bg-orange Caecus consectetuer incassum iriure magna odio quibus rusticus ulciscor.

.bg-op-6 + .bg-orange Adipiscing blandit caecus distineo gravis hendrerit huic immitto molior sed.

.bg-op-7 + .bg-orange Decet importunus nobis pecus quia quidne tation.

.bg-op-8 + .bg-orange Abdo aliquam blandit praemitto wisi.

.bg-op-9 + .bg-orange Aptent dignissim et jumentum lobortis nulla quis ut.

.bg-op-1 + .bg-lime Ad magna nulla tation.

.bg-op-2 + .bg-lime Abdo euismod gravis immitto iusto luptatum quidne ulciscor venio.

.bg-op-3 + .bg-lime Caecus decet feugiat laoreet lobortis.

.bg-op-4 + .bg-lime Abdo caecus dolus hendrerit lenis luptatum neo quadrum sudo.

.bg-op-5 + .bg-lime Accumsan eros populus. Abluo gemino pagus populus.

.bg-op-6 + .bg-lime Hos loquor saepius tation venio vulpes wisi.

.bg-op-7 + .bg-lime Amet ea gravis ille luptatum rusticus tamen venio.

.bg-op-8 + .bg-lime Aliquam plaga scisco tincidunt.

.bg-op-9 + .bg-lime Bene fere gemino illum jumentum lobortis odio similis vindico.

.bg-op-1 + .bg-blue-dark Distineo ea ibidem rusticus utrum.

.bg-op-2 + .bg-blue-dark Dolore esca eum ille iusto macto suscipere ymo.

.bg-op-3 + .bg-blue-dark Duis eum probo verto.

.bg-op-4 + .bg-blue-dark Abbas autem bene ibidem iusto iustum ludus pagus refoveo sagaciter.

.bg-op-5 + .bg-blue-dark Blandit exputo molior vel.

.bg-op-6 + .bg-blue-dark Aliquam camur consectetuer duis euismod in laoreet olim quidem velit.

.bg-op-7 + .bg-blue-dark Duis euismod jus molior vicis.

.bg-op-8 + .bg-blue-dark Abdo eu exerci iaceo incassum iriure mauris oppeto quia sed.

.bg-op-9 + .bg-blue-dark Brevitas comis diam gemino ille pala quis tamen.

.bg-op-1 + .bg-red-dark Bene commodo eligo exputo macto nostrud.

.bg-op-2 + .bg-red-dark Huic luptatum mauris minim sed vulpes.

.bg-op-3 + .bg-red-dark Dolus ea ille macto modo suscipit utinam zelus.

.bg-op-4 + .bg-red-dark Comis cui defui humo oppeto rusticus singularis utrum.

.bg-op-5 + .bg-red-dark Commodo haero mos. Defui loquor nutus rusticus.

.bg-op-6 + .bg-red-dark Consectetuer defui genitus tamen.

.bg-op-7 + .bg-red-dark Abdo at blandit feugiat gravis in luctus ut ymo.

.bg-op-8 + .bg-red-dark Duis loquor molior typicus vulputate.

.bg-op-9 + .bg-red-dark Distineo ex gravis lobortis luptatum magna pneum roto saepius.

.bg-op-1 + .bg-brown Imputo mauris praesent. Brevitas huic mos sino.

.bg-op-2 + .bg-brown Abico conventio eu jus saluto scisco secundum usitas.

.bg-op-3 + .bg-brown Exerci nimis proprius singularis validus.

.bg-op-4 + .bg-brown Caecus dignissim luptatum. Capto duis inhibeo jugis probo secundum sudo.

.bg-op-5 + .bg-brown Autem lucidus nimis odio vero.

.bg-op-6 + .bg-brown Inhibeo neo nimis. At defui nimis rusticus venio.

.bg-op-7 + .bg-brown Augue in ludus tego.

.bg-op-8 + .bg-brown Commodo persto premo quadrum.

.bg-op-9 + .bg-brown Eligo gilvus jumentum praesent quadrum sagaciter venio vindico.

.bg-op-1 + .bg-cyan-dark Abdo causa jugis neque populus praemitto sino.

.bg-op-2 + .bg-cyan-dark Commodo consequat conventio dolus gemino mauris te turpis zelus.

.bg-op-3 + .bg-cyan-dark Abico diam ibidem illum ulciscor.

.bg-op-4 + .bg-cyan-dark Abluo commoveo ideo inhibeo mauris pagus premo probo si vero.

.bg-op-5 + .bg-cyan-dark Distineo jugis pagus ulciscor.

.bg-op-6 + .bg-cyan-dark Augue inhibeo macto quia.

.bg-op-7 + .bg-cyan-dark Ideo inhibeo quis turpis.

.bg-op-8 + .bg-cyan-dark Defui lucidus paratus roto suscipit.

.bg-op-9 + .bg-cyan-dark Cui dolus duis mauris premo voco.

.bg-op-1 + .bg-yellow Aliquip iaceo quidne. Consectetuer erat et hendrerit meus obruo si veniam venio.

.bg-op-2 + .bg-yellow Blandit metuo zelus. Caecus exputo melior rusticus turpis utrum ymo.

.bg-op-3 + .bg-yellow Aliquip aptent augue commodo enim nibh.

.bg-op-4 + .bg-yellow Abigo genitus tation. Caecus refoveo vel.

.bg-op-5 + .bg-yellow Autem bene decet huic iustum luptatum mauris praesent utrum.

.bg-op-6 + .bg-yellow Ad distineo dolor facilisi nutus probo sed.

.bg-op-7 + .bg-yellow Capto dolore erat praemitto usitas velit.

.bg-op-8 + .bg-yellow Adipiscing aliquip consequat ideo inhibeo lobortis macto si vel.

.bg-op-9 + .bg-yellow Abigo blandit et gravis huic nibh nunc obruo pecus pertineo.

.bg-op-1 + .bg-slate Capto paulatim quia tum usitas virtus.

.bg-op-2 + .bg-slate Aliquam te vereor. Eum facilisi gilvus iaceo pneum vindico.

.bg-op-3 + .bg-slate Consequat decet dolus ideo turpis.

.bg-op-4 + .bg-slate Amet lenis nimis premo suscipit tamen.

.bg-op-5 + .bg-slate Jugis macto nutus quidne vulpes.

.bg-op-6 + .bg-slate Acsi duis gravis illum refero venio vero wisi ymo zelus.

.bg-op-7 + .bg-slate Erat jus macto neque vulpes.

.bg-op-8 + .bg-slate Duis utinam validus venio.

.bg-op-9 + .bg-slate Adipiscing ea zelus. Amet lucidus pala roto rusticus te tum.

.bg-op-1 + .bg-olive Accumsan decet loquor meus populus qui sit tamen uxor validus.

.bg-op-2 + .bg-olive Caecus et facilisis gemino loquor natu nulla qui refoveo.

.bg-op-3 + .bg-olive Abdo distineo dolore euismod nimis saepius.

.bg-op-4 + .bg-olive Abbas iriure utrum. Esca jugis nimis nutus paratus.

.bg-op-5 + .bg-olive Brevitas gemino lenis neque nimis praesent tation vulpes zelus.

.bg-op-6 + .bg-olive Amet consectetuer diam occuro tego.

.bg-op-7 + .bg-olive Enim jus populus scisco validus vel verto.

.bg-op-8 + .bg-olive Commodo gravis olim oppeto persto qui refero torqueo.

.bg-op-9 + .bg-olive Abdo facilisis in velit.

.bg-op-1 + .bg-teal Feugiat patria si tum uxor.

.bg-op-2 + .bg-teal Feugiat gilvus obruo quia.

.bg-op-3 + .bg-teal Damnum erat eu jumentum mauris neque proprius sed.

.bg-op-4 + .bg-teal Ideo quibus roto wisi.

.bg-op-5 + .bg-teal Aliquam gemino ibidem. Exerci occuro torqueo typicus verto.

.bg-op-6 + .bg-teal Elit luctus mos nulla paulatim sino sudo.

.bg-op-7 + .bg-teal Defui dolore molior os persto quae refero similis ymo.

.bg-op-8 + .bg-teal Defui ideo quidne. Antehabeo causa exputo mauris modo os patria premo refoveo uxor.

.bg-op-9 + .bg-teal Abbas decet neque velit.

.bg-op-1 + .bg-green-bright Blandit hendrerit iusto minim quia sino usitas vero volutpat.

.bg-op-2 + .bg-green-bright Hendrerit nunc sagaciter. Ea letalis praemitto quae quia te ulciscor.

.bg-op-3 + .bg-green-bright Bene esse ille immitto inhibeo lucidus occuro quis rusticus tego.

.bg-op-4 + .bg-green-bright Adipiscing euismod facilisi lobortis nimis ullamcorper usitas vindico.

.bg-op-5 + .bg-green-bright Distineo exerci pneum sagaciter.

.bg-op-6 + .bg-green-bright Fere quia ulciscor. Amet dignissim fere iaceo mos nostrud paulatim ut validus vindico.

.bg-op-7 + .bg-green-bright Accumsan dignissim iaceo letalis scisco veniam.

.bg-op-8 + .bg-green-bright Brevitas haero laoreet oppeto.

.bg-op-9 + .bg-green-bright Brevitas causa melior paratus pecus quis typicus usitas.


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-faded Aliquip augue duis nutus sudo typicus vel.
.border-primary Ad dolor eum interdico iustum lobortis loquor sagaciter vero.
.border-info Cogo distineo esca huic illum luctus nostrud quis virtus.
.border-success Abbas augue capto exputo gemino quibus tamen vicis.
.border-warning Ad exerci ibidem inhibeo saluto vulputate.
.border-danger Cui exerci interdico jugis rusticus suscipere tego torqueo turpis ulciscor.
.border-grey Blandit decet lobortis oppeto premo suscipit usitas zelus.
.border-grey-dark At ludus nimis si sudo typicus uxor valetudo venio vereor.
.border-primary-faded Augue magna oppeto. Decet iriure probo saluto.
.border-primary-darkend Camur causa quia. Abdo accumsan eligo magna plaga premo ratis similis.
.border-dark Abico antehabeo enim esca immitto occuro probo refoveo typicus.
.border-light Abluo eum haero importunus. Autem ibidem qui.
.border-green Feugiat inhibeo macto persto pertineo pneum tego.
.border-red Comis conventio dolus in premo uxor veniam venio vulpes ymo.
.border-blue At elit haero hendrerit iaceo nisl quadrum.
.border-purple Aliquip commodo tego. Dolore eligo neo sed singularis vero.
.border-pink Abluo aptent causa genitus modo mos quis.
.border-orange Conventio dignissim odio validus. Cogo esca facilisis illum te ulciscor validus velit.
.border-lime Defui lucidus quae. Feugiat nisl vicis.
.border-blue-dark Euismod ille ludus sed ut volutpat.
.border-red-dark Diam eligo facilisis nulla occuro pecus saepius typicus utinam virtus.
.border-brown Bene ex in molior nunc valetudo.
.border-cyan-dark Eu facilisis imputo inhibeo molior neo nunc volutpat.
.border-yellow Abigo illum iustum laoreet ludus metuo nostrud pagus validus vulpes.
.border-slate In turpis ut valde validus veniam ymo.
.border-olive Ad appellatio brevitas defui humo metuo singularis sino tation.
.border-teal Cui letalis te usitas vereor. Cogo incassum neque nutus persto suscipit valde voco.
.border-green-bright Camur proprius zelus. Amet cogo commoveo decet gilvus illum sino vero.

Border Colour Opacity

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

.border-op-1 + .border-faded

.border-op-2 + .border-faded

.border-op-3 + .border-faded

.border-op-4 + .border-faded

.border-op-5 + .border-faded

.border-op-6 + .border-faded

.border-op-7 + .border-faded

.border-op-8 + .border-faded

.border-op-9 + .border-faded

.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-darkend

.border-op-2 + .border-primary-darkend

.border-op-3 + .border-primary-darkend

.border-op-4 + .border-primary-darkend

.border-op-5 + .border-primary-darkend

.border-op-6 + .border-primary-darkend

.border-op-7 + .border-primary-darkend

.border-op-8 + .border-primary-darkend

.border-op-9 + .border-primary-darkend

.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