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 Augue iusto mos quia quidne tego turpis.

.text-primary Abico conventio elit qui quibus saluto similis ut utinam.

.text-info Abluo immitto magna singularis veniam. Eligo facilisis gemino gilvus imputo iusto minim rusticus zelus.

.text-success Consequat distineo duis. Appellatio causa gravis humo mos pala roto sed utinam vindico.

.text-warning Accumsan ea gravis iaceo mauris nimis nostrud persto ulciscor ullamcorper.

.text-danger Blandit dolor olim similis. Dolor in lenis praesent quidem uxor velit.

.text-white Camur causa elit humo jus obruo oppeto venio.

.text-inverse Commodo exerci incassum iusto lucidus refoveo si.

.text-grey Abbas ad capto facilisis interdico jus.

.text-grey-dark Brevitas dolore dolus importunus jumentum proprius.

.text-primary-faded Exputo magna molior. Exputo genitus humo utinam.

.text-primary-darkend Cui exputo quibus ulciscor usitas. Fere jugis secundum.

.text-green Abigo caecus ea erat loquor metuo mos quidem valde.

.text-red Blandit conventio humo similis tamen vulpes.

.text-blue Importunus iusto laoreet qui quidem saepius sagaciter ullamcorper venio voco.

.text-purple Enim erat jumentum pecus vindico. Interdico iusto paratus quis zelus.

.text-pink Abbas damnum loquor luctus populus quae usitas.

.text-orange Adipiscing laoreet plaga qui saepius valde vel velit verto.

.text-lime Comis eu nulla occuro patria. Ea eu magna nulla tation.

.text-blue-dark Abdo esse humo lenis refoveo. Acsi ille ludus os velit virtus.

.text-red-dark Abico brevitas esca iusto lobortis persto.

.text-brown Ex illum nibh obruo quadrum qui vel voco.

.text-cyan-dark Aptent damnum loquor neo nunc occuro saepius saluto utrum.

.text-yellow Exputo interdico iriure. Acsi exerci occuro proprius vicis.

.text-slate Amet diam magna. Conventio eligo jugis paulatim venio vicis.

.text-olive Immitto incassum nutus sit tation virtus.

.text-teal Dolor facilisi gravis ludus usitas. Commoveo ex iaceo immitto iriure laoreet natu obruo occuro tum.

.text-green-bright Abdo esse iaceo jumentum neo pneum.


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-inverse .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 Augue autem duis ex lobortis quis rusticus.

.bg-grey Abluo augue caecus commodo consectetuer defui sit ulciscor.

.bg-grey-dark Aptent autem esca esse interdico nobis sit.

.bg-primary Ad at autem ex gravis letalis natu probo sit suscipit.

.bg-primary-faded Eum nisl pecus praesent velit vicis.

.bg-primary-darkend Facilisis ille nisl nobis nunc. Acsi amet antehabeo commodo similis tation utinam.

.bg-info Antehabeo capto feugiat iaceo iustum tego.

.bg-success Decet facilisi immitto odio pneum quis validus.

.bg-warning Antehabeo damnum lenis meus occuro wisi.

.bg-danger Caecus exputo scisco si. Cui eros hendrerit hos nutus refoveo tum usitas valetudo.

.bg-inverse Ibidem loquor veniam. Cogo dolore fere nutus olim pertineo ulciscor.

.bg-shadow Appellatio ideo illum neque volutpat. Et eu pneum sino uxor valde volutpat.

.bg-gradient Abdo antehabeo decet eum gemino pecus populus refoveo similis.

.bg-gradient-flip Dolore eum fere gemino iaceo importunus jus refero zelus.

.bg-green Fere huic humo ibidem praemitto sagaciter suscipere wisi.

.bg-red Abdo abigo et facilisi haero inhibeo loquor nisl quadrum vereor.

.bg-blue Accumsan facilisi obruo pneum praemitto wisi.

.bg-purple At eros rusticus te tincidunt veniam.

.bg-pink Brevitas diam esca lucidus natu suscipit.

.bg-orange Eum iriure nunc paratus quibus scisco suscipit ulciscor virtus.

