Misc

General classes and helper functions

Alerts

Full width alert boxes with the class alert. Add color with class alert-primary, alert-secondary, alert-tertiary or alert-outline.

Let op! The quick brown fox jumps over the lazy dog

<div class="alert"><strong>Let op!</strong> The quick brown fox jumps over the lazy dog</div>
<div class="alert alert-primary"><strong>Let op!</strong> The quick brown fox jumps over the lazy dog</div>
<div class="alert alert-secondary"><strong>Let op!</strong> The quick brown fox jumps over the lazy dog</div>
<div class="alert alert-tertiary"><strong>Let op!</strong> The quick brown fox jumps over the lazy dog</div>
<div class="alert alert-outline"><strong>Let op!</strong> The quick brown fox jumps over the lazy dog</div>

Pagination

Add class pagination to a <ul> for pagination.

<ul class="pagination">
    <li class="active"><a href="/">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
    <li><a href="">6</a></li>
    <li><a href="">7</a></li>
    <li><a href="">8</a></li>
    <li>...</li>
    <li><a href="">8</a></li>
    <li><a href="">next</a></li>
</ul>

Badges

Add class badge to a <span> to make a badge / flair. Alternate color with class badge-primary, badge-secondary or badge-tertiary.

Nieuw

SALE

Populair Double A Presentation Papier 100 grams

Alternatively you can use these badges inside of paragraphs.

<p><span class="badge">Nieuw</span></p>
<p><span class="badge badge-primary">SALE</span></p>
<p><span class="badge badge-secondary">Populair</span> Double A Presentation Papier 100 grams </p>
<p>Alternatively you can use these <span class="badge badge-tertiary">badges</span> inside of paragraphs.</p>

Prices

Simply add class price-big to a span or div to format prices.

€ 15,00

<p><span class="price-big">&euro; 15,00</span></p>

Add price-small for a less intrusive price.

€ 12,40 exclusief BTW

+ € 2,95 verzendkosten

<p><span class="price-small">&euro; 12,40</span> exclusief BTW</p>
<p><span class="price-small">+ &euro; 2,95</span> verzendkosten</p>

Add price-muted for “before” prices.

€ 14,95 € 9,95

<p><span class="price-muted">&euro; 14,95</span> <span class="price-big">&euro; 9,95</span></p>

Helper classes

Add class hide to an element to apply a display: none;

This content is set to display:none;.

<div class="hide">This content is set to <code>display:none;</code>.</div>

Add class hide-print to hide an element on the printed version of a page.

Press ⌘ + P to print everything in this page, except me!

<div class="hide-print">Press <kbd>⌘</kbd> + <kbd>P</kbd> to print everything in this page, except me!</div>

Float elements with classes pull-left and pull-right

- It's like gravity! -

<div class="pull-left">
- It's like gravity! -
</div>
<div class="pull-right">
- It's like gravity! -
</div>

Center blocks by adding class center.

This block is centered

<div class="col-xs-3 center">This block is centered</div>

Change the text-align with the following three classes.

.text-left

.text-center

.text-right

<p class="text-left">.text-left</p>
<p class="text-center">.text-center</p>
<p class="text-right">.text-right</p>

Easily remove padding or margin with classes remove-margin and remove-padding

Hello, World!

<h1 class="remove-margin">Hello, World!</h1>

Marrel.css