    <ol class="breadcrumb">
      <li><a href="#">Dashboard</a></li>
      <li>UI Elements</li>
      <li class="active">Typography</li>
    </ol>



<div class="container-fluid">
<div data-widget-group="group1">
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-transparent" data-widget='{"draggable": "false"}'>
                <div class="panel-heading">
                    <h2>Headings</h2>
                    <!-- <div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div> -->
                </div>
                <div class="panel-body">
                    <h1 class="mt0">Heading 1 <small>Secondary</small></h1>
                    <h2>Heading 2 <small>Secondary</small></h2>
                    <h3>Heading 3 <small>Secondary</small></h3>
                    <h4>Heading 4 <small>Secondary</small></h4>
                    <h5>Heading 5 <small>Secondary</small></h5>
                    <h6>Heading 6 <small>Secondary</small></h6>
                </div>
            </div>
            <div class="panel panel-transparent" data-widget='{"draggable": "false"}'>
              <div class="panel-heading">
                  <h2>Example Address</h2>
                  <!-- <div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div> -->
              </div>
              <div class="panel-body">
                  <address>
                    <strong>Twitter, Inc.</strong><br>
                    795 Folsom Ave, Suite 600<br>
                    San Francisco, CA 94107<br>
                    <abbr title="Phone">P:</abbr> (123) 456-7890
                </address>
                
                <address>
                    <strong>Full Name</strong><br>
                    <a href="mailto:#">first.last@example.com</a>
                </address>
              </div>
            </div>

            <div class="panel panel-transparent" data-widget='{"draggable": "false"}'>
              <div class="panel-heading">
                    <h2>Alignment Classes</h2>
                    <!-- <div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div> -->
              </div>
              <div class="panel-body">
                    <p class="text-left">Left aligned text.</p>
                    <p class="text-center">Center aligned text.</p>
                    <p class="text-right">Right aligned text.</p>
              </div>
            </div>

            <div class="panel panel-transparent" data-widget='{"draggable": "false"}'>
                  <div class="panel-heading">
                        <h2>Block Level Descriptions</h2>
                        <!-- <div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div> -->
                  </div>
                  <div class="panel-body">
                    <p>A list of terms with their associated descriptions.</p>
                      <dl>
                        <dt>Description lists</dt>
                        <dd>A description list is perfect for defining terms.</dd>
                        <dt>Euismod</dt>
                        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                        <dt>Malesuada porta</dt>
                        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                      </dl>
                  </div>
            </div>

            <div class="panel panel-transparent" data-widget='{"draggable": "false"}'>
                <div class="panel-heading">
                    <h2>Ordered List</h2>
                    <!-- <div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div> -->
                </div>
                <div class="panel-body">
                    <p>A list of items in which the order <i>does</i> explicitly matter (numbered list).</p>
                    <ol>
                        <li>Lorem ipsum dolor sit amet.</li>
                        <li>Officiis modi ipsum officia ad!</li>
                        <li>Atque nisi fugit repellat ratione.</li>
                        <li>Eveniet tenetur reiciendis eaque.</li>
                        <li>Aperiam accusamus quas nisi?</li>
                        <ol>
                            <li>Assumenda, ipsa hic vel sed?</li>
                            <li>Quaerat praesentium error.</li>
                            <li>Magni, excepturi nulla adipisci.</li>
                        </ol>
                        <li>Nesciunt, reprehenderit provident cupiditate atque!</li>
                        <li>Sit, nobis similique beatae aut.</li>
                        <li>Eum, debitis veniam laudantium dolor.</li>
                    </ol>

                </div>
            </div>

            <div class="panel panel-transparent" data-widget='{"draggable": "false"}'>
                <div class="panel-heading">
                    <h2>Unstyled List</h2>
                    <!-- <div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div> -->
                </div>
                <div class="panel-body">

                    <p>A list of items with no list-style or additional left padding.</p>
                    <ul class="list-unstyled">
                        <li>Lorem ipsum dolor sit amet.</li>
                        <li>Officiis modi ipsum officia ad!</li>
                        <li>Atque nisi fugit repellat ratione.</li>
                        <li>Eveniet tenetur reiciendis eaque.</li>
                        <li>Aperiam accusamus quas nisi?</li>
                        <ul>
                            <li>Assumenda, ipsa hic vel sed?</li>
                            <li>Quaerat praesentium error.</li>
                            <li>Magni, excepturi nulla adipisci.</li>
                        </ul>
                        <li>Nesciunt, reprehenderit provident cupiditate atque!</li>
                        <li>Sit, nobis similique beatae aut.</li>
                        <li>Eum, debitis veniam laudantium dolor.</li>
                    </ul>
                        
                </div>
            </div>

        </div>

        <div class="col-md-6">
            <div class="panel panel-transparent" data-widget='{"draggable": "false"}'>
                <div class="panel-heading">
                    <h2>Body Text</h2>
                    <!-- <div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div> -->
                </div>
                <div class="panel-body">
                    <p><code>p.lead</code></p> <p class="lead">Onwards to victory! </p>
                    <p><code>p</code></p> <p>Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn't commit.</p>
                    <p><code>small</code></p> <p><small>These men promptly escaped from a maximum security stockade to the Los Angeles underground.</small> </p>
                    <p><code>em</code></p> <p><em> Today, still wanted by the government, they survive as soldiers of fortune. </em> </p>
                    <p><code>strong</code></p> <p><strong>If you have a problem and no one else can help, and if you can find them, maybe you can hire the A-team. </strong></p>
                </div>
            </div>


            <div class="panel panel-transparent" data-widget='{"draggable": "false"}'>
              <div class="panel-heading">
                  <h2>Blockquotes</h2>
                  <!-- <div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div> -->
              </div>
              <div class="panel-body">
                  <blockquote>
                    <p>There is only one thing in the world worse than being talked about, and that is not being talked about</p>
                    <small>Oscar Wilde in <cite title="Source Title">The Picture of Dorian Grey</cite></small>
                </blockquote>
                <blockquote class="pull-right">
                    <p>How glorious it is – and also how painful – to be an exception.</p>
                    <small>Alfred de Musset</small>
                </blockquote>
              </div>
            </div>

            <div class="panel panel-transparent" data-widget='{"draggable": "false"}'>
              <div class="panel-heading">
                    <h2>Emphasis classes</h2>
                    <!-- <div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div> -->
              </div>
              <div class="panel-body">
                <code class="pull-right">.text-muted</code>
                <p class="text-muted">Aren’t you a little short for a stormtrooper?</p>
                <code class="pull-right">.text-default</code>
                <p class="text-default">That’s no moon, it’s a space station!</p>
                <code class="pull-right">.text-success</code>
                <p class="text-success">The Force is strong with this one.</p>
                <code class="pull-right">.text-info</code>
                <p class="text-info">I find your lack of faith disturbing.</p>
                <code class="pull-right">.text-warning</code>
                <p class="text-warning">These aren’t the droids you’re looking for.</p>
                <code class="pull-right">.text-danger</code>
                <p class="text-danger">May the Force be with you.</p>
              </div>
            </div>

            <div class="panel panel-transparent" data-widget='{"draggable": "false"}'>
                  <div class="panel-heading">
                        <h2>Horizontal description</h2>
                        <!-- <div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div> -->
                  </div>
                  <div class="panel-body">
                    <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p>
                    <dl class="dl-horizontal">
                        <dt>Description lists</dt>
                        <dd>A description list is perfect for defining terms.</dd>
                        <dt>Euismod</dt>
                        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                        <dt>Malesuada porta</dt>
                        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                    </dl>
                  </div>
            </div>

            <div class="panel panel-transparent" data-widget='{"draggable": "false"}'>
                <div class="panel-heading">
                    <h2>Unordered List</h2>
                    <!-- <div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div> -->
                </div>
                <div class="panel-body">
                    <p>A list of items in which the order <i>does not</i> explicitly matter.</p>
                    <ul>
                        <li>Lorem ipsum dolor sit amet.</li>
                        <li>Officiis modi ipsum officia ad!</li>
                        <li>Atque nisi fugit repellat ratione.</li>
                        <li>Eveniet tenetur reiciendis eaque.</li>
                        <li>Aperiam accusamus quas nisi?</li>
                        <ul>
                            <li>Assumenda, ipsa hic vel sed?</li>
                            <li>Quaerat praesentium error.</li>
                            <li>Magni, excepturi nulla adipisci.</li>
                        </ul>
                        <li>Nesciunt, reprehenderit provident cupiditate atque!</li>
                        <li>Sit, nobis similique beatae aut.</li>
                        <li>Eum, debitis veniam laudantium dolor.</li>
                    </ul>
                </div>
            </div>

            <div class="panel panel-transparent" data-widget='{"draggable": "false"}'>
                <div class="panel-heading">
                    <h2>Custom Icon List</h2>
                    <!-- <div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div> -->
                </div>
                <div class="panel-body">

                    <p>A list of items with no list-style or additional left padding.</p>
                    <ul class="fa-ul">
                        <li><i class="fa fa-li fa-check-square"></i>List icons (like these)</li>
                        <li><i class="fa fa-li fa-check-square"></i>can be used</li>
                        <li><i class="fa fa-li fa-spinner fa-spin"></i>to replace</li>
                        <li><i class="fa fa-li fa-square"></i>default bullets in lists</li>
                        <li><i class="fa fa-li fa-legal"></i>and can also
                            <ul class="fa-ul">
                                <li><i class="fa fa-li fa-reply"></i>form sublist</li>
                                <li><i class="fa fa-li fa-retweet"></i>each with different</li>
                                <li><i class="fa fa-li fa-sitemap"></i>icons</li>
                            </ul>
                        <li><i class="fa fa-li fa-legal"></i>thanks to baked in support for <a href="fortawesome.github.io/Font-Awesome/" target="_blank">FontAwesome</a>!</li>
                        </li>
                    </ul>
                        
                </div>
            </div>

        </div>
    </div>












    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-transparent" data-widget='{"draggable": "false"}'>
              <div class="panel-heading">
                <h2>Codes</h2>
                <!-- <div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div> -->
              </div>
              <div class="panel-body">
                <div class="row">
                    <div class="col-md-6">
                        <h4>Inline</h4>
                        <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
                        <p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>
                    </div>
                    <div class="col-md-6">
                        <h4>Block</h4>
                        <p>Use <code>&lt;pre&gt;</code> for multiple lines of code.</p>
        <pre class="prettyprint linenums">&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <h4>Prettify</h4>
                        <p>To add colored syntax highlight to the <code>&lt;pre&gt;</code> tag, then use the <code>prettyprint</code> class, and for line numbers add the <code>linenums</code> class.</p>
    <pre class="prettyprint linenums">
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;label for=&quot;focusedinput&quot; class=&quot;col-xs-3 control-label&quot;&gt;Focused Input&lt;/label&gt;
        &lt;div class=&quot;col-xs-6&quot;&gt;
            &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;focusedinput&quot; placeholder=&quot;Default Input&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;</pre>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div> 
</div> 

</div> <!-- container-fluid -->