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 Aliquip cui dolor modo nutus occuro paratus si valetudo.

.text-primary Abbas haero imputo jugis metuo pagus refoveo te voco.

.text-info Esca ex iustum obruo saepius. Capto erat esca eu fere interdico luctus modo utrum.

.text-success Immitto imputo nutus praemitto tation typicus venio volutpat.

.text-warning Diam importunus nibh tum. Obruo pecus quis te.

.text-danger Augue consectetuer consequat ratis saluto volutpat.

.text-white Amet bene metuo quis ratis velit.

.text-dark Camur facilisis imputo in occuro pagus sit suscipit utinam.

.text-light Abico diam jumentum magna nostrud nulla vereor.

.text-grey Caecus damnum dolor dolus elit lucidus sed sudo ulciscor.

.text-grey-dark Diam iaceo immitto. Accumsan iriure lobortis.

.text-primary-faded Comis minim occuro pneum quidne sed turpis usitas.

.text-primary-dark Ad elit paulatim quis sino ut.

.text-green Dolor ex melior metuo natu. Aliquip laoreet ludus neque os quadrum saepius vereor.

.text-red Abico dignissim luctus mauris plaga populus premo vulpes.

.text-blue Abdo ea erat eros euismod imputo populus sit.

.text-purple Blandit dolor eum exputo gravis ibidem meus neo nunc.

.text-pink Euismod melior quibus ratis sagaciter scisco sino.

.text-orange Abdo defui facilisi ille iusto scisco sed ut.

.text-lime Cogo enim ideo oppeto proprius suscipit tamen.

.text-blue-dark Autem hos illum letalis utrum validus voco.

.text-red-dark Eu feugiat gilvus gravis loquor pagus patria.

.text-brown Feugiat iaceo nutus paratus vel. Dolore gilvus gravis letalis patria pecus sudo ullamcorper veniam.

.text-cyan-dark At consectetuer duis humo iusto paulatim vero verto.

.text-yellow Aliquip caecus comis esse probo tamen veniam.

.text-slate Autem consequat facilisi nibh veniam voco.

.text-olive Ea haero loquor quadrum refoveo torqueo valde.

.text-teal Aliquam at blandit occuro pala quae sed si usitas.

.text-green-bright Acsi causa facilisi interdico loquor vulpes.


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 ille letalis os typicus utrum valetudo vereor vero.

.bg-grey Abbas consectetuer diam dolor fere metuo quia sed si ullamcorper.

.bg-grey-dark Capto dignissim meus vindico. Amet damnum humo jugis vindico virtus.

.bg-primary Acsi adipiscing consequat immitto neo nimis nutus typicus ullamcorper.

.bg-primary-faded At duis fere olim. In inhibeo sed sino ulciscor.

.bg-primary-dark Laoreet molior turpis uxor. Consequat fere ideo incassum lobortis nimis paulatim tum utrum.

.bg-info Camur iustum melior sudo volutpat wisi.

.bg-success Abigo adipiscing bene ibidem nunc olim probo validus vero.

.bg-warning Abdo singularis vulputate wisi. Abbas causa elit luptatum populus torqueo valetudo.

.bg-danger Abdo abigo consequat duis. Cogo dolor os populus quadrum si ut.

.bg-dark Appellatio bene consectetuer fere interdico saluto vicis.

.bg-light Comis premo sino valetudo. Appellatio lenis nunc oppeto paulatim quis sed voco zelus.

.bg-shadow Augue enim incassum jus pertineo pneum praesent.

.bg-gradient Enim ideo immitto nisl pala sagaciter te vicis.

.bg-gradient-flip Caecus dolor esca interdico pala saluto sed.

.bg-green Aliquam camur capto elit metuo si sudo tum ulciscor veniam.

.bg-red Brevitas commoveo consequat euismod facilisi ideo jumentum lobortis wisi ymo.

.bg-blue Metuo persto typicus venio ymo. Euismod gravis iustum letalis pecus sino tation.

.bg-purple Cui distineo hendrerit ille quidem si ulciscor usitas validus veniam.

.bg-pink Ea obruo quadrum wisi. At commodo defui duis enim jugis nutus paulatim scisco suscipere.

.bg-orange Commodo eros occuro paulatim pneum tation vicis.

.bg-lime Neque roto veniam. Consequat duis eligo eros lobortis molior verto.

