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 Diam exputo letalis ullamcorper. Illum nulla roto.

.text-primary Aptent iriure singularis tego. Appellatio dolor nimis nulla rusticus.

.text-info Abluo commoveo defui feugiat haero quibus rusticus veniam.

.text-success Nisl pagus praemitto ut. Abigo dignissim gravis hos suscipere utinam velit.

.text-warning Commodo genitus humo importunus nulla os plaga typicus voco.

.text-danger Consequat cui saepius. Lenis letalis mos.

.text-white Brevitas decet loquor macto pala validus vulpes.

.text-dark Adipiscing causa eros lucidus olim. Dignissim gilvus lenis neo nunc obruo pertineo turpis vindico.

.text-light Ad appellatio eligo olim si velit.

.text-grey Acsi antehabeo exerci feugiat jugis nisl quae sit ullamcorper vindico.

.text-grey-dark Bene esse et gilvus os similis utinam.

.text-primary-faded Ad iriure jugis oppeto os sed ulciscor.

.text-primary-dark Augue bene decet duis illum luptatum mauris singularis.

.text-green Erat fere gemino hos jugis mauris metuo sagaciter turpis wisi.

.text-red Causa cogo eligo facilisis iriure natu odio quidne.

.text-blue Blandit dolore jumentum ludus mos praesent si tego ut.

.text-purple Antehabeo augue elit fere feugiat huic nimis nunc.

.text-pink Commodo neque nostrud nunc typicus. Acsi at causa tation tego.

.text-orange Abbas hendrerit minim nimis pecus suscipit.

.text-lime Esca metuo natu proprius refero vereor.

.text-blue-dark Abluo brevitas caecus feugiat lobortis magna os quae.

.text-red-dark Iaceo oppeto sagaciter tincidunt utrum vulputate.

.text-brown At bene laoreet pagus valetudo. Diam hos pala wisi.

.text-cyan-dark Aliquam blandit caecus duis elit genitus modo usitas.

.text-yellow Erat esse exputo pagus sed vel.

.text-slate At in loquor nisl. Appellatio cogo esse obruo vel.

.text-olive Plaga proprius quadrum. Abico conventio eu iriure jumentum pagus ulciscor valetudo verto.

.text-teal Antehabeo gravis immitto pneum qui. Fere huic letalis natu paulatim quibus torqueo ulciscor utrum vero.

.text-green-bright At autem elit exerci feugiat iaceo luptatum.


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 At jumentum luctus mos nisl nobis os pertineo ymo.

.bg-grey Luctus pagus quis utrum virtus. Aptent autem elit hos ille interdico ludus quis virtus zelus.

.bg-grey-dark Abigo cogo consequat minim molior natu paratus rusticus.

.bg-primary Ille magna natu quadrum sino wisi.

.bg-primary-faded Aliquip commodo eum lobortis metuo mos neo nulla velit vindico.

.bg-primary-dark Diam ea exerci ludus paratus quidem refoveo tum turpis zelus.

.bg-info Aliquip at diam gemino genitus laoreet magna olim.

.bg-success Dolus et euismod ideo iriure iustum lobortis nisl sino.

.bg-warning Esse importunus tincidunt. Abico abigo lobortis metuo mos nostrud obruo plaga pneum refero.

.bg-danger Abdo acsi dolor ex letalis luctus nibh paratus tego torqueo.

.bg-dark Causa consequat macto praesent quia tincidunt vero wisi.

.bg-light Abico cui facilisis modo saluto sudo.

.bg-shadow Abbas antehabeo at huic metuo occuro virtus.

.bg-gradient Adipiscing consequat nisl sit te. Facilisi facilisis quidne.

.bg-gradient-flip Camur exerci exputo illum jus occuro quae sudo torqueo vicis.

.bg-green Accumsan importunus neque singularis. Abluo brevitas pagus praemitto typicus virtus.

.bg-red Aliquip eligo huic mos nibh ut utinam verto.

.bg-blue Cogo elit nostrud quibus valde. Aliquip autem enim euismod nulla qui quis singularis tincidunt.

.bg-purple Abbas abluo lucidus nobis nutus olim probo.

.bg-pink Aliquip exerci jus modo mos sit.

.bg-orange Abigo jugis sino. Comis pneum vicis.

.bg-lime Laoreet neo premo te turpis vereor.

.bg-blue-dark Ad melior quibus si. Gemino ludus scisco.

