TYPOGRAPHY

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

h1. heading ~ 36px

h2. heading ~ 30px

h3. heading ~ 24px

h4. heading ~ 18px

h5. heading ~ 14px
h6. heading ~ 12px
<h1>h1. heading ~ 36px</h1>
<h2>h2. heading ~ 30px</h2>
<h3>h3. heading ~ 24px</h3>
<h4>h4. heading ~ 18px</h4>
<h5>h5. heading ~ 14px</h5>
<h6>h6. heading ~ 12px</h6>

Example label h1

Example label h2

Example label h3

Example label h4

Example label h5
Example label h6
<h1>Example label <span class="label label-default">h1</span></h1>
<h2>Example label <span class="label label-default">h2</span></h2>
<h3>Example label <span class="label label-default">h3</span></h3>
<h4>Example label <span class="label label-default">h4</span></h4>
<h5>Example label <span class="label label-default">h5</span></h5>
<h6>Example label <span class="label label-default">h6</span></h6>
Default Primary Success Info Warning Danger

1 2 4 6 8 10

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

<span class="badge">1</span> 
<span class="badge">2</span> 
<span class="badge">4</span> 
<span class="badge">6</span> 
<span class="badge">8</span> 
<span class="badge">10</span>

Bold

Fictum, deserunt mollit anim laborum astutumque!

Underlined text

Quis aute iure reprehenderit in voluptate velit esse.

Strikethrough text

Morbi fringilla convallis sapien, id pulvinar odio volutpat.

Italics

Petierunt uti sibi concilium totius Galliae in indicere.

Marked text

Me non paenitet nullum festiviorem excogitasse ad hoc.

Small text

Magna pars studiorum, prodita quaerimus.

<strong>Fictum,  deserunt mollit anim laborum astutumque!</strong>

<u>Quis aute iure reprehenderit in voluptate velit esse.</u>

<s>Morbi fringilla convallis sapien, id pulvinar odio volutpat.</s>
<em>Petierunt uti sibi concilium totius Galliae in indicere.</em>

Me non paenitet nullum <mark>festiviorem</mark> excogitasse ad hoc.

<small>Magna pars studiorum, prodita quaerimus.</small>

Left aligned text.

Center aligned text.

Right aligned text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>

<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary" >Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>


<div class="btn-group">
    <button type="button" class="btn btn-default">Left</button> 
    <button type="button" class="btn btn-default">Middle</button> 
    <button type="button" class="btn btn-default">Right</button>
</div>

<div class="btn-toolbar">
    <div class="btn-group">
        <button class="btn btn-default">1</button> 
        <button class="btn btn-default">2</button> 
        <button class="btn btn-default">3</button> 
        <button class="btn btn-default">4</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default">5</button> 
        <button class="btn btn-default">6</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default">7</button>
    </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<div class="alert alert-success" role="alert">
  ...
</div>

<div class="alert alert-info" role="alert">
  ...
</div>

<div class="alert alert-warning" role="alert">
  ...
</div>

<div class="alert alert-danger" role="alert">
  ...
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

Example block-level help text here.

<form role="form">
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Check me out
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content
<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title"> ... </h3>
    </div>
  <div class="panel-body">
    ...
  </div>
</div>

<div class="panel panel-success">
  <div class="panel-heading"> ... </div>
  <div class="panel-body"> ... </div>
</div>

<div class="panel panel-info">
  <div class="panel-heading"> ... </div>
  <div class="panel-body"> ... </div>
</div>

<div class="panel panel-warning">
  <div class="panel-heading"> ... </div>
  <div class="panel-body"> ... </div>
</div>

<div class="panel panel-danger">
  <div class="panel-heading"> ... </div>
  <div class="panel-body"> ... </div>
</div>
#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped">
   <thead><tr><th>...</th></tr></thead>
   <tbody>
      <tr>
         <td>...</td>
      </tr>
   </tbody>
</table>
60% Complete
60%
40% Complete (success)
20% Complete
70% Complete
40% Complete (success)
45% Complete
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
<div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span class="sr-only">60% Complete</span>
      </div>
</div>

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        60%
    </div>
</div>

<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" 
    aria-valuemax="100" style="width: 40%">
        <span class="sr-only">40% Complete (success)</span>
    </div>
</div>

<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" 
    style="width: 20%">
        <span class="sr-only">20% Complete</span>
    </div>
</div>

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" 
    style="width: 40%">
        <span class="sr-only">40% Complete (success)</span>
    </div>
</div>

<div class="progress progress-striped active">
    <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
        <span class="sr-only">45% Complete</span>
    </div>
</div>

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 35%">
        <span class="sr-only">35% Complete (success)</span>
    </div>
    <div class="progress-bar progress-bar-warning" style="width: 20%">
        <span class="sr-only">20% Complete (warning)</span>
    </div>
    <div class="progress-bar progress-bar-danger" style="width: 10%">
        <span class="sr-only">10% Complete (danger)</span>
    </div>
</div>
<div class="row">
    <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img alt="" src="http://placehold.it/275x180">
        </a>
    </div>
    ...
</div>

<div class="carousel slide" id="myCarousel">
    <div class="carousel-inner">
        <div class="item">
            <img alt="" src="http://placehold.it/1140x370">
            <div class="carousel-caption">
                <h4>First Thumbnail label</h4>
                <p>...</p>
            </div>
        </div>
        <div class="item active">
            <img alt="" src="http://placehold.it/1140x370">
            <div class="carousel-caption">
                <h4>Third Thumbnail label</h4>
                <p>...</p>
            </div>
        </div>
    </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>