.bg-blue-dark Camur et iriure iustum loquor odio patria quia utrum validus.

.bg-red-dark Ille natu pala patria paulatim ullamcorper.

.bg-brown Accumsan facilisis pneum. Aptent eligo elit jus letalis olim rusticus uxor vero wisi.

.bg-cyan-dark Damnum enim esca jugis lobortis nobis proprius vereor.

.bg-yellow Accumsan causa decet exerci inhibeo letalis quis venio.

.bg-slate Humo modo olim qui similis ut.

.bg-olive Cogo esse nibh refero saepius singularis suscipere utrum vero vulputate.

.bg-teal Amet olim oppeto rusticus ullamcorper valetudo velit venio volutpat.

.bg-green-bright Acsi commodo facilisi humo qui quidne.


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 Abbas commodo eligo haero humo olim premo ulciscor.

.bg-op-2 + .bg-faded Accumsan aliquip gravis iaceo pala praemitto proprius.

.bg-op-3 + .bg-faded Damnum dignissim dolor fere iaceo in laoreet validus vicis.

.bg-op-4 + .bg-faded Cui genitus interdico iusto melior quibus te vulpes.

.bg-op-5 + .bg-faded Dolor iaceo molior nibh praemitto refero rusticus wisi.

.bg-op-6 + .bg-faded Loquor luctus molior proprius quia torqueo.

.bg-op-7 + .bg-faded At persto praesent tamen vero wisi.

.bg-op-8 + .bg-faded Commodo conventio loquor lucidus luctus magna paratus turpis.

.bg-op-9 + .bg-faded Esse sino te ullamcorper usitas vero virtus.

.bg-op-1 + .bg-grey Antehabeo elit fere genitus interdico.

.bg-op-2 + .bg-grey Consequat mos quia. Aptent exputo inhibeo molior nostrud obruo persto singularis suscipere velit.

.bg-op-3 + .bg-grey Consequat incassum magna molior persto ratis.

.bg-op-4 + .bg-grey Facilisis hendrerit melior neo nimis typicus volutpat.

.bg-op-5 + .bg-grey Incassum nimis occuro probo veniam.

.bg-op-6 + .bg-grey Amet et facilisis lenis natu persto saluto vero voco.

.bg-op-7 + .bg-grey Abdo commoveo enim humo loquor praesent tincidunt utinam valetudo ymo.

.bg-op-8 + .bg-grey Facilisis nutus sagaciter tego.

.bg-op-9 + .bg-grey Abdo ad capto commoveo conventio esse immitto pertineo scisco.

.bg-op-1 + .bg-grey-dark Antehabeo blandit dignissim iaceo roto.

.bg-op-2 + .bg-grey-dark Conventio dolor mauris nimis uxor.

.bg-op-3 + .bg-grey-dark At causa commoveo consequat euismod mos occuro ullamcorper veniam zelus.

.bg-op-4 + .bg-grey-dark Abigo consequat diam dolor exputo quia.

.bg-op-5 + .bg-grey-dark Cogo damnum decet esca oppeto premo tincidunt zelus.

.bg-op-6 + .bg-grey-dark Accumsan erat esse nibh refero.

.bg-op-7 + .bg-grey-dark Facilisi gravis huic interdico meus mos nutus roto.

.bg-op-8 + .bg-grey-dark Blandit huic ludus mauris occuro pagus tego uxor.

.bg-op-9 + .bg-grey-dark Haero ideo immitto loquor neque usitas.

.bg-op-1 + .bg-primary Augue ideo iusto laoreet obruo plaga quibus saepius uxor.

.bg-op-2 + .bg-primary Antehabeo cui paulatim sagaciter.

.bg-op-3 + .bg-primary Lobortis mos pecus veniam virtus.

.bg-op-4 + .bg-primary Acsi persto valetudo. Dolus interdico neque obruo oppeto quidne torqueo turpis vindico virtus.

.bg-op-5 + .bg-primary Abigo acsi consectetuer distineo eros luctus melior validus.

.bg-op-6 + .bg-primary Acsi commodo illum interdico ludus neo pneum.

.bg-op-7 + .bg-primary Abico commodo damnum dignissim elit haero validus velit vero vulpes.

.bg-op-8 + .bg-primary Ad gemino iustum metuo molior saepius secundum suscipere volutpat.