.bg-red-dark Ex quibus quidem ullamcorper. Cui elit humo incassum nunc os wisi.

.bg-brown Comis dignissim eros iusto nobis paratus pneum.

.bg-cyan-dark Elit lucidus neo nibh saepius sagaciter.

.bg-yellow Dolor laoreet praesent tincidunt. Consequat duis persto quidem torqueo.

.bg-slate Hos mauris meus. Acsi decet exputo paratus persto scisco.

.bg-olive Bene dolus fere importunus patria quis similis verto virtus wisi.

.bg-teal Acsi causa esse exputo loquor nobis odio tamen.

.bg-green-bright Aliquip amet pala praemitto refoveo vulpes.


Background Colour Opacity

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

.bg-op-1 + .bg-faded Ideo quae rusticus. Amet causa commoveo defui esca os paratus pecus si ut.

.bg-op-2 + .bg-faded Capto cogo enim loquor odio os proprius tincidunt vereor wisi.

.bg-op-3 + .bg-faded Aliquip damnum ea fere lenis minim modo nutus occuro vel.

.bg-op-4 + .bg-faded Abigo aptent dolus ea euismod vereor virtus voco.

.bg-op-5 + .bg-faded Accumsan brevitas euismod eum plaga tincidunt validus.

.bg-op-6 + .bg-faded Cui esse feugiat luctus pneum ut.

.bg-op-7 + .bg-faded Exerci fere ibidem pneum valde verto.

.bg-op-8 + .bg-faded Iustum patria ratis scisco.

.bg-op-9 + .bg-faded Camur humo meus neque populus tincidunt valde vulputate.

.bg-op-1 + .bg-grey Luptatum pala sed tamen valde velit.

.bg-op-2 + .bg-grey Cogo dignissim interdico jus nobis proprius refoveo secundum valde.

.bg-op-3 + .bg-grey Adipiscing letalis minim nobis pertineo quia vereor vindico.

.bg-op-4 + .bg-grey At consectetuer cui facilisis feugiat jus lobortis occuro proprius.

.bg-op-5 + .bg-grey Singularis sudo vulpes. Abigo autem capto diam gravis ideo odio roto valetudo.

.bg-op-6 + .bg-grey In luctus modo paratus suscipit volutpat.

.bg-op-7 + .bg-grey Acsi antehabeo consectetuer huic luctus similis suscipere vero volutpat.

.bg-op-8 + .bg-grey Duis enim inhibeo tego vicis ymo.

.bg-op-9 + .bg-grey Ad aliquip autem dignissim laoreet lobortis probo.

.bg-op-1 + .bg-grey-dark Ille magna melior neque quidne usitas.

.bg-op-2 + .bg-grey-dark Diam gravis iustum melior nisl nunc paratus populus vereor.

.bg-op-3 + .bg-grey-dark Antehabeo esse melior nobis nulla refero typicus.

.bg-op-4 + .bg-grey-dark Os scisco similis ut.

.bg-op-5 + .bg-grey-dark Adipiscing augue cogo dolor luptatum neo nutus saluto suscipit venio.

.bg-op-6 + .bg-grey-dark Autem dolor dolore minim saluto sit virtus.

.bg-op-7 + .bg-grey-dark Gravis loquor nulla suscipit typicus.

.bg-op-8 + .bg-grey-dark Abico diam vel. Ex ideo interdico loquor nobis saluto torqueo utrum valetudo velit.

.bg-op-9 + .bg-grey-dark Humo iriure obruo patria sagaciter suscipit torqueo usitas valde.

.bg-op-1 + .bg-primary Dolor ibidem letalis persto.

.bg-op-2 + .bg-primary Eros meus modo. Dignissim premo secundum sudo validus ymo.

.bg-op-3 + .bg-primary Molior nimis quidne ulciscor valetudo verto.

.bg-op-4 + .bg-primary Esse facilisis interdico iriure letalis mos sudo.

.bg-op-5 + .bg-primary Bene damnum genitus in.

.bg-op-6 + .bg-primary Augue erat esca laoreet populus vulpes.

.bg-op-7 + .bg-primary At commoveo euismod facilisi lobortis neque nutus scisco typicus volutpat.

.bg-op-8 + .bg-primary Abluo dignissim distineo luptatum melior ut vulpes.

.bg-op-9 + .bg-primary Cui gemino genitus luctus metuo neo pecus scisco.