.bg-lime Abbas abigo aliquip comis ea eum exputo humo nulla roto.

.bg-blue-dark Duis nulla patria secundum. Abigo capto dolor iusto lobortis nulla roto voco.

.bg-red-dark Amet genitus jumentum nulla quae ratis.

.bg-brown Acsi hendrerit importunus os. Adipiscing commodo consequat esse exputo illum in premo secundum tum.

.bg-cyan-dark Abbas at brevitas in iustum mauris paratus plaga sino wisi.

.bg-yellow Accumsan aliquam erat ludus nibh occuro vel.

.bg-slate Abico consequat damnum decet defui fere inhibeo pneum vel vicis.

.bg-olive Comis commodo dignissim nobis torqueo validus.

.bg-teal Causa commoveo duis iusto. Abbas commodo esse ideo nisl quidem sed suscipit tamen.

.bg-green-bright Aliquip cogo comis euismod inhibeo jugis praemitto turpis.


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 Antehabeo commodo gilvus iusto lucidus tincidunt.

.bg-op-2 + .bg-faded Eligo exputo hos iriure magna molior olim praemitto tincidunt valde.

.bg-op-3 + .bg-faded Caecus consectetuer ex illum singularis typicus virtus.

.bg-op-4 + .bg-faded Eros os utinam vel.

.bg-op-5 + .bg-faded Feugiat gravis suscipit. Aptent bene consectetuer facilisis nobis pneum qui typicus validus velit.

.bg-op-6 + .bg-faded Dolore exerci nisl paratus patria scisco tego utrum.

.bg-op-7 + .bg-faded Et molior quidem tincidunt.

.bg-op-8 + .bg-faded Appellatio metuo mos nisl premo sed torqueo utinam.

.bg-op-9 + .bg-faded Macto magna nobis. Abigo duis ea eum haero sino tincidunt ulciscor.

.bg-op-1 + .bg-grey Abigo autem eum nostrud premo scisco.

.bg-op-2 + .bg-grey Huic ille lobortis magna neque obruo os quae si.

.bg-op-3 + .bg-grey Adipiscing defui loquor pagus si.

.bg-op-4 + .bg-grey Amet jus torqueo. Amet eros volutpat.

.bg-op-5 + .bg-grey Accumsan amet autem euismod facilisi melior meus tincidunt typicus.

.bg-op-6 + .bg-grey Ad neo sudo suscipere vindico.

.bg-op-7 + .bg-grey Qui rusticus suscipere te typicus ulciscor velit verto.

.bg-op-8 + .bg-grey Camur comis jumentum proprius sudo vero.

.bg-op-9 + .bg-grey Defui ex iustum laoreet meus quadrum scisco utinam voco.

.bg-op-1 + .bg-grey-dark Accumsan at augue gilvus lucidus patria valde vicis.

.bg-op-2 + .bg-grey-dark Dignissim et euismod jugis magna nulla sagaciter typicus ulciscor valetudo.

.bg-op-3 + .bg-grey-dark Huic interdico lobortis meus os utrum wisi.

.bg-op-4 + .bg-grey-dark Damnum facilisi humo incassum minim olim praemitto proprius scisco vel.

.bg-op-5 + .bg-grey-dark Dolor feugiat imputo magna paratus refero typicus velit vero.

.bg-op-6 + .bg-grey-dark Adipiscing at facilisi huic humo probo tum utrum vel.

.bg-op-7 + .bg-grey-dark Abigo commoveo eum gilvus luctus nunc.

.bg-op-8 + .bg-grey-dark Causa exputo probo similis vulputate.

.bg-op-9 + .bg-grey-dark Brevitas comis facilisis hendrerit minim pecus refero tation torqueo validus.

.bg-op-1 + .bg-primary Mauris neo oppeto roto tamen.

.bg-op-2 + .bg-primary Exputo fere gravis lobortis nutus quibus quidne.

.bg-op-3 + .bg-primary Aliquam fere nulla rusticus sagaciter virtus.

.bg-op-4 + .bg-primary Camur commodo cui et hendrerit imputo macto torqueo ut verto.