.bg-op-9 + .bg-primary Consectetuer cui facilisis gemino ideo nunc praemitto probo proprius voco.

.bg-op-1 + .bg-primary-faded Abigo paratus refero. Ille persto refoveo similis sudo ut zelus.

.bg-op-2 + .bg-primary-faded Dolore ex haero tum.

.bg-op-3 + .bg-primary-faded Facilisi metuo utrum. Consectetuer esse illum.

.bg-op-4 + .bg-primary-faded Abbas aliquam brevitas ibidem.

.bg-op-5 + .bg-primary-faded Damnum dolore exerci. Antehabeo blandit enim esse ex interdico nisl proprius.

.bg-op-6 + .bg-primary-faded Defui iustum loquor quae rusticus saepius tum ulciscor.

.bg-op-7 + .bg-primary-faded Abigo defui illum melior roto.

.bg-op-8 + .bg-primary-faded Facilisis gemino immitto. Duis ex exputo minim odio saluto typicus.

.bg-op-9 + .bg-primary-faded Ad eu nostrud patria quidne ullamcorper.

.bg-op-1 + .bg-primary-dark Ea ex facilisi humo laoreet roto tamen veniam.

.bg-op-2 + .bg-primary-dark Abluo ad exerci uxor verto vicis vulpes.

.bg-op-3 + .bg-primary-dark Natu si singularis velit veniam vero virtus.

.bg-op-4 + .bg-primary-dark Commoveo ibidem magna melior obruo probo.

.bg-op-5 + .bg-primary-dark Dolus exerci lucidus nunc pagus quidem saluto sed sudo.

.bg-op-6 + .bg-primary-dark Dolus erat persto quibus utinam zelus.

.bg-op-7 + .bg-primary-dark Abigo appellatio at autem esse macto sagaciter vindico wisi.

.bg-op-8 + .bg-primary-dark Abigo bene erat euismod melior nimis nutus proprius rusticus suscipere.

.bg-op-9 + .bg-primary-dark Cogo praemitto tation turpis verto wisi.

.bg-op-1 + .bg-info Camur cogo haero pagus volutpat wisi.

.bg-op-2 + .bg-info Eros humo ludus modo nostrud odio oppeto quidne ut.

.bg-op-3 + .bg-info Diam duis ludus. Ad defui illum sed suscipere torqueo vero vicis wisi zelus.

.bg-op-4 + .bg-info Camur eros feugiat ibidem molior obruo quis refero saluto ulciscor.

.bg-op-5 + .bg-info Defui dignissim eros eum gilvus paratus.

.bg-op-6 + .bg-info Acsi adipiscing at brevitas magna persto plaga praesent sagaciter.

.bg-op-7 + .bg-info Aliquam incassum mauris. Iriure lenis paulatim pertineo quis suscipit ullamcorper valetudo.

.bg-op-8 + .bg-info Consequat eligo importunus melior patria saepius suscipere.

.bg-op-9 + .bg-info Exputo huic natu te valde.

.bg-op-1 + .bg-success Aliquam aliquip consequat elit facilisi nobis nunc praemitto ratis vel.

.bg-op-2 + .bg-success Nulla praesent vel zelus.

.bg-op-3 + .bg-success Aptent immitto quia tamen verto.

.bg-op-4 + .bg-success Antehabeo brevitas ibidem iriure pneum sudo turpis virtus.

.bg-op-5 + .bg-success Gemino immitto torqueo. Camur consequat duis haero nostrud nulla os sudo ullamcorper validus.

.bg-op-6 + .bg-success Decet enim facilisis immitto praemitto quia saluto.

.bg-op-7 + .bg-success Comis duis similis vulpes.

.bg-op-8 + .bg-success Ad aliquam consequat loquor minim saluto sino te.

.bg-op-9 + .bg-success Dignissim esca exerci ibidem populus rusticus utrum.

.bg-op-1 + .bg-warning Augue magna neque nostrud.

.bg-op-2 + .bg-warning Cui elit mauris nisl pala ullamcorper valetudo.

.bg-op-3 + .bg-warning Abigo defui exputo mauris oppeto pneum quis sino tamen validus.

.bg-op-4 + .bg-warning Scisco uxor valetudo veniam.

.bg-op-5 + .bg-warning Ad facilisis metuo neque ulciscor.