.bg-op-1 + .bg-primary-faded Ad importunus occuro utrum.

.bg-op-2 + .bg-primary-faded Distineo gemino tation. Bene diam dolor gemino ibidem iriure jugis vulputate.

.bg-op-3 + .bg-primary-faded Loquor magna nutus. In modo nunc paratus persto sino virtus.

.bg-op-4 + .bg-primary-faded Ibidem mauris paulatim refoveo.

.bg-op-5 + .bg-primary-faded Appellatio in iusto pala qui saluto vulputate.

.bg-op-6 + .bg-primary-faded Autem lenis meus pecus.

.bg-op-7 + .bg-primary-faded Appellatio gilvus jumentum loquor nobis odio pala quis.

.bg-op-8 + .bg-primary-faded Abbas ibidem nimis quae roto.

.bg-op-9 + .bg-primary-faded Commodo consequat enim eros minim patria paulatim quae volutpat.

.bg-op-1 + .bg-primary-dark Brevitas dolor eu lenis nibh premo refero tincidunt ut wisi.

.bg-op-2 + .bg-primary-dark Aliquam blandit interdico natu nutus pala premo qui verto.

.bg-op-3 + .bg-primary-dark Adipiscing causa ex gravis immitto lenis meus refero.

.bg-op-4 + .bg-primary-dark Brevitas caecus ideo iustum macto patria rusticus tamen valde vulputate.

.bg-op-5 + .bg-primary-dark Autem elit enim euismod facilisi molior saepius.

.bg-op-6 + .bg-primary-dark Brevitas diam ea eros nutus praemitto si ymo.

.bg-op-7 + .bg-primary-dark Causa enim modo natu praemitto similis validus.

.bg-op-8 + .bg-primary-dark Gemino iusto lucidus nibh obruo paratus quibus quidem refoveo.

.bg-op-9 + .bg-primary-dark Aliquam blandit luctus nulla nunc roto.

.bg-op-1 + .bg-info Defui hendrerit neo oppeto pneum quae sed.

.bg-op-2 + .bg-info Antehabeo esse eu facilisi importunus praemitto quidne ulciscor usitas.

.bg-op-3 + .bg-info Ad defui esse importunus sudo turpis.

.bg-op-4 + .bg-info Autem bene distineo iusto oppeto quis venio.

.bg-op-5 + .bg-info Autem eros et eu validus vulputate.

.bg-op-6 + .bg-info Aliquip erat haero letalis nimis veniam voco.

.bg-op-7 + .bg-info Abluo aliquam dignissim exputo facilisi.

.bg-op-8 + .bg-info Consectetuer eros luptatum nimis sino te typicus.

.bg-op-9 + .bg-info Gilvus metuo odio pneum sino te ulciscor vulputate.

.bg-op-1 + .bg-success Brevitas comis eu jumentum natu ullamcorper usitas valetudo.

.bg-op-2 + .bg-success Genitus iaceo lucidus oppeto tum.

.bg-op-3 + .bg-success Amet augue melior probo quis velit.

.bg-op-4 + .bg-success Genitus iusto molior vereor.

.bg-op-5 + .bg-success Et pneum quibus refero scisco suscipit typicus vel voco.

.bg-op-6 + .bg-success Distineo ideo nobis nulla olim plaga refero venio ymo.

.bg-op-7 + .bg-success Accumsan augue cogo esse euismod praesent similis wisi.

.bg-op-8 + .bg-success Adipiscing aliquip luctus nibh pagus proprius ratis utinam valetudo.

.bg-op-9 + .bg-success Quis secundum vulpes ymo.

.bg-op-1 + .bg-warning Aliquam amet bene esca facilisis iustum jus sit.

.bg-op-2 + .bg-warning Adipiscing defui hendrerit nimis nulla occuro sagaciter.

.bg-op-3 + .bg-warning Acsi commoveo ea erat minim patria sino.

.bg-op-4 + .bg-warning Distineo erat illum importunus lucidus pertineo quidem suscipere.

.bg-op-5 + .bg-warning Cogo comis incassum. Cui eros magna nimis nunc pertineo quidem.

.bg-op-6 + .bg-warning Dignissim torqueo vindico. Abico iusto mos pala praemitto refoveo tincidunt verto.

.bg-op-7 + .bg-warning Appellatio comis et natu persto vero vicis.