.bg-op-5 + .bg-primary Comis incassum os quidne torqueo uxor vereor.

.bg-op-6 + .bg-primary Consequat eros eum genitus metuo sagaciter valetudo voco.

.bg-op-7 + .bg-primary Accumsan antehabeo distineo ea lucidus nutus os tum.

.bg-op-8 + .bg-primary Causa decet lobortis nibh obruo quadrum singularis valde.

.bg-op-9 + .bg-primary Aptent feugiat metuo voco.

.bg-op-1 + .bg-primary-faded At consectetuer distineo dolore hos pala rusticus velit verto wisi.

.bg-op-2 + .bg-primary-faded Oppeto premo qui te.

.bg-op-3 + .bg-primary-faded Abdo exerci virtus. Ex exerci letalis lobortis plaga praesent premo suscipit.

.bg-op-4 + .bg-primary-faded Adipiscing eu huic mauris praesent rusticus.

.bg-op-5 + .bg-primary-faded Iustum quae ulciscor uxor.

.bg-op-6 + .bg-primary-faded Blandit decet eros melior metuo nulla si venio virtus.

.bg-op-7 + .bg-primary-faded Appellatio consectetuer diam pertineo quae refero.

.bg-op-8 + .bg-primary-faded Abbas elit eu euismod iustum refero scisco verto.

.bg-op-9 + .bg-primary-faded Aliquam eligo humo loquor nibh nimis premo similis.

.bg-op-1 + .bg-primary-darkend Abbas caecus nibh pagus pneum ut vicis.

.bg-op-2 + .bg-primary-darkend Abico aptent cogo consequat ille nostrud populus tego vel ymo.

.bg-op-3 + .bg-primary-darkend Conventio dignissim nisl utinam.

.bg-op-4 + .bg-primary-darkend Decet exerci gilvus saluto.

.bg-op-5 + .bg-primary-darkend Cui erat eros nimis nostrud sit.

.bg-op-6 + .bg-primary-darkend Appellatio humo nostrud nunc oppeto os praemitto sit suscipere valde.

.bg-op-7 + .bg-primary-darkend Abigo genitus suscipit tincidunt.

.bg-op-8 + .bg-primary-darkend Eu hendrerit immitto pecus.

.bg-op-9 + .bg-primary-darkend Euismod facilisis hendrerit hos illum suscipere torqueo.

.bg-op-1 + .bg-info Abdo fere magna quibus.

.bg-op-2 + .bg-info Abluo commodo consequat ex iriure letalis nisl pala quibus similis.

.bg-op-3 + .bg-info Luptatum nibh nostrud vereor.

.bg-op-4 + .bg-info Ex hos meus. Distineo gilvus similis vindico wisi.

.bg-op-5 + .bg-info Brevitas camur commodo eu luptatum meus pertineo praesent quia vulputate.

.bg-op-6 + .bg-info Nisl paratus vel vindico.

.bg-op-7 + .bg-info Antehabeo eum iaceo metuo premo quidne tamen zelus.

.bg-op-8 + .bg-info Dolus gemino hos iaceo magna premo singularis tum validus vulpes.

.bg-op-9 + .bg-info Amet patria velit virtus wisi.

.bg-op-1 + .bg-success Dolor nunc paratus usitas vulpes.

.bg-op-2 + .bg-success Aliquip pagus praemitto singularis te.

.bg-op-3 + .bg-success Adipiscing comis decet eligo erat importunus modo quidne quis venio.

.bg-op-4 + .bg-success Acsi adipiscing esse jus molior occuro qui ratis saluto scisco.

.bg-op-5 + .bg-success Ad camur causa enim iaceo ibidem iustum vindico.

.bg-op-6 + .bg-success Damnum euismod incassum laoreet ludus natu oppeto rusticus singularis.

.bg-op-7 + .bg-success Abbas commodo damnum ex magna sino zelus.

.bg-op-8 + .bg-success Odio patria voco. Augue huic loquor premo.

.bg-op-9 + .bg-success Adipiscing dolore esca exputo quia sudo ulciscor.

.bg-op-1 + .bg-warning Dolore erat populus ulciscor.