.bg-op-6 + .bg-warning Distineo modo neo vel venio.

.bg-op-7 + .bg-warning Abdo lenis luptatum tego valetudo.

.bg-op-8 + .bg-warning Aliquam esse lenis mauris.

.bg-op-9 + .bg-warning Elit ibidem ludus os premo vindico.

.bg-op-1 + .bg-danger Cogo eu ideo torqueo utinam.

.bg-op-2 + .bg-danger Eligo gemino hos importunus iriure mos occuro odio secundum.

.bg-op-3 + .bg-danger Abigo modo odio saepius similis virtus.

.bg-op-4 + .bg-danger Aliquam comis decet dolore genitus ludus nisl odio tum ut.

.bg-op-5 + .bg-danger Brevitas consectetuer usitas ut.

.bg-op-6 + .bg-danger Accumsan capto euismod iaceo iriure iustum patria paulatim premo utrum.

.bg-op-7 + .bg-danger Consectetuer esse iaceo paulatim singularis.

.bg-op-8 + .bg-danger Esca euismod plaga quibus si utinam vindico voco.

.bg-op-9 + .bg-danger Abbas abluo ad at cogo comis gravis jus neo.

.bg-op-1 + .bg-dark Commodo ea eligo enim et haero quibus sino.

.bg-op-2 + .bg-dark Accumsan brevitas commoveo nobis obruo occuro singularis typicus valde.

.bg-op-3 + .bg-dark Blandit diam pagus populus.

.bg-op-4 + .bg-dark Adipiscing enim feugiat minim praemitto proprius sit te tum vulpes.

.bg-op-5 + .bg-dark Abluo blandit facilisi illum lucidus pagus secundum valetudo.

.bg-op-6 + .bg-dark Accumsan ad distineo melior pneum qui valetudo vulputate.

.bg-op-7 + .bg-dark Minim nobis paratus usitas.

.bg-op-8 + .bg-dark Esca esse iriure pneum populus tego tum vindico ymo.

.bg-op-9 + .bg-dark Damnum defui dolus duis euismod metuo nibh singularis typicus veniam.

.bg-op-1 + .bg-light Nulla os probo rusticus usitas vereor.

.bg-op-2 + .bg-light Inhibeo interdico pala quadrum saepius.

.bg-op-3 + .bg-light Accumsan enim exputo luctus plaga zelus.

.bg-op-4 + .bg-light Adipiscing gilvus haero nibh nimis oppeto sino tincidunt.

.bg-op-5 + .bg-light Gravis haero incassum natu veniam vulputate.

.bg-op-6 + .bg-light Aliquip dolus exputo gemino genitus pertineo ratis.

.bg-op-7 + .bg-light Damnum eum illum interdico ludus.

.bg-op-8 + .bg-light Distineo persto vulpes. Abbas fere luctus pala.

.bg-op-9 + .bg-light Aptent decet dolore enim facilisis hendrerit vero virtus voco.

.bg-op-1 + .bg-gradient Ibidem magna rusticus volutpat.

.bg-op-2 + .bg-gradient Dignissim illum interdico jumentum occuro quae vulputate.

.bg-op-3 + .bg-gradient Cogo dolor nisl nutus.

.bg-op-4 + .bg-gradient Dolore enim exputo. Elit facilisis fere incassum inhibeo jugis jus valde zelus.

.bg-op-5 + .bg-gradient Abigo antehabeo bene nutus quia.

.bg-op-6 + .bg-gradient Abluo conventio esca gravis jumentum pagus saluto tation.

.bg-op-7 + .bg-gradient Cui enim nimis occuro tation validus.

.bg-op-8 + .bg-gradient Aliquam ex ille odio paratus persto quidne tincidunt vulputate.

.bg-op-9 + .bg-gradient Appellatio duis feugiat. Abdo molior ulciscor.

.bg-op-1 + .bg-gradient-flip Fere ille imputo neque utinam.

.bg-op-2 + .bg-gradient-flip Comis diam luptatum plaga quibus valetudo.

.bg-op-3 + .bg-gradient-flip Erat exputo sino. Duis enim facilisis incassum magna meus os rusticus.

.bg-op-4 + .bg-gradient-flip At imputo lobortis sudo.

.bg-op-5 + .bg-gradient-flip Huic macto meus mos neque suscipere ut utrum vindico vulpes.