.bg-op-8 + .bg-warning Caecus enim minim quidem similis suscipere.

.bg-op-9 + .bg-warning Abdo enim eu loquor oppeto tego.

.bg-op-1 + .bg-danger Abbas haero refero tum vereor.

.bg-op-2 + .bg-danger Abico huic macto neque probo sudo typicus utinam.

.bg-op-3 + .bg-danger Abico ad dolor eligo lobortis minim quibus sed voco.

.bg-op-4 + .bg-danger Appellatio capto eros feugiat obruo paulatim refero ullamcorper utrum.

.bg-op-5 + .bg-danger Adipiscing causa cui lenis lobortis natu tincidunt uxor.

.bg-op-6 + .bg-danger Eum huic neque populus veniam vereor.

.bg-op-7 + .bg-danger Accumsan diam luptatum natu nunc proprius usitas ymo.

.bg-op-8 + .bg-danger Aptent comis lenis macto magna persto sudo tamen vereor ymo.

.bg-op-9 + .bg-danger Cogo elit iusto jumentum luptatum.

.bg-op-1 + .bg-dark Dolore exerci imputo odio.

.bg-op-2 + .bg-dark Defui quae sudo tego zelus.

.bg-op-3 + .bg-dark Cogo dolus et facilisis secundum uxor.

.bg-op-4 + .bg-dark Abico euismod feugiat imputo jumentum nulla proprius saluto ut.

.bg-op-5 + .bg-dark Abdo consectetuer eu ex iusto meus mos ratis sagaciter uxor.

.bg-op-6 + .bg-dark Natu nisl quia. Conventio valde verto.

.bg-op-7 + .bg-dark Abluo gemino nimis pertineo sino suscipit tamen.

.bg-op-8 + .bg-dark Abbas lucidus quidem. Causa cogo defui nunc pagus tamen virtus.

.bg-op-9 + .bg-dark Ad eu gravis pertineo plaga quae quia utrum.

.bg-op-1 + .bg-light Commoveo distineo iaceo quidne velit volutpat.

.bg-op-2 + .bg-light Aliquip damnum ex hendrerit hos illum valde.

.bg-op-3 + .bg-light Elit pecus valde vindico.

.bg-op-4 + .bg-light Capto cui dolor in neque singularis tum.

.bg-op-5 + .bg-light Capto defui enim iustum mos nibh patria plaga sed vulputate.

.bg-op-6 + .bg-light Adipiscing aliquip brevitas cogo commodo distineo importunus scisco vero volutpat.

.bg-op-7 + .bg-light Abdo facilisis iriure nimis nunc nutus os quia sudo veniam.

.bg-op-8 + .bg-light Duis occuro praesent venio.

.bg-op-9 + .bg-light Abdo conventio et facilisis hos pertineo praesent sit tincidunt wisi.

.bg-op-1 + .bg-gradient Camur distineo imputo luptatum neque obruo pertineo populus.

.bg-op-2 + .bg-gradient Consectetuer conventio exputo tego veniam vero volutpat.

.bg-op-3 + .bg-gradient Aliquam autem conventio dolor eu hendrerit melior nostrud vicis.

.bg-op-4 + .bg-gradient Abico ad brevitas damnum eros incassum minim saepius te.

.bg-op-5 + .bg-gradient Cogo exerci haero inhibeo typicus.

.bg-op-6 + .bg-gradient Camur capto diam dolus esca feugiat ideo.

.bg-op-7 + .bg-gradient Distineo occuro paratus qui refero roto utinam uxor.

.bg-op-8 + .bg-gradient Decet ille quia usitas valde.

.bg-op-9 + .bg-gradient Amet commoveo inhibeo loquor minim refero sudo veniam.

.bg-op-1 + .bg-gradient-flip Jugis molior secundum. Hendrerit jugis letalis mauris olim tamen ullamcorper ut.

.bg-op-2 + .bg-gradient-flip Comis diam dignissim ea modo nibh verto.

.bg-op-3 + .bg-gradient-flip Accumsan aliquip commodo defui exerci haero refoveo.

.bg-op-4 + .bg-gradient-flip Abluo duis gravis nisl nunc quadrum scisco tincidunt venio.

.bg-op-5 + .bg-gradient-flip Exerci exputo melior meus.

.bg-op-6 + .bg-gradient-flip Caecus cogo ea lobortis nobis pala similis tincidunt vel virtus.

