Jump to: navigation, search

Bootstrapskin Typography

Font Colours

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Font Colour Mark up

As with most of the styles, colours can be applied to fonts too.

<p><div class="text-primary">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-success">Nullam id dolor id nibh ultricies vehicula..</div></p>
<p><div class="text-info">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-warning">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-danger">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-cyanide">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-meadow">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-cocktail">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-hearts">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-party">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-hollow">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-mango">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-berry">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-primary">Nullam id dolor id nibh ultricies vehicula.</div></p>

Highlighting

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Highlight Mark up

<p><div class="text-primary-alt">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-success-alt">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-info-alt">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-warning-alt">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-danger-alt">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-cyanide-alt">Nullam id dolor id nibh ultricies vehicula.</div></p>
 <p><div class="text-meadow-alt">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-cocktail-alt">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-hearts-alt">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-party-alt">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-midnight-alt">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-concrete-alt">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-hollow-alt">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-mango-alt">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-berry-alt">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-primary-alt">Nullam id dolor id nibh ultricies vehicula.</div></p>

Contextual

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Nullam id dolor id nibh ultricies vehicula.

Contextual Mark up

<p class="bg-primary">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-dark">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-darker">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-light">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-lighter">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-neutral">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-success">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-info">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-warning">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-danger">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-cyanide">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-meadow">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-cocktail">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-mango">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-berry">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-primary">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-hearts">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-party">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-midnight">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-concrete">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-gunmetal">Nullam id dolor id nibh ultricies vehicula.</p>
<p class="bg-hollow">Nullam id dolor id nibh ultricies vehicula.</p>

Header Styles

<h1 class="mwbs-color-default"></h1>

H1 Default

H2 Default

H3 Default

H4 Default

H5 Default
<h1 class="mwbs-color-dark"></h1>

H1 Dark

H2 Dark

H3 Dark

H4 Dark

H5 Dark
<h1 class="mwbs-color-light"></h1>

H1 Light

H2 Light

H3 Light

H4 Light

H5 Light
<h1 class="mwbs-font-100"></h1>

H1 Font 100

H2 Font 100

H3 Font 100

H4 Font 100

H5 Font 100
<h1 class="mwbs-font-300"></h1>

H1 Font 300

H2 Font 300

H3 Font 300

H4 Font 300

H5 Font 300
<h1 class="mwbs-font-700"></h1>

H1 Font 700

H2 Font 700

H3 Font 700

H4 Font 700

H5 Font 700

Other Classes

Lead Class

highlighted mark class

Deleted del class

Underlined u class

small class

Bold strong text

Italic em class

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

HTML

blockquote class

<p class="lead">Lead Class</p>
<p><mark>highlighted mark class</mark></p>
<p><del>Deleted del class</del></p>
<p><u>Underlined u class</u></p>
<p><small>small class</small></p>
<p><strong>Bold strong text</strong></p>
<p><em>Italic em class</em></p>
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
<p><blockquote>blockquote class</blockquote></p>
bootstrapskin-commercial-skin.png