.bg-op-6 + .bg-gradient-flip Appellatio at defui pertineo tum turpis uxor.

.bg-op-7 + .bg-gradient-flip Abico commoveo exputo feugiat jumentum occuro tum.

.bg-op-8 + .bg-gradient-flip Augue autem erat iriure nisl qui quidem.

.bg-op-9 + .bg-gradient-flip Ex feugiat inhibeo lenis macto meus nostrud obruo volutpat.

.bg-op-1 + .bg-green Decet dolor eum haero immitto neo sagaciter vulpes.

.bg-op-2 + .bg-green Cogo meus odio quis valde.

.bg-op-3 + .bg-green Gilvus ibidem importunus velit.

.bg-op-4 + .bg-green Abbas dolus erat fere modo quibus scisco suscipere.

.bg-op-5 + .bg-green Dolus gilvus incassum virtus.

.bg-op-6 + .bg-green Capto cogo eros gravis huic immitto qui suscipit tum validus.

.bg-op-7 + .bg-green Immitto obruo olim saepius tation.

.bg-op-8 + .bg-green Abbas nulla praesent veniam verto.

.bg-op-9 + .bg-green Augue caecus duis esca euismod nobis vereor verto vicis.

.bg-op-1 + .bg-red Aliquip defui duis eros et occuro quae quidem refoveo wisi.

.bg-op-2 + .bg-red Fere lucidus plaga vero vulputate.

.bg-op-3 + .bg-red Aptent feugiat loquor metuo mos odio pertineo ullamcorper.

.bg-op-4 + .bg-red Eum incassum lenis metuo molior patria vulpes.

.bg-op-5 + .bg-red Aliquip ille nimis. Capto dolor jugis mauris quidne.

.bg-op-6 + .bg-red Autem consequat dignissim patria tum vero.

.bg-op-7 + .bg-red Abluo ea inhibeo jugis luptatum saluto suscipit ut vel.

.bg-op-8 + .bg-red Antehabeo aptent dolore nibh pala secundum velit vindico zelus.

.bg-op-9 + .bg-red Adipiscing roto ymo. Capto iaceo ullamcorper wisi.

.bg-op-1 + .bg-blue Defui diam eligo et exputo iusto obruo valetudo wisi.

.bg-op-2 + .bg-blue Blandit comis fere gravis imputo neque paratus.

.bg-op-3 + .bg-blue Damnum elit ludus te venio.

.bg-op-4 + .bg-blue Paulatim qui vero. Antehabeo dolus haero lenis modo nobis populus quis sagaciter.

.bg-op-5 + .bg-blue Sed similis singularis utrum valde.

.bg-op-6 + .bg-blue Genitus ideo iriure lucidus nibh pala tincidunt usitas.

.bg-op-7 + .bg-blue Haero interdico iusto metuo nobis praemitto sino typicus venio voco.

.bg-op-8 + .bg-blue Ad et eum genitus huic.

.bg-op-9 + .bg-blue Abigo commodo commoveo erat exputo quae ratis vel.

.bg-op-1 + .bg-purple Aliquip camur ea gilvus iusto macto tamen.

.bg-op-2 + .bg-purple Dignissim ex facilisi luptatum pertineo secundum sit velit.

.bg-op-3 + .bg-purple Ex iaceo imputo lucidus macto patria usitas.

.bg-op-4 + .bg-purple Acsi capto neque. Autem scisco voco ymo.

.bg-op-5 + .bg-purple Aptent exerci imputo incassum iustum quis torqueo utinam velit.

.bg-op-6 + .bg-purple Blandit facilisi iaceo quia sino zelus.

.bg-op-7 + .bg-purple Abluo feugiat nulla quia vel.

.bg-op-8 + .bg-purple Humo illum ludus nimis nostrud.

.bg-op-9 + .bg-purple Amet cui iriure minim paratus veniam.

.bg-op-1 + .bg-pink Accumsan brevitas damnum exputo metuo nulla tamen vereor zelus.

.bg-op-2 + .bg-pink Duis eros euismod exerci luptatum minim modo nobis tamen voco.

.bg-op-3 + .bg-pink Abluo brevitas defui euismod humo laoreet oppeto suscipere usitas vel.

.bg-op-4 + .bg-pink Autem exputo gemino nostrud pagus quis valde.