.bg-op-7 + .bg-gradient-flip Lobortis pagus quibus sagaciter tum utrum uxor ymo.

.bg-op-8 + .bg-gradient-flip Dolus luctus nisl tation tego typicus vel.

.bg-op-9 + .bg-gradient-flip Duis si velit vulpes.

.bg-op-1 + .bg-green Consequat quibus virtus. Consectetuer exerci ideo jus lenis obruo persto vicis wisi.

.bg-op-2 + .bg-green Appellatio genitus laoreet. Adipiscing dolor imputo vulpes.

.bg-op-3 + .bg-green Abigo ea enim esse letalis modo natu paulatim sino.

.bg-op-4 + .bg-green Abico in quibus utinam.

.bg-op-5 + .bg-green Abigo appellatio causa interdico neque quadrum.

.bg-op-6 + .bg-green Eligo eu minim obruo premo refoveo tation.

.bg-op-7 + .bg-green Pala pneum quadrum. Aliquip genitus ymo.

.bg-op-8 + .bg-green Aliquip diam laoreet magna pagus paulatim ratis rusticus ullamcorper ymo.

.bg-op-9 + .bg-green Eligo esca iaceo illum metuo praesent quia quidne suscipit.

.bg-op-1 + .bg-red Consectetuer fere occuro os premo rusticus secundum ut voco wisi.

.bg-op-2 + .bg-red Autem gemino olim tincidunt vero.

.bg-op-3 + .bg-red Duis loquor saepius tamen.

.bg-op-4 + .bg-red Appellatio commoveo neo premo quibus quidem torqueo veniam.

.bg-op-5 + .bg-red Duis eligo in oppeto plaga sed suscipere vicis virtus wisi.

.bg-op-6 + .bg-red Elit mauris neque sit.

.bg-op-7 + .bg-red Bene gravis immitto in nutus os plaga tego vereor.

.bg-op-8 + .bg-red Aliquam amet euismod hendrerit molior nibh pagus roto.

.bg-op-9 + .bg-red Abigo consequat distineo euismod molior paulatim secundum.

.bg-op-1 + .bg-blue Consectetuer cui humo sino vero.

.bg-op-2 + .bg-blue Ad aliquam imputo qui torqueo ulciscor.

.bg-op-3 + .bg-blue Autem ea enim genitus rusticus torqueo ullamcorper usitas utinam uxor.

.bg-op-4 + .bg-blue Elit fere importunus inhibeo premo suscipit.

.bg-op-5 + .bg-blue Accumsan acsi cogo imputo inhibeo iriure jugis quis virtus zelus.

.bg-op-6 + .bg-blue Elit feugiat nimis obruo quibus vel vicis.

.bg-op-7 + .bg-blue Esse meus olim sagaciter si te validus.

.bg-op-8 + .bg-blue Aptent causa euismod nutus pagus pertineo tego typicus volutpat.

.bg-op-9 + .bg-blue Appellatio feugiat nutus similis ut.

.bg-op-1 + .bg-purple Defui modo nobis. Aliquip at augue comis gemino jus ludus metuo.

.bg-op-2 + .bg-purple Aliquip huic iaceo lobortis pertineo scisco sit valetudo.

.bg-op-3 + .bg-purple Amet at facilisi metuo refero sed sudo.

.bg-op-4 + .bg-purple Abigo at blandit esca esse illum importunus inhibeo.

.bg-op-5 + .bg-purple Jumentum laoreet nobis olim vindico vulpes.

.bg-op-6 + .bg-purple Capto ea gravis lobortis roto si.

.bg-op-7 + .bg-purple Acsi blandit nutus veniam vero.

.bg-op-8 + .bg-purple Abbas elit pagus roto tation ullamcorper utinam.

.bg-op-9 + .bg-purple Accumsan nutus sagaciter sino tamen valde.

.bg-op-1 + .bg-pink Amet camur loquor molior paratus sino venio vulputate.

.bg-op-2 + .bg-pink Abico adipiscing hos. At dignissim ea populus.

.bg-op-3 + .bg-pink Camur dolus iriure laoreet lucidus praesent quadrum ut valetudo.

.bg-op-4 + .bg-pink Causa dolor duis eum genitus incassum mauris praesent sino.

.bg-op-5 + .bg-pink Decet defui incassum inhibeo neo nimis obruo quadrum quia sagaciter.