.bg-op-2 + .bg-warning Appellatio et jus magna quibus valde vereor.

.bg-op-3 + .bg-warning Ille quidem usitas vicis.

.bg-op-4 + .bg-warning Esse facilisis mos pagus refero secundum usitas utrum valetudo verto.

.bg-op-5 + .bg-warning Elit mos ullamcorper. Accumsan appellatio ea esca pala utinam utrum.

.bg-op-6 + .bg-warning Abdo eros jumentum neque ratis sagaciter sit ulciscor vero vulputate.

.bg-op-7 + .bg-warning Comis conventio dignissim enim iaceo os.

.bg-op-8 + .bg-warning Commoveo ex hendrerit imputo letalis paulatim quae saepius sudo te.

.bg-op-9 + .bg-warning Autem et exerci inhibeo probo sit valde zelus.

.bg-op-1 + .bg-danger Esca gemino in letalis lobortis neo praemitto rusticus tincidunt utrum.

.bg-op-2 + .bg-danger Eros ideo quidem refoveo si zelus.

.bg-op-3 + .bg-danger Brevitas commodo diam meus persto ratis virtus.

.bg-op-4 + .bg-danger Genitus lobortis scisco secundum virtus.

.bg-op-5 + .bg-danger Qui roto velit. Camur conventio ibidem natu.

.bg-op-6 + .bg-danger Euismod nutus valetudo. Abluo facilisis jus letalis luctus luptatum magna meus turpis.

.bg-op-7 + .bg-danger Accumsan cogo dignissim genitus iriure luctus sino vindico virtus.

.bg-op-8 + .bg-danger Dignissim esca humo. Gravis ideo laoreet quidem quidne.

.bg-op-9 + .bg-danger Illum jumentum probo secundum.

.bg-op-1 + .bg-inverse Ad erat eu inhibeo lucidus pecus quidne tum ut.

.bg-op-2 + .bg-inverse Blandit duis haero natu olim pala ullamcorper virtus volutpat vulputate.

.bg-op-3 + .bg-inverse Blandit caecus illum lobortis melior qui quia uxor.

.bg-op-4 + .bg-inverse Ea exerci hendrerit jumentum mos quis sagaciter suscipere tego venio.

.bg-op-5 + .bg-inverse Eum nibh obruo quibus quis velit vereor.

.bg-op-6 + .bg-inverse Abbas at camur illum letalis ludus persto praesent tation.

.bg-op-7 + .bg-inverse Abigo conventio decet iriure iustum melior minim quidem suscipit vereor.

.bg-op-8 + .bg-inverse Cogo gilvus inhibeo natu paulatim tation.

.bg-op-9 + .bg-inverse Caecus defui qui sino vel.

.bg-op-1 + .bg-gradient Caecus defui eligo sed.

.bg-op-2 + .bg-gradient Abbas ibidem laoreet os persto virtus.

.bg-op-3 + .bg-gradient Euismod facilisi ludus meus nostrud occuro quadrum vicis.

.bg-op-4 + .bg-gradient Aliquam quadrum scisco velit.

.bg-op-5 + .bg-gradient Bene commoveo ex vindico.

.bg-op-6 + .bg-gradient Dolor dolore duis huic humo iriure lucidus pala proprius.

.bg-op-7 + .bg-gradient Enim incassum mauris quis scisco validus.

.bg-op-8 + .bg-gradient Damnum esse exerci nibh praemitto sit turpis velit volutpat.

.bg-op-9 + .bg-gradient Aliquam autem eligo humo letalis metuo qui saepius velit.

.bg-op-1 + .bg-gradient-flip Causa mos pagus suscipere.

.bg-op-2 + .bg-gradient-flip Acsi adipiscing antehabeo cogo esca esse ideo lenis letalis mos.

.bg-op-3 + .bg-gradient-flip Bene erat ideo metuo natu odio pecus utinam.

.bg-op-4 + .bg-gradient-flip Causa consequat dolore ea elit eum odio pertineo secundum.

.bg-op-5 + .bg-gradient-flip Decet paratus sagaciter tum.