.bg-op-5 + .bg-pink Amet augue conventio interdico iusto laoreet nimis tamen wisi.

.bg-op-6 + .bg-pink Caecus hendrerit mos nimis odio premo qui saepius si vindico.

.bg-op-7 + .bg-pink Abdo appellatio loquor scisco utrum.

.bg-op-8 + .bg-pink Augue blandit dolus exerci genitus ille in neque secundum vulpes.

.bg-op-9 + .bg-pink Consequat dignissim sit. Exerci nibh pecus qui tamen ullamcorper.

.bg-op-1 + .bg-orange Caecus jus paratus. At dignissim humo metuo natu quadrum usitas.

.bg-op-2 + .bg-orange Letalis nunc valetudo. Abigo ille jus letalis luctus metuo quibus quis similis uxor.

.bg-op-3 + .bg-orange Adipiscing eligo facilisi jumentum luctus pertineo voco.

.bg-op-4 + .bg-orange Consectetuer duis gilvus humo iaceo ille incassum meus.

.bg-op-5 + .bg-orange Dolus occuro ullamcorper. Caecus immitto iustum luptatum qui suscipit zelus.

.bg-op-6 + .bg-orange Facilisis metuo mos natu os quidne.

.bg-op-7 + .bg-orange At neque paulatim. Abico esse praesent veniam.

.bg-op-8 + .bg-orange Iaceo obruo qui utrum.

.bg-op-9 + .bg-orange Abigo aptent neque ratis veniam.

.bg-op-1 + .bg-lime Elit immitto lobortis sino validus zelus.

.bg-op-2 + .bg-lime Aliquam distineo macto nostrud ulciscor.

.bg-op-3 + .bg-lime Cogo conventio exputo nobis nunc secundum tum vel.

.bg-op-4 + .bg-lime Adipiscing dignissim exputo fere feugiat praemitto quidem.

.bg-op-5 + .bg-lime Ad conventio dolor facilisis lobortis natu nostrud premo valde.

.bg-op-6 + .bg-lime Augue consectetuer defui haero immitto paratus usitas.

.bg-op-7 + .bg-lime Aliquam augue eros eu neque scisco voco.

.bg-op-8 + .bg-lime Ad duis gravis voco ymo.

.bg-op-9 + .bg-lime Commoveo ea enim imputo loquor pala patria praesent rusticus.

.bg-op-1 + .bg-blue-dark Adipiscing conventio damnum hos os qui saepius saluto tamen verto.

.bg-op-2 + .bg-blue-dark Capto dolus ex loquor ratis si.

.bg-op-3 + .bg-blue-dark Aptent genitus nunc quadrum singularis verto zelus.

.bg-op-4 + .bg-blue-dark Accumsan acsi appellatio immitto letalis nostrud plaga valetudo.

.bg-op-5 + .bg-blue-dark Consequat eum tation. Bene modo natu nimis proprius.

.bg-op-6 + .bg-blue-dark Acsi decet macto singularis.

.bg-op-7 + .bg-blue-dark Esca eum inhibeo suscipere suscipit ut.

.bg-op-8 + .bg-blue-dark Feugiat luptatum mos populus quae rusticus.

.bg-op-9 + .bg-blue-dark Illum imputo jugis magna oppeto sagaciter ullamcorper venio.

.bg-op-1 + .bg-red-dark Conventio euismod gravis hos metuo mos sudo vero.

.bg-op-2 + .bg-red-dark Bene camur facilisis nunc sagaciter tincidunt ullamcorper valetudo vicis vulputate.

.bg-op-3 + .bg-red-dark Haero importunus lenis macto.

.bg-op-4 + .bg-red-dark Eu gemino vicis. Augue enim quadrum qui roto rusticus.

.bg-op-5 + .bg-red-dark Abigo antehabeo enim quidne sagaciter.

.bg-op-6 + .bg-red-dark Fere olim oppeto paratus patria rusticus secundum.

.bg-op-7 + .bg-red-dark Gravis iriure natu nimis.

.bg-op-8 + .bg-red-dark Aliquam gemino huic ideo ille macto nutus sudo wisi ymo.

.bg-op-9 + .bg-red-dark Duis haero lenis paulatim quadrum.

.bg-op-1 + .bg-brown Adipiscing erat vulputate. Caecus comis ille imputo macto praesent refero sudo vicis virtus.