.bg-op-6 + .bg-pink At ea esca exputo iustum os quibus secundum ulciscor.

.bg-op-7 + .bg-pink Acsi eros letalis praesent.

.bg-op-8 + .bg-pink Proprius te vicis. Et gravis incassum luctus praemitto tamen venio vulputate.

.bg-op-9 + .bg-pink Abluo adipiscing dignissim fere persto.

.bg-op-1 + .bg-orange Ad eu exerci feugiat natu neque oppeto pecus singularis vel.

.bg-op-2 + .bg-orange Accumsan damnum lobortis neo olim pagus tego venio vero.

.bg-op-3 + .bg-orange Bene eligo interdico nisl odio olim pecus praesent scisco volutpat.

.bg-op-4 + .bg-orange Ad appellatio at enim mauris probo tincidunt.

.bg-op-5 + .bg-orange Eligo neque nutus pagus quidne sed vulputate.

.bg-op-6 + .bg-orange Commoveo patria sino tamen typicus.

.bg-op-7 + .bg-orange Defui ex pecus probo tamen torqueo.

.bg-op-8 + .bg-orange Dolor immitto iustum minim pagus quae si torqueo.

.bg-op-9 + .bg-orange Diam eum exputo ibidem ideo proprius typicus.

.bg-op-1 + .bg-lime Abico bene eros incassum populus quadrum te.

.bg-op-2 + .bg-lime Aliquam commodo haero metuo torqueo ut virtus vulpes.

.bg-op-3 + .bg-lime Distineo illum nulla pecus probo ratis.

.bg-op-4 + .bg-lime Eligo iaceo letalis obruo si tincidunt valetudo vicis.

.bg-op-5 + .bg-lime Aliquam interdico quae. Brevitas elit hos modo secundum virtus voco.

.bg-op-6 + .bg-lime Adipiscing enim gemino huic nulla qui rusticus turpis.

.bg-op-7 + .bg-lime Eligo venio verto. Abico commodo ex facilisis ideo immitto nulla saluto.

.bg-op-8 + .bg-lime Aliquam quadrum singularis vereor vulputate zelus.

.bg-op-9 + .bg-lime Cogo commoveo nibh typicus utrum.

.bg-op-1 + .bg-blue-dark Cui haero hos ulciscor.

.bg-op-2 + .bg-blue-dark Duis elit esca luctus melior premo qui sudo voco.

.bg-op-3 + .bg-blue-dark Adipiscing commoveo conventio enim jumentum ludus paulatim pneum.

.bg-op-4 + .bg-blue-dark Adipiscing et facilisis refoveo.

.bg-op-5 + .bg-blue-dark Ad antehabeo conventio ideo lobortis luctus patria pecus sit utrum.

.bg-op-6 + .bg-blue-dark Adipiscing caecus dolore elit genitus gilvus ibidem obruo roto venio.

.bg-op-7 + .bg-blue-dark Adipiscing consectetuer ea et neo nunc pagus proprius sudo vulpes.

.bg-op-8 + .bg-blue-dark Comis gilvus gravis huic ille paratus tincidunt vulputate.

.bg-op-9 + .bg-blue-dark Cui dolus exputo laoreet mos nostrud olim saluto vero.

.bg-op-1 + .bg-red-dark Amet at ea persto probo ymo.

.bg-op-2 + .bg-red-dark Abigo eum facilisi incassum ludus meus modo veniam vindico.

.bg-op-3 + .bg-red-dark Hos turpis zelus. Abigo capto paulatim sudo te.

.bg-op-4 + .bg-red-dark Appellatio cogo defui dolor gravis.

.bg-op-5 + .bg-red-dark Blandit commoveo dolor pertineo sit wisi.

.bg-op-6 + .bg-red-dark Cogo haero natu praemitto wisi.

.bg-op-7 + .bg-red-dark Acsi duis eligo nostrud olim.

.bg-op-8 + .bg-red-dark Amet laoreet sudo. Lobortis os paulatim tamen.

.bg-op-9 + .bg-red-dark Adipiscing nunc scisco. Causa ea genitus iaceo imputo laoreet quis te vicis voco.

.bg-op-1 + .bg-brown Abigo eu euismod exputo immitto pala probo quidem suscipit veniam.

.bg-op-2 + .bg-brown Accumsan comis letalis pala volutpat.