.bg-op-6 + .bg-gradient-flip Abbas conventio dolus eligo minim neque olim.

.bg-op-7 + .bg-gradient-flip Diam dignissim duis facilisis ideo illum inhibeo nimis rusticus scisco.

.bg-op-8 + .bg-gradient-flip Cogo ex ibidem nisl saluto.

.bg-op-9 + .bg-gradient-flip Antehabeo et immitto nibh quidem vicis.

.bg-op-1 + .bg-green Autem defui ea importunus letalis nunc praesent ymo.

.bg-op-2 + .bg-green Conventio jumentum nostrud praesent sagaciter.

.bg-op-3 + .bg-green Interdico natu praemitto typicus.

.bg-op-4 + .bg-green Autem bene neque quidem.

.bg-op-5 + .bg-green Decet enim neo vicis.

.bg-op-6 + .bg-green At brevitas dignissim metuo obruo quidne rusticus.

.bg-op-7 + .bg-green Ille inhibeo obruo saluto si.

.bg-op-8 + .bg-green Abluo capto refero singularis sino ut.

.bg-op-9 + .bg-green Camur eum importunus nisl quidne sed tum ullamcorper.

.bg-op-1 + .bg-red Acsi esca genitus hos praesent turpis vereor.

.bg-op-2 + .bg-red Euismod humo immitto paratus usitas.

.bg-op-3 + .bg-red Augue erat esca jugis metuo sed.

.bg-op-4 + .bg-red Abdo appellatio dolore gilvus hos letalis proprius.

.bg-op-5 + .bg-red Elit enim quis. Augue defui gravis neque quibus sagaciter valetudo.

.bg-op-6 + .bg-red Causa comis metuo pneum proprius velit.

.bg-op-7 + .bg-red Consectetuer haero hos immitto nobis refoveo te usitas vel ymo.

.bg-op-8 + .bg-red Brevitas huic metuo modo tincidunt.

.bg-op-9 + .bg-red Mos quibus quidem refero suscipit valetudo.

.bg-op-1 + .bg-blue Abdo aliquip brevitas jugis nimis oppeto.

.bg-op-2 + .bg-blue Caecus defui iriure refero.

.bg-op-3 + .bg-blue Ideo immitto pneum quadrum quis secundum veniam.

.bg-op-4 + .bg-blue Dolore modo molior quidem tincidunt ullamcorper.

.bg-op-5 + .bg-blue Aliquam et ludus modo nobis nunc turpis ymo.

.bg-op-6 + .bg-blue Interdico lucidus wisi. Amet dolor letalis nibh rusticus saepius si volutpat.

.bg-op-7 + .bg-blue Abico humo roto. Conventio eu facilisi valetudo.

.bg-op-8 + .bg-blue Exputo immitto inhibeo venio.

.bg-op-9 + .bg-blue Comis et gemino vulpes.

.bg-op-1 + .bg-purple Acsi duis gemino jus luctus quadrum.

.bg-op-2 + .bg-purple Bene camur paratus patria tamen tum ullamcorper.

.bg-op-3 + .bg-purple Autem brevitas dignissim exerci luctus ludus os saepius ut.

.bg-op-4 + .bg-purple Bene commoveo damnum hos inhibeo meus quadrum vereor.

.bg-op-5 + .bg-purple Blandit caecus capto mos nibh tation turpis typicus ulciscor ut.

.bg-op-6 + .bg-purple Consectetuer plaga quis uxor.

.bg-op-7 + .bg-purple Commodo nostrud utinam vel.

.bg-op-8 + .bg-purple Damnum euismod jumentum paulatim quae ullamcorper.

.bg-op-9 + .bg-purple Diam illum iusto nostrud qui.

.bg-op-1 + .bg-pink Abico jugis lenis minim obruo pneum populus.

.bg-op-2 + .bg-pink Causa commodo consequat metuo ymo.

.bg-op-3 + .bg-pink Bene blandit comis commoveo iustum quis si suscipere typicus.

.bg-op-4 + .bg-pink Acsi adipiscing aliquip comis luctus plaga.

.bg-op-5 + .bg-pink Brevitas cui distineo minim refoveo sagaciter.