.bg-op-2 + .bg-brown Abdo dignissim hendrerit humo ideo iriure paulatim plaga sino vicis.

.bg-op-3 + .bg-brown Accumsan consectetuer decet huic paulatim quis tum typicus.

.bg-op-4 + .bg-brown Abluo aliquam dolore haero quidem quidne rusticus ut vicis ymo.

.bg-op-5 + .bg-brown Conventio gravis ille inhibeo magna.

.bg-op-6 + .bg-brown Cogo diam modo quidne.

.bg-op-7 + .bg-brown Autem eligo jumentum verto.

.bg-op-8 + .bg-brown Comis dolor jumentum letalis paulatim quia saluto suscipit utrum voco.

.bg-op-9 + .bg-brown Brevitas diam esca persto.

.bg-op-1 + .bg-cyan-dark Abluo capto ea gemino gilvus nostrud praesent refoveo.

.bg-op-2 + .bg-cyan-dark Abdo causa eligo ibidem illum laoreet tincidunt vero volutpat vulpes.

.bg-op-3 + .bg-cyan-dark Luctus macto sed. Aliquip diam modo quibus.

.bg-op-4 + .bg-cyan-dark Appellatio blandit iriure odio.

.bg-op-5 + .bg-cyan-dark Commodo jus nostrud quis valde.

.bg-op-6 + .bg-cyan-dark Huic incassum melior quadrum.

.bg-op-7 + .bg-cyan-dark Jumentum ludus molior nostrud nulla secundum utinam.

.bg-op-8 + .bg-cyan-dark Abdo blandit obruo torqueo.

.bg-op-9 + .bg-cyan-dark Acsi blandit damnum genitus importunus pecus valde.

.bg-op-1 + .bg-yellow Accumsan interdico lenis metuo persto quidne ratis ut venio voco.

.bg-op-2 + .bg-yellow Mauris obruo pertineo quidem secundum si tation ymo.

.bg-op-3 + .bg-yellow Gravis laoreet neo odio quadrum refoveo.

.bg-op-4 + .bg-yellow Ea lenis natu qui saluto torqueo verto.

.bg-op-5 + .bg-yellow Abluo bene gilvus luctus neo valde.

.bg-op-6 + .bg-yellow Eros ibidem lucidus pecus refero tation tincidunt.

.bg-op-7 + .bg-yellow Adipiscing augue commoveo distineo loquor quadrum quidem usitas veniam.

.bg-op-8 + .bg-yellow Abdo amet duis enim esca praesent.

.bg-op-9 + .bg-yellow Distineo imputo interdico lenis metuo praesent quidne rusticus.

.bg-op-1 + .bg-slate Antehabeo esse iustum mauris natu plaga si sit tamen valde.

.bg-op-2 + .bg-slate Amet esca exerci gemino humo iaceo jumentum plaga sagaciter.

.bg-op-3 + .bg-slate Abico bene conventio modo nimis pecus plaga similis validus verto.

.bg-op-4 + .bg-slate Abico capto conventio haero illum meus.

.bg-op-5 + .bg-slate Abdo et hos. Cogo comis patria praemitto tincidunt venio.

.bg-op-6 + .bg-slate Acsi aptent augue commodo modo si sudo volutpat vulpes.

.bg-op-7 + .bg-slate Amet esca ille nobis sed tamen ut voco wisi.

.bg-op-8 + .bg-slate Adipiscing eligo nunc quidne singularis torqueo.

.bg-op-9 + .bg-slate Abdo antehabeo bene incassum molior sino.

.bg-op-1 + .bg-olive Aptent causa commoveo distineo dolus minim os ratis sudo turpis.

.bg-op-2 + .bg-olive Autem commoveo hendrerit ludus praemitto scisco ulciscor utrum vereor.

.bg-op-3 + .bg-olive Abico blandit illum si ulciscor.

.bg-op-4 + .bg-olive Decet distineo haero natu nimis paulatim turpis verto.

.bg-op-5 + .bg-olive Comis conventio enim ex inhibeo letalis modo utinam venio.

.bg-op-6 + .bg-olive Cogo exerci inhibeo quidem vero.

.bg-op-7 + .bg-olive Diam et gilvus lobortis sed.

.bg-op-8 + .bg-olive Abigo et luctus nobis proprius tego velit.

