{% extends "dav_base/base.html" %}
{% load bootstrap3 %}

{% block head-title %}CSS Demo{% endblock %}

{% block messages %}
<div class="container-fluid">
    {% bootstrap_alert "This is a default (info) message." %}
    {% bootstrap_alert "This is a success message." alert_type="success" %}
    {% bootstrap_alert "This is a warning message." alert_type="warning" %}
    {% bootstrap_alert "This is a error (danger) message." alert_type="danger" %}
</div>
{% endblock messages %}

{% block page-container-fluid %}
<h1 class="top-most">Header h1 <small>Small Text</small></h1>
<h2>Header h2 <small>Small Text</small></h2>
<h3>Header h3 <small>Small Text</small></h3>
<h4>Header h4 <small>Small Text</small></h4>
<h5>Header h5 <small>Small Text</small></h5>
<h6>Header h6 <small>Small Text</small></h6>

<div class="jumbotron">
    <h1>This is a jumbotron with h1 header</h1>
    <p>
        {% lorem %}
    </p>
</div>

<div class="well">
    <h2>This is a well with h2 header</h2>
    <p class="lead">
        {% lorem %}
    </p>
    <p>
        {% lorem %}
    </p>
</div>
<hr />

<h3>Regular Bootstrap Buttons</h3>
<a class="btn btn-default" href="#">btn-default</a>
<a class="btn btn-primary" href="#">btn-primary</a>
<a class="btn btn-success" href="#">btn-success</a>
<a class="btn btn-info" href="#">btn-info</a>
<a class="btn btn-warning" href="#">btn-warning</a>
<a class="btn btn-danger" href="#">btn-danger</a>

<h3>Additional defined Buttons</h3>
<p>
<a class="btn btn-white" href="#">btn-white</a>
<a class="btn btn-orange" href="#">btn-orange</a>
<a class="btn btn-green" href="#">btn-green</a>
<a class="btn btn-blue" href="#">btn-blue</a>
<a class="btn btn-yellow" href="#">btn-yellow</a>
<a class="btn btn-red" href="#">btn-red</a>
</p>
<p>
<a class="btn btn-black" href="#">btn-black</a>
<a class="btn btn-mandarin" href="#">btn-mandarin</a>
<a class="btn btn-lime" href="#">btn-lime</a>
<a class="btn btn-cyan" href="#">btn-cyan</a>
<a class="btn btn-caramel" href="#">btn-caramel</a>
<a class="btn btn-plum" href="#">btn-plum</a>
<a class="btn btn-purple" href="#">btn-purple</a>
</p>
<hr />

<h3>Regular Bootstrap Text</h3>
<p class="text-muted"><span class="label label-default">text-muted</span> {% lorem %}</p>
<p class="text-primary"><span class="label label-primary">text-primary</span> {% lorem %}</p>
<p class="text-success"><span class="label label-success">text-success</span> {% lorem %}</p>
<p class="text-info"><span class="label label-info">text-info</span> {% lorem %}</p>
<p class="text-warning"><span class="label label-warning">text-warning</span> {% lorem %}</p>
<p class="text-danger"><span class="label label-danger">text-danger</span> {% lorem %}</p>

<h3>Additional defined Text</h3>
<p class="text-default"><span class="label label-default">text-default</span> {% lorem %}</p>
<p class="text-orange"><span class="label label-orange">text-orange</span> {% lorem %}</p>
<p class="text-green"><span class="label label-green">text-green</span> {% lorem %}</p>
<p class="text-blue"><span class="label label-blue">text-blue</span> {% lorem %}</p>
<p class="text-yellow"><span class="label label-yellow">text-yellow</span> {% lorem %}</p>
<p class="text-red"><span class="label label-red">text-red</span> {% lorem %}</p>
<p class="text-black"><span class="label label-black">text-black</span> {% lorem %}</p>
<p class="text-mandarin"><span class="label label-mandarin">text-mandarin</span> {% lorem %}</p>
<p class="text-lime"><span class="label label-lime">text-lime</span> {% lorem %}</p>
<p class="text-cyan"><span class="label label-cyan">text-cyan</span> {% lorem %}</p>
<p class="text-caramel"><span class="label label-caramel">text-caramel</span> {% lorem %}</p>
<p class="text-plum"><span class="label label-plum">text-plum</span> {% lorem %}</p>
<p class="text-purple"><span class="label label-purple">text-purple</span> {% lorem %}</p>
<hr />


<h3>Regular Bootstrap Backgrounds</h3>
<p class="bg-primary"><span class="label label-primary">bg-primary</span> {% lorem %} </p>
<p class="bg-success"><span class="label label-success">bg-success</span> {% lorem %} </p>
<p class="bg-info"><span class="label label-info">bg-info</span> {% lorem %} </p>
<p class="bg-warning"><span class="label label-warning">bg-warning</span> {% lorem %} </p>
<p class="bg-danger"><span class="label label-danger">bg-danger</span> {% lorem %} </p>

<h3>Additional defined Backgrounds</h3>
<p class="bg-orange"><span class="label label-orange">bg-orange</span> {% lorem %} </p>
<p class="bg-green"><span class="label label-green">bg-green</span> {% lorem %} </p>
<p class="bg-blue"><span class="label label-blue">bg-blue</span> {% lorem %} </p>
<p class="bg-yellow"><span class="label label-yellow">bg-yellow</span> {% lorem %} </p>
<p class="bg-red"><span class="label label-red">bg-red</span> {% lorem %} </p>
<p class="bg-mandarin"><span class="label label-mandarin">bg-mandarin</span> {% lorem %} </p>
<p class="bg-lime"><span class="label label-lime">bg-lime</span> {% lorem %} </p>
<p class="bg-cyan"><span class="label label-cyan">bg-cyan</span> {% lorem %} </p>
<p class="bg-caramel"><span class="label label-caramel">bg-caramel</span> {% lorem %} </p>
<p class="bg-plum"><span class="label label-plum">bg-plum</span> {% lorem %} </p>
<p class="bg-purple"><span class="label label-purple">bg-purple</span> {% lorem %} </p>
<hr />
{% endblock page-container-fluid %}