.bg-op-6 + .bg-pink Aliquip bene causa dolore iriure modo similis veniam.

.bg-op-7 + .bg-pink Abdo laoreet sed vicis.

.bg-op-8 + .bg-pink At gemino pala praesent roto.

.bg-op-9 + .bg-pink Damnum nunc uxor virtus.

.bg-op-1 + .bg-orange Capto decet elit feugiat immitto mauris si.

.bg-op-2 + .bg-orange Damnum elit iaceo lucidus nisl persto probo similis veniam.

.bg-op-3 + .bg-orange Commoveo consequat humo jumentum qui tincidunt.

.bg-op-4 + .bg-orange Caecus exputo nunc quidne saepius typicus.

.bg-op-5 + .bg-orange Abluo consequat esca immitto iustum jumentum ludus odio quis ullamcorper.

.bg-op-6 + .bg-orange Defui lucidus occuro paratus saluto.

.bg-op-7 + .bg-orange Distineo feugiat macto natu nunc vulputate wisi.

.bg-op-8 + .bg-orange Abico antehabeo camur consectetuer erat illum nulla.

.bg-op-9 + .bg-orange Abigo adipiscing ideo modo os paratus.

.bg-op-1 + .bg-lime Appellatio aptent ea genitus humo luctus mauris mos refoveo similis.

.bg-op-2 + .bg-lime Iaceo ibidem melior mos quidne saluto tincidunt.

.bg-op-3 + .bg-lime Dolore feugiat iustum singularis utrum velit vereor.

.bg-op-4 + .bg-lime Abigo accumsan commoveo eu ulciscor.

.bg-op-5 + .bg-lime Nulla persto ut venio vereor vicis.

.bg-op-6 + .bg-lime Commodo commoveo metuo. Antehabeo dolore nunc olim.

.bg-op-7 + .bg-lime Caecus conventio defui iriure lobortis metuo si virtus.

.bg-op-8 + .bg-lime Consectetuer ludus mos nibh vulpes.

.bg-op-9 + .bg-lime Cogo damnum plaga si singularis tation validus venio vulputate.

.bg-op-1 + .bg-blue-dark Abbas ad commoveo lucidus melior modo paratus saluto.

.bg-op-2 + .bg-blue-dark Abluo accumsan proprius. Augue eligo scisco sino vereor vero.

.bg-op-3 + .bg-blue-dark Dignissim gilvus nimis patria quadrum suscipit.

.bg-op-4 + .bg-blue-dark Aliquip duis eligo euismod imputo minim ullamcorper vero.

.bg-op-5 + .bg-blue-dark Ea gilvus iaceo ibidem paulatim proprius roto secundum.

.bg-op-6 + .bg-blue-dark Diam humo in plaga secundum sudo uxor vindico.

.bg-op-7 + .bg-blue-dark Causa esca exerci imputo os refoveo suscipit.

.bg-op-8 + .bg-blue-dark Acsi lucidus plaga tego.

.bg-op-9 + .bg-blue-dark Abluo aliquip in luptatum.

.bg-op-1 + .bg-red-dark Molior sino utrum zelus.

.bg-op-2 + .bg-red-dark Cui esca feugiat metuo mos sed tincidunt torqueo valde.

.bg-op-3 + .bg-red-dark Antehabeo eros esse eu iaceo pala probo qui veniam.

.bg-op-4 + .bg-red-dark Camur enim gilvus laoreet nobis torqueo ut uxor vero.

.bg-op-5 + .bg-red-dark Ludus pagus singularis. Illum paratus quidem sudo.

.bg-op-6 + .bg-red-dark Commodo consectetuer conventio duis nobis tego uxor valetudo verto.

.bg-op-7 + .bg-red-dark Comis dolore nobis pagus suscipit tego.

.bg-op-8 + .bg-red-dark Abluo consectetuer ibidem occuro tation vindico.

.bg-op-9 + .bg-red-dark Facilisi imputo ludus nobis sit turpis vulputate.

.bg-op-1 + .bg-brown Commodo gilvus laoreet quae te torqueo virtus.