.bg-op-3 + .bg-brown Antehabeo brevitas dolore tamen tincidunt.

.bg-op-4 + .bg-brown Bene ea exputo hos ille lenis melior ratis vicis.

.bg-op-5 + .bg-brown Conventio illum iusto praemitto.

.bg-op-6 + .bg-brown Duis eligo tum. Aliquam antehabeo fere minim nulla oppeto probo ratis rusticus sed.

.bg-op-7 + .bg-brown Aptent cui diam lucidus si typicus.

.bg-op-8 + .bg-brown Autem cui quadrum. Fere lobortis os verto.

.bg-op-9 + .bg-brown Adipiscing eligo facilisi luctus magna mauris patria tincidunt vel veniam.

.bg-op-1 + .bg-cyan-dark Capto exerci nibh paratus refoveo suscipere.

.bg-op-2 + .bg-cyan-dark Sagaciter tation te ulciscor venio.

.bg-op-3 + .bg-cyan-dark Imputo letalis luctus molior pala.

.bg-op-4 + .bg-cyan-dark Bene camur ea et luctus macto nostrud pneum vereor.

.bg-op-5 + .bg-cyan-dark Dolus elit exputo nutus refero.

.bg-op-6 + .bg-cyan-dark Decet et hos imputo qui suscipere vulpes.

.bg-op-7 + .bg-cyan-dark Ea euismod plaga. Comis esse fere ideo immitto macto neque pagus.

.bg-op-8 + .bg-cyan-dark Camur enim pertineo torqueo.

.bg-op-9 + .bg-cyan-dark Gemino haero luptatum nutus paratus rusticus.

.bg-op-1 + .bg-yellow Commoveo elit hendrerit interdico ratis suscipere tincidunt utrum.

.bg-op-2 + .bg-yellow Amet cui facilisi mauris nibh pertineo quidem saluto turpis.

.bg-op-3 + .bg-yellow Camur commoveo eligo lucidus proprius quia sino velit vulpes.

.bg-op-4 + .bg-yellow Abico illum obruo virtus.

.bg-op-5 + .bg-yellow Gravis illum incassum neo nobis ut.

.bg-op-6 + .bg-yellow Aliquam feugiat jugis jus nimis nostrud paratus tego tum.

.bg-op-7 + .bg-yellow Abdo acsi comis haero lucidus vero.

.bg-op-8 + .bg-yellow Abbas duis et patria quis saluto turpis ut valde.

.bg-op-9 + .bg-yellow Accumsan comis genitus ille letalis quadrum validus veniam vindico zelus.

.bg-op-1 + .bg-slate Autem dolor laoreet minim quadrum tamen torqueo usitas verto.

.bg-op-2 + .bg-slate At consequat defui ideo interdico refoveo secundum tation validus venio.

.bg-op-3 + .bg-slate Jumentum jus letalis luptatum.

.bg-op-4 + .bg-slate Abico autem exputo meus olim.

.bg-op-5 + .bg-slate Enim ideo meus nibh nobis patria qui saepius sit vereor.

.bg-op-6 + .bg-slate Blandit jus suscipere suscipit vereor virtus.

.bg-op-7 + .bg-slate Damnum dolor euismod ibidem lobortis minim oppeto saluto secundum torqueo.

.bg-op-8 + .bg-slate Dolore enim hos quidem sudo vero zelus.

.bg-op-9 + .bg-slate Bene dignissim luctus probo sed volutpat vulputate.

.bg-op-1 + .bg-olive Imputo iusto nibh patria scisco vereor virtus volutpat vulputate.

.bg-op-2 + .bg-olive Accumsan brevitas eu ille inhibeo paulatim quia usitas velit.

.bg-op-3 + .bg-olive Accumsan neo persto premo venio vicis.

.bg-op-4 + .bg-olive Fere similis verto. Acsi damnum genitus pagus tation vulputate.

.bg-op-5 + .bg-olive Feugiat gilvus letalis neque proprius quia ullamcorper velit vulpes.

.bg-op-6 + .bg-olive Dolus haero iustum magna melior patria paulatim suscipit tincidunt utrum.

.bg-op-7 + .bg-olive Amet eligo exerci magna patria praemitto quae typicus.

.bg-op-8 + .bg-olive Sit torqueo tum. Capto gemino nisl tego vereor vulputate.

.bg-op-9 + .bg-olive Facilisi gemino interdico. Augue fere iusto melior ratis sino wisi.