.bg-op-9 + .bg-olive Aptent loquor mos. Aptent caecus neque nunc refoveo sed venio.

.bg-op-1 + .bg-teal Commoveo conventio defui interdico lenis nobis ratis sed tamen vereor.

.bg-op-2 + .bg-teal Abbas acsi comis dignissim importunus mauris patria te tum.

.bg-op-3 + .bg-teal Ad blandit ibidem pagus.

.bg-op-4 + .bg-teal Camur humo jus loquor proprius scisco sed similis vereor.

.bg-op-5 + .bg-teal Augue commoveo lucidus ludus melior neo sagaciter secundum torqueo usitas.

.bg-op-6 + .bg-teal Ad ea ratis vindico.

.bg-op-7 + .bg-teal Capto iaceo natu wisi.

.bg-op-8 + .bg-teal Blandit cogo dignissim os scisco torqueo.

.bg-op-9 + .bg-teal Fere inhibeo interdico metuo qui torqueo ymo.

.bg-op-1 + .bg-green-bright Ex feugiat nulla venio.

.bg-op-2 + .bg-green-bright At blandit consectetuer facilisi hendrerit lenis mos pecus quis turpis.

.bg-op-3 + .bg-green-bright Amet ea exerci jugis lenis quia typicus valde zelus.

.bg-op-4 + .bg-green-bright Dolus odio paulatim quibus quidem refoveo.

.bg-op-5 + .bg-green-bright Aliquam autem exerci gilvus illum refero.

.bg-op-6 + .bg-green-bright Illum neo nisl. Capto incassum loquor probo utinam velit.

.bg-op-7 + .bg-green-bright Abbas dolore exputo iaceo lobortis melior obruo sed tation vulpes.

.bg-op-8 + .bg-green-bright At jugis modo neo paratus suscipit.

.bg-op-9 + .bg-green-bright Ad dignissim ea iaceo importunus scisco validus.


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 Erat similis vicis vindico. Accumsan camur damnum inhibeo ratis scisco typicus validus veniam virtus.
.border-info At causa jugis jumentum lobortis loquor lucidus rusticus.
.border-success Aliquam hendrerit probo. Dolus esca humo saepius vicis ymo.
.border-warning Abluo at inhibeo macto metuo occuro sagaciter tation.
.border-danger Ad facilisis ille importunus luctus ludus molior odio paratus ulciscor.
.border-grey Aliquam brevitas pagus. Comis modo natu tego ymo.
.border-grey-dark Iaceo pertineo sudo te tego vero.
.border-primary-faded Feugiat os praemitto veniam ymo. Autem dolor iustum nobis persto plaga qui uxor vel vereor.
.border-primary-dark Feugiat iusto jugis praesent. Elit quia tum.
.border-dark Accumsan appellatio autem magna patria. Euismod laoreet odio olim patria.
.border-light Consequat eu imputo lucidus rusticus scisco virtus.
.border-green Abico commoveo cui dignissim genitus nulla oppeto scisco.
.border-red Brevitas camur feugiat ibidem mauris melior nutus quadrum quibus utinam.
.border-blue Esca inhibeo nimis nostrud paratus te tincidunt vulpes wisi.
.border-purple Decet et sudo vulputate. Aptent commoveo esse illum proprius sagaciter tincidunt.
.border-pink Ad commodo tation tum. Acsi diam distineo natu paratus quidem quidne venio.
.border-orange Caecus ideo metuo. Bene facilisis jumentum lenis lucidus qui quia tamen ullamcorper.
.border-lime Ad capto defui immitto oppeto saluto.
.border-blue-dark Dignissim enim molior zelus. Abigo acsi aptent cogo dolus esse iriure pala tum verto.
.border-red-dark Inhibeo interdico vereor. Ad brevitas magna virtus.
.border-brown Eros vicis voco. Euismod ille molior qui usitas utinam.
.border-cyan-dark Abico brevitas consectetuer decet exputo fere modo proprius sit uxor.
.border-yellow Abigo aliquip immitto jumentum macto pala venio.
.border-slate Cogo dignissim ideo uxor wisi. Abbas amet decet lenis mos nimis nostrud usitas validus.
.border-olive Eu huic mauris molior pecus similis.
.border-teal Aliquam autem enim feugiat nunc nutus.
.border-green-bright Abico enim mauris natu pagus usitas.

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