.bg-op-2 + .bg-brown Dignissim hendrerit ideo inhibeo melior mos nunc vel vicis.

.bg-op-3 + .bg-brown Hos ille letalis neo pertineo roto saluto secundum sit veniam.

.bg-op-4 + .bg-brown Abluo damnum singularis torqueo utrum.

.bg-op-5 + .bg-brown Abluo caecus letalis probo.

.bg-op-6 + .bg-brown Capto esca fere incassum ratis.

.bg-op-7 + .bg-brown Ad appellatio camur consectetuer consequat illum lenis mos probo vicis.

.bg-op-8 + .bg-brown Capto causa cui iusto macto paratus.

.bg-op-9 + .bg-brown Cui eligo et haero immitto jus nutus velit.

.bg-op-1 + .bg-cyan-dark Commoveo decet magna minim te turpis.

.bg-op-2 + .bg-cyan-dark Amet cui diam eros eum jugis lenis luctus veniam.

.bg-op-3 + .bg-cyan-dark Abico accumsan esse meus modo nulla nunc veniam.

.bg-op-4 + .bg-cyan-dark Magna natu neo obruo torqueo.

.bg-op-5 + .bg-cyan-dark Esca esse iriure nutus paulatim refero.

.bg-op-6 + .bg-cyan-dark Defui huic ideo sudo suscipere ulciscor valetudo vindico.

.bg-op-7 + .bg-cyan-dark Modo nulla tum. Accumsan capto laoreet metuo obruo praesent quae singularis.

.bg-op-8 + .bg-cyan-dark Pagus praesent quibus validus.

.bg-op-9 + .bg-cyan-dark Huic modo praemitto quibus refero.

.bg-op-1 + .bg-yellow Gravis molior suscipere turpis.

.bg-op-2 + .bg-yellow Antehabeo commoveo esse probo.

.bg-op-3 + .bg-yellow At feugiat gravis magna neo quidem scisco.

.bg-op-4 + .bg-yellow Conventio ea exputo huic luptatum quis ratis vicis voco.

.bg-op-5 + .bg-yellow Dolor veniam vindico. Adipiscing inhibeo paulatim quis tation valde valetudo ymo.

.bg-op-6 + .bg-yellow Euismod exerci melior natu neque nobis turpis.

.bg-op-7 + .bg-yellow Adipiscing dolore populus quadrum sudo.

.bg-op-8 + .bg-yellow Abluo eros facilisi macto modo pagus.

.bg-op-9 + .bg-yellow Amet bene commoveo ideo illum pagus refoveo roto saepius vulpes.

.bg-op-1 + .bg-slate Exerci nutus ulciscor valetudo.

.bg-op-2 + .bg-slate Damnum secundum ut utrum.

.bg-op-3 + .bg-slate Dignissim sino voco vulputate.

.bg-op-4 + .bg-slate Saepius sudo ulciscor vulputate.

.bg-op-5 + .bg-slate Autem commodo wisi. Abigo causa immitto metuo tation voco.

.bg-op-6 + .bg-slate Abdo adipiscing autem inhibeo iriure neque nobis scisco.

.bg-op-7 + .bg-slate Caecus magna modo pertineo quis.

.bg-op-8 + .bg-slate Capto hos populus quae ratis refoveo secundum similis tation vereor.

.bg-op-9 + .bg-slate Abdo causa natu premo qui utrum.

.bg-op-1 + .bg-olive Pecus quibus suscipit. Aliquam eligo esse humo modo os pneum praemitto valde zelus.

.bg-op-2 + .bg-olive Brevitas erat iriure nulla paratus plaga similis turpis ulciscor vero.

.bg-op-3 + .bg-olive Dolore interdico mos praesent.

.bg-op-4 + .bg-olive Autem cui dolus paulatim refero sagaciter sit usitas vulpes.

.bg-op-5 + .bg-olive Bene facilisi imputo letalis singularis torqueo.

.bg-op-6 + .bg-olive Amet eum vulputate. Augue capto iriure nimis occuro sagaciter secundum tation torqueo.

.bg-op-7 + .bg-olive At brevitas caecus esca eu facilisis inhibeo pala sit.

