This is the start of a generic bootstrap UI Kit page.

uikit.html

<style>
  .row { margin: 30px 0 60px; }
</style>

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <h3>Headers & Body</h3>
    </div>

    <div class="col-md-4">
      <h1>h1. heading <small>Secondary text</small></h1>
      <h2>h2. heading <small>Secondary text</small></h2>
      <h3>h3. heading <small>Secondary text</small></h3>
      <h4>h4. heading <small>Secondary text</small></h4>
      <h5>h5. heading <small>Secondary text</small></h5>
      <h6>h6. heading <small>Secondary text</small></h6>
    </div>

    <div class="col-md-4 col-md-offset-1">
      <p class="lead">This is a paragraph lead in line.</p>
      <p>This is body copy.  Totally normal text, with normal characteristics.  Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
      <p>And a second paragraph to show what that looks like.</p>
    </div>
  </div> <!-- /row -->

  <div class="row">
    <div class="col-md-3">
      <h3>Typography Variants</h3>
    </div>

    <div class="col-md-4">
      <p>You can use the mark tag to <mark>highlight</mark> text.</p>
      <p><del>This line of text is meant to be treated as deleted text.</del></p>
      <p><u>This line of text will render as underlined</u></p>
      <p><small>This line of text is meant to be treated as fine print.</small></p>
      <p><strong>rendered as bold text</strong></p>
      <p><em>rendered as italicized text</em></p>
      <p class="text-lowercase">Lowercased text.</p>
      <p class="text-uppercase">Uppercased text.</p>
      <p class="text-capitalize">Capitalized text.</p>
    </div>

    <div class="col-md-4 col-md-offset-1">
      <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>

      <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>

      <pre>&lt;p&gt;Sample code here...&lt;/p&gt;</pre>
    </div>
  </div> <!-- /row -->

  <div class="row">
    <div class="col-md-3">
      <h3>Lists</h3>
    </div>

    <div class="col-md-4">
      <h1>h1. heading <small>Secondary text</small></h1>
      <h2>h2. heading <small>Secondary text</small></h2>
      <h3>h3. heading <small>Secondary text</small></h3>
      <h4>h4. heading <small>Secondary text</small></h4>
      <h5>h5. heading <small>Secondary text</small></h5>
      <h6>h6. heading <small>Secondary text</small></h6>
    </div>

    <div class="col-md-4 col-md-offset-1">
      <p class="lead">This is a paragraph lead in line.</p>
      <p>This is body copy.  Totally normal text, with normal characteristics.  Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
      <p>And a second paragraph to show what that looks like.</p>
    </div>
  </div> <!-- /row -->

  <div class="row">
    <div class="col-md-3">
      <h3>Button States</h3>
    </div>

    <div class="col-md-4">
      <p><a href="#fakelink" class="btn btn-lg btn-block btn-primary">Primary Button</a></p>
      <p><a href="#fakelink" class="btn btn-lg btn-block btn-warning">Warning Button</a></p>
      <p><a href="#fakelink" class="btn btn-lg btn-block btn-default">Default Button</a></p>
      <p><a href="#fakelink" class="btn btn-lg btn-block btn-danger">Danger Button</a></p>
    </div>

    <div class="col-md-4 col-md-offset-1">
      <p><a href="#fakelink" class="btn btn-lg btn-block btn-success">Success Button</a></p>
      <p><a href="#fakelink" class="btn btn-lg btn-block btn-info">Info Button</a></p>
      <p><a href="#fakelink" class="btn btn-lg btn-block btn-default active">Active Button</a></p>
      <p><a href="#fakelink" class="btn btn-lg btn-block btn-default disabled">Disabled Button</a></p>
    </div>
  </div> <!-- /row -->

  <div class="row">
    <div class="col-md-3">
      <h3>Button Variants</h3>
    </div>

    <div class="col-md-4">
      <p>
        <div class="btn-group">
          <button type="button" class="btn btn-danger">Dropdown Button</button>
          <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div>
      </p>
      <p>
        <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>
      </p>
      <p><a class="btn btn-danger" href="#"> <i class="fa fa-trash-o fa-lg"></i> Icon Button</a></p>
      <p><a href="#fakelink" class="btn btn-lg btn-primary btn-embossed">Embossed Button</a></p>
    </div>

    <div class="col-md-4 col-md-offset-1">
      <p><a href="#fakelink" class="btn btn-lg btn-block btn-primary">Large Button</a></p>
      <p><a href="#fakelink" class="btn btn-block btn-primary">Normal Button</a></p>
      <p><a href="#fakelink" class="btn btn-sm btn-block btn-primary">Small Button</a></p>
      <p><a href="#fakelink" class="btn btn-xs btn-block btn-primary">Extra Small Button</a></p>
    </div>
  </div> <!-- /row -->

  <div class="row">
    <div class="col-md-3">
      <h3>Inputs</h3>
    </div>

    <div class="col-md-4">
      <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="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>
        <div class="form-group">
          <label>Text Area</label>
          <textarea class="form-control" rows="3"></textarea>
        </div>
        <div class="form-group">
          <label>Select Box</label>
          <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>

    </div>

    <div class="col-md-4 col-md-offset-1">
      <div class="row">
        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label for="exampleInputEmail1" class="col-sm-4 control-label" >Email address</label>
            <div class="col-sm-8">
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
            </div>
          </div>
          <div class="form-group">
            <label for="exampleInputFile" class="col-sm-4 control-label">File input</label>
            <div class="col-sm-8">
              <input type="file" id="exampleInputFile">
              <p class="help-block">Example block-level help text here.</p>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-4 control-label">Text Area</label>
            <div class="col-sm-8">
              <textarea class="form-control" rows="3"></textarea>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-4 control-label">Select Box</label>
            <div class="col-sm-8">
              <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
              <button type="submit" class="btn btn-default">Submit</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div> <!-- /row -->

  <div class="row">
    <div class="col-md-3">
      <h3>Special Inputs</h3>
    </div>

    <div class="col-md-4">
      <div class="form-group">
        <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
      </div>
      <div class="form-group has-success">
        <label class="control-label" for="inputSuccess1">Input with success</label>
        <input type="text" class="form-control" id="inputSuccess1">
      </div>
      <div class="form-group has-warning">
        <label class="control-label" for="inputWarning1">Input with warning</label>
        <input type="text" class="form-control" id="inputWarning1">
      </div>
      <div class="form-group has-error">
        <label class="control-label" for="inputError1">Input with error</label>
        <input type="text" class="form-control" id="inputError1">
      </div>
    </div>

    <div class="col-md-4 col-md-offset-1">
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-addon">@</div>
          <input class="form-control" type="email" placeholder="Enter email">
        </div>
      </div>

      <div class="form-group">
        <div class="input-group add-on">
          <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
          <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
          </div>
        </div>
      </div>

      <div class="form-group">
        <input type="text" class="form-control" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" placeholder="Add tags">
      </div>

      <div class="form-group">
        <div class="input-group">
          <input class="form-control" data-behaviour="datepicker" placeholder="02/14/2014" type="text">
          <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
      </div>
    </div>
  </div> <!-- /row -->

  <div class="row">
    <div class="col-md-3">
      <h3>Breadcrumbs, Labels, & Pagination</h3>
    </div>

    <div class="col-md-4">
      <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Library</a></li>
        <li class="active">Data</li>
      </ol>

      <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>
    </div>

    <div class="col-md-4 col-md-offset-1">
      <ul class="pagination">
        <li class="previous"><a href="#fakelink">← Previous</a></li>
        <li><a href="#fakelink">1</a></li>
        <li><a href="#fakelink">2</a></li>
        <li class="active"><a href="#fakelink">3</a></li>
        <li><a href="#fakelink">4</a></li>
        <li><a href="#fakelink">5</a></li>
        <li class="next"><a href="#fakelink">Newer →</a></li>
      </ul>
    </div>
  </div> <!-- /row -->

  <div class="row">
    <div class="col-md-3">
      <h3>Alerts</h3>
    </div>

    <div class="col-md-9">
      <div class="alert alert-info alert-dismissible">
        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        Your computer restarted <a href="#fakelink">because of a problem</a>. Sorry for any inconvenience and appreciate your patient.
      </div>

      <div class="alert alert-info alert-dismissible">
        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4>Information Lable</h4>
        <p>An error message is information displayed when an <a href="#fakelink">unexpected condition occurs</a>, usually on a computer or other device. On modern operating systems with graphical user interfaces, error messages are often displayed using dialog boxes.</p>
        <a href="#fakelink" class="btn btn-info">Turn it off now</a>
        <a href="#fakelink" class="btn btn-default">It’s ok</a>
      </div>
    </div>
  </div> <!-- /row -->

  <div class="row">
    <div class="col-md-3">
      <h3>Tables</h3>
    </div>

    <div class="col-md-9">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>

      <table class="table table-striped">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>

      <table class="table table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td rowspan="2">1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>Mark</td>
            <td>Otto</td>
            <td>@TwBootstrap</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div> <!-- /row -->

  <div class="row">
    <div class="col-md-3">
      <h3>Progress Bar</h3>
    </div>

    <div class="col-md-9">
      <div class="progress">
        <div class="progress-bar" style="width: 45%;"></div>
      </div>
    </div>
  </div> <!-- /row -->

  <div class="row">
    <div class="col-md-3">
      <h3>Tooltips and Popovers</h3>
    </div>

    <div class="col-md-4">
      <div class="popover top" style="display: block; position: relative;">
        <div class="arrow"></div>
        <h3 class="popover-title">Popover top</h3>
        <div class="popover-content">
          <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-md-offset-1">
      <p data-toggle="tooltip" data-placement="bottom" data-tooltip-style="light" title="" data-original-title="Hello. I’m the Tooltip."></p>
      <div class="tooltip fade bottom in tooltip-light" style="top: 3px; left: 0px; display: block;"><div class="tooltip-arrow"></div><div class="tooltip-inner">Hello. I’m the Tooltip.</div></div>
    </div>
  </div> <!-- /row -->

  <div class="row">
    <div class="col-md-3">
      <h3>Navlists</h3>
    </div>

    <div class="col-md-4">
      <ul class="nav nav-list">
        <li class="nav-header">Subjects</li>
        <li>
          <a href="#fakelink">
            UX Design
            <span class="badge pull-right">19</span>
          </a>
        </li>
        <li class="active">
          <a href="#fakelink">
            Photography
            <span class="badge pull-right">130</span>
          </a>
        </li>
        <li>
          <a href="#fakelink">
            Art
            <span class="badge pull-right">9</span>
          </a>
        </li>
        <li class="divider"></li>
        <li class="nav-header">Condition</li>
        <li>
          <a href="#fakelink">
            Brand new
            <span class="badge pull-right">69</span>
          </a>
        </li>
        <li>
          <a href="#fakelink">
            Read-used
            <span class="badge pull-right">21</span>
          </a>
        </li>
        <li>
          <a href="#fakelink">
            Work-used
            <span class="badge pull-right">40</span>
          </a>
        </li>
      </ul>
    </div>

    <div class="col-md-4 col-md-offset-1">
    </div>
  </div> <!-- /row -->

  <div class="row">
    <div class="col-md-3">
      <h3>Images</h3>
    </div>

    <div class="col-md-9">
      <img data-src="holder.js/140x140" class="img-rounded" alt="140x140" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDAiIGhlaWdodD0iMTQwIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjcwIiB5PSI3MCIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMnB4O2ZvbnQtZmFtaWx5OkFyaWFsLEhlbHZldGljYSxzYW5zLXNlcmlmO2RvbWluYW50LWJhc2VsaW5lOmNlbnRyYWwiPjE0MHgxNDA8L3RleHQ+PC9zdmc+" style="width: 140px; height: 140px;">
      <img data-src="holder.js/140x140" class="img-circle" alt="140x140" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDAiIGhlaWdodD0iMTQwIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjcwIiB5PSI3MCIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMnB4O2ZvbnQtZmFtaWx5OkFyaWFsLEhlbHZldGljYSxzYW5zLXNlcmlmO2RvbWluYW50LWJhc2VsaW5lOmNlbnRyYWwiPjE0MHgxNDA8L3RleHQ+PC9zdmc+" style="width: 140px; height: 140px;">
      <img data-src="holder.js/140x140" class="img-thumbnail" alt="140x140" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDAiIGhlaWdodD0iMTQwIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjcwIiB5PSI3MCIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMnB4O2ZvbnQtZmFtaWx5OkFyaWFsLEhlbHZldGljYSxzYW5zLXNlcmlmO2RvbWluYW50LWJhc2VsaW5lOmNlbnRyYWwiPjE0MHgxNDA8L3RleHQ+PC9zdmc+" style="width: 140px; height: 140px;">
    </div> 
  </div> <!-- /row -->
</div>