.bg-op-1 + .bg-teal Camur dolore elit ideo molior.

.bg-op-2 + .bg-teal Bene consectetuer letalis verto.

.bg-op-3 + .bg-teal Luctus metuo nutus quidne turpis.

.bg-op-4 + .bg-teal Amet aptent modo praemitto sed turpis typicus.

.bg-op-5 + .bg-teal Antehabeo caecus exputo gilvus inhibeo lobortis natu sino vindico.

.bg-op-6 + .bg-teal Aliquam appellatio camur gravis ibidem natu nimis occuro singularis te.

.bg-op-7 + .bg-teal Euismod inhibeo loquor zelus.

.bg-op-8 + .bg-teal Huic nobis odio pertineo plaga suscipere utrum verto vindico.

.bg-op-9 + .bg-teal Aliquip ea pala quia.

.bg-op-1 + .bg-green-bright At genitus jumentum quia ut.

.bg-op-2 + .bg-green-bright Ille jus ludus mauris nobis patria tincidunt vereor.

.bg-op-3 + .bg-green-bright At eum neque os quadrum sed tamen te vero wisi.

.bg-op-4 + .bg-green-bright Euismod facilisi gilvus iustum metuo mos paulatim persto.

.bg-op-5 + .bg-green-bright Decet laoreet te vicis.

.bg-op-6 + .bg-green-bright At causa duis esse hendrerit iriure utinam.

.bg-op-7 + .bg-green-bright Ideo lucidus luptatum sit valetudo.

.bg-op-8 + .bg-green-bright Acsi gemino lobortis uxor.

.bg-op-9 + .bg-green-bright Consectetuer consequat cui ratis refoveo vero vicis.


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 Comis commoveo decet hendrerit huic jus nulla quidne refero tamen.
.border-info Dolor ex patria. Causa decet iustum jumentum neque si utinam ymo.
.border-success Acsi humo iriure lenis volutpat. Fere jugis quae refoveo vicis vulputate.
.border-warning Bene erat ex huic ille modo nostrud obruo qui.
.border-danger Eligo fere ille os rusticus. Hendrerit importunus inhibeo natu rusticus turpis usitas uxor vel venio.
.border-grey Antehabeo conventio in jus nutus praemitto secundum utrum voco.
.border-grey-dark Modo quidne sagaciter tego tincidunt. Abdo ea iriure quia.
.border-primary-faded Adipiscing autem dolus eum lobortis premo saluto valde venio.
.border-primary-dark Genitus haero macto nulla quia. Amet appellatio obruo quia quibus quidne vereor verto virtus.
.border-dark Diam metuo saluto suscipere. Accumsan aliquam blandit eum immitto minim pecus suscipit.
.border-light Fere importunus venio. Damnum duis facilisis macto nostrud os quidne quis secundum ymo.
.border-green Consectetuer haero laoreet modo nutus quae similis valetudo zelus.
.border-red Illum patria quae. Damnum quis tego.
.border-blue Appellatio euismod immitto neo nimis quadrum ratis turpis.
.border-purple Acsi occuro singularis vulputate. Bene consequat conventio enim jugis nunc quadrum quis venio.
.border-pink Abluo augue erat esca immitto importunus quibus rusticus vel.
.border-orange Abico appellatio lobortis utinam. Defui haero laoreet luptatum.
.border-lime Capto decet gravis incassum obruo paratus premo probo singularis vicis.
.border-blue-dark Abbas imputo loquor singularis. Caecus consequat dolor ea natu quis ymo.
.border-red-dark Natu sed tamen ullamcorper vindico. Aliquip comis commoveo lucidus neo nostrud occuro qui turpis.
.border-brown Haero iaceo luptatum qui ullamcorper utinam.
.border-cyan-dark Illum interdico quibus quidne similis. Abigo humo valetudo verto vindico.
.border-yellow Abbas iustum luptatum similis valde voco vulputate.
.border-slate Amet gravis occuro sagaciter. Abluo aliquip dolor hendrerit imputo nostrud nunc secundum te veniam.
.border-olive Acsi nobis valetudo validus. Defui gemino ibidem ideo incassum letalis nobis quae.
.border-teal Cogo lenis paratus pertineo tincidunt. Decet defui imputo mos nibh venio.
.border-green-bright Brevitas defui facilisis laoreet obruo pecus persto sed voco.

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