.bg-op-8 + .bg-olive Augue camur dolor enim natu nimis paulatim refero saepius vel.

.bg-op-9 + .bg-olive Commodo defui ea quidne venio ymo.

.bg-op-1 + .bg-teal Consequat eu exputo fere iustum jumentum nibh persto quidem sed.

.bg-op-2 + .bg-teal Adipiscing humo praesent probo.

.bg-op-3 + .bg-teal Pala paulatim utrum. Ad commoveo gravis ibidem luctus natu quidem saluto virtus.

.bg-op-4 + .bg-teal Commoveo decet erat feugiat.

.bg-op-5 + .bg-teal Abico in lucidus nostrud velit wisi.

.bg-op-6 + .bg-teal Appellatio paulatim quibus saluto.

.bg-op-7 + .bg-teal Inhibeo nutus tincidunt vicis.

.bg-op-8 + .bg-teal Autem erat laoreet nutus pecus typicus vero.

.bg-op-9 + .bg-teal Abbas abluo amet bene hos mauris odio si vulpes.

.bg-op-1 + .bg-green-bright Antehabeo causa dolus saluto si uxor.

.bg-op-2 + .bg-green-bright Diam ille importunus meus pecus scisco sed vel venio.

.bg-op-3 + .bg-green-bright Accumsan iustum similis sino.

.bg-op-4 + .bg-green-bright Diam erat exerci lobortis proprius refero virtus.

.bg-op-5 + .bg-green-bright Eu incassum paulatim turpis typicus.

.bg-op-6 + .bg-green-bright Huic nisl vel. Abico blandit exputo feugiat lucidus plaga ratis suscipere suscipit vulpes.

.bg-op-7 + .bg-green-bright Adipiscing brevitas et exputo nutus.

.bg-op-8 + .bg-green-bright Amet consectetuer probo ratis.

.bg-op-9 + .bg-green-bright Causa euismod turpis. Amet camur mos nostrud pagus pneum refero sit tego vulpes.


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 Abbas distineo hendrerit neque pecus quidne quis venio vulputate.
.border-primary Abigo dolor elit jumentum metuo nibh turpis valde.
.border-info Hendrerit oppeto pneum sudo vindico. Abigo et ibidem imputo natu pala populus validus vicis.
.border-success Abbas exputo luctus occuro paratus plaga quia sit sudo ullamcorper.
.border-warning Aliquip appellatio aptent defui mauris. Dolore os singularis vindico.
.border-danger Antehabeo luptatum ulciscor. Abbas blandit iaceo praemitto vereor.
.border-grey Abico decet exerci gravis ille vulpes.
.border-grey-dark Abico augue eros et lucidus probo tum turpis.
.border-primary-faded Amet damnum defui premo zelus. Importunus iusto ratis roto veniam wisi.
.border-primary-darkend Ad aptent cogo distineo facilisi facilisis nimis patria saepius turpis.
.border-green Amet appellatio at gravis persto plaga probo vicis.
.border-red Diam distineo genitus jugis pala paulatim ratis vulputate.
.border-blue Dignissim jus lenis quae roto tation te tego vicis.
.border-purple Distineo huic luctus luptatum olim vero vicis.
.border-pink Abico hendrerit natu pertineo pneum refero ulciscor valetudo.
.border-orange Magna meus odio sed si velit.
.border-lime Iriure os probo roto sagaciter valde.
.border-blue-dark Ad capto decet iaceo luctus luptatum premo quidem vulpes.
.border-red-dark Augue lobortis pecus quidne utinam valetudo.
.border-brown Accumsan dolus metuo minim neo tation.
.border-cyan-dark Causa eu gemino iusto lobortis melior oppeto praemitto typicus vel.
.border-yellow Capto meus molior persto si ut.
.border-slate Importunus olim os pneum refero ullamcorper utinam.
.border-olive Consequat esse iusto neo paratus ut.
.border-teal Aliquip causa lucidus natu quae usitas valetudo vindico.
.border-green-bright Commoveo humo interdico neque utinam. Camur eu minim suscipere.

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