<div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
              Collapsible Group Item #1
            </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
          <div class="panel-body">
            ...
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
              Collapsible Group Item #2
            </a>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
          <div class="panel-body">
            ...
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
              Collapsible Group Item #3
            </a>
          </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
          <div class="panel-body">
            ...
          </div>
        </div>
      </div>
      </div>

<div class="alert alert-primary">Lorem ipsum <a href="#" class="alert-link">...</a></div>
<div class="alert alert-success">Lorem ipsum <a href="#" class="alert-link">...</a></div>
<div class="alert alert-info">Lorem ipsum <a href="#" class="alert-link">...</a></div>
<div class="alert alert-warning">Lorem ipsum <a href="#" class="alert-link">...</a></div>
<div class="alert alert-danger">Lorem ipsum <a href="#" class="alert-link">...</a></div>

<div class="alert alert-warning alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
      

<div class="alert-spot alert-spot-primary">
      <span class="glyphicon glyphicon-user"></span>
      <div class="alert-link-text">
        <h4> ... </h4>
        <p> ... </p>
      </div>
      </div>
      

<a class="alert-spot alert-spot-danger" href="#">
      <span class="glyphicon glyphicon-user"></span>
      <div class="alert-link-text">
        <h4> ... </h4>
        <p> ... </p>
      </div>
      <span class="glyphicon glyphicon-chevron-right"></span>
      </a>

<div class="row shortcut-row">
      <a class="col-md-3 col-sm-6 shortcut" href="#">
        <span class="bg-warning-lt">
          <span class="glyphicon glyphicon-cloud"></span>
        </span>
        <h3> ... </h3>
        <p> ... </p>
      </a>
      ...
      </div>

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

<button type="button" class="btn btn-lg btn-default">Large button</button>
      <button type="button" class="btn btn-lg btn-default">Large button</button>
      
      
      <!-- Botón con desplegable -->
      <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Action <span class="caret"></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>
      
      <!-- Botón con desplegable -->
      <div class="btn-group">
      <button type="button" class="btn btn-danger">Action</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>
      

<button type="button" class="btn btn-xl btn-primary">Extra Large</button>
<button type="button" class="btn btn-lg btn-primary">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-sm btn-primary">Small button</button>
<button type="button" class="btn btn-xs btn-primary">Extra small button</button>

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

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

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

<div class="btn-group btn-group-xl">...</div>
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>
      
      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        ...
      </div>
      
      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
      </div>

<h3>Example heading <span class="label label-default">New</span></h3>
      
      <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>
      

<form role="form">
      <div class="form-group">
        <label for="exampleInputEmail1">Correo electrónico</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Contraseña</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="form-group">
        <label for="exampleInputFile">Adjuntar archivo</label>
        <input type="file" id="exampleInputFile">
      </div>
      <textarea class="form-control" rows="3"></textarea>
      <br />
      <button type="submit" class="btn btn-primary">Ingresar</button>
      </form>
      

<form class="form-horizontal" role="form">
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Correo electrónico</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="inputEmail3" placeholder="Correo electrónico">
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Contraseña</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Contraseña">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <div class="checkbox">
            <label>
              <input type="checkbox"> Recordarme
            </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="ingresar" class="btn btn-primary">Ingresar</button>
        </div>
      </div>
      </form>
      

<div class="input-group">
      <input class="form-control" type="text">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Ingresar</button>
      </span>
      </div>
      <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Acción<span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Acción</a></li>
          <li><a href="#">Otra acción</a></li>
          <li><a href="#">Algo más</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control">
      </div><!-- /input-group -->
      

<div class="form-group has-feedback">
      <label class="control-label" for="iconInput1">Email</label>
      <input type="text" class="form-control" id="iconInput1" placeholder="Email">
      <span class="ba-icon ba-email form-control-feedback"></span>
      </div>
      
      <div class="form-group has-feedback">
      <input type="text" class="form-control input-sm" id="iconInput4" placeholder="Location">
      <span class="glyphicon glyphicon-map-marker form-control-feedback"></span>
      </div>

<div class="form-group has-button">
      <label class="control-label" for="buttonInput1">Email</label>
      <input type="text" class="form-control" id="buttonInput1" placeholder="Email">
      <button class="btn">
        <span class="glyphicon glyphicon-remove"></span>
      </button>
      </div>
      
      <div class="form-group has-button">
      <input type="text" class="form-control input-xl" id="buttonInput2" placeholder="Buscar">
      <button class="btn">
        <span class="glyphicon glyphicon-search"></span>
      </button>
      </div>

<link rel="stylesheet" href="path/to/chosen.min.css">
      
      <div class="form-group has-button">
      <label class="control-label" for="inputSuccess2">Email</label>
      <select class="form-control chosen-select" data-placeholder="Elegí una opción">
        <option value=""> ... </option>
      </select>
      </div>
      
      <div class="form-group has-button">
      <label class="control-label" for="inputSuccess2">Email</label>
      <select class="form-control chosen-select" data-placeholder="Elegí una opción">
        <optgroup label="Group 1">
          <option value=""> ... </option>
        </optgroup>
        <optgroup label="Group 2">
          <option value=""> ... </option>
        </optgroup>
      </select>
      </div>
      
      <div class="form-group has-button">
      <label class="control-label" for="inputSuccess2">Email</label>
      <select class="form-control chosen-select" data-placeholder="Elegí una opción" multiple>
        <option value=""> ... </option>
      </select>
      </div>
      
      <script src="path/to/chosen.jquery.min.js"></script>
      <script>
      $(function(){
        $(".chosen-select").chosen();
      });
      </script>

<input class="form-control input-xl" type="text" placeholder=".input-xl">
      <input class="form-control input-lg" type="text" placeholder=".input-lg">
      <input class="form-control" type="text" placeholder="Default input">
      <input class="form-control input-sm" type="text" placeholder=".input-sm">
      
      <select class="form-control input-xl">...</select>
      <select class="form-control input-lg">...</select>
      <select class="form-control">...</select>
      <select class="form-control input-sm">...</select>
      

<div class="form-group has-success has-feedback">
      <label class="control-label" for="inputSuccess2">Input with success</label>
      <input type="text" class="form-control" id="inputSuccess2">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
      <div class="form-group has-warning has-feedback">
      <label class="control-label" for="inputWarning2">Input with warning</label>
      <input type="text" class="form-control" id="inputWarning2">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
      </div>
      <div class="form-group has-error has-feedback">
      <label class="control-label" for="inputError2">Input with error</label>
      <input type="text" class="form-control" id="inputError2">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
      

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>Cras justo odio
  </li>
</ul>
      

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
      

<div class="row">
      <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img data-src="holder.js/100%x180" alt="...">
        </a>
      </div>
      ...
      </div>
      

<div class="row">
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <img data-src="holder.js/300x200" alt="...">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>...</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
          </div>
        </div>
      </div>
      </div>
      

<a href="#">Inbox <span class="badge">42</span></a>
      

<a type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a>
      
      <a type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a>
      
      <a type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a>
      
      <a type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a>
      
      <!-- Inicialización -->
      <script>
      $(function () {
        $('[data-toggle="tooltip"]').tooltip()
      })
      </script>

<div class="popover top">
      <div class="arrow"></div>
      <h3 class="popover-title">Popover top</h3>
      <div class="popover-content">
        <p>...</p>
      </div>
      </div>
      
      <div class="popover right">...</div>
      
      <div class="popover bottom">...</div>
      
      <div class="popover left">...</div>
      
      <script>
      $(function () {
        $('[data-toggle="popover"]').popover()
      })
      </script>

  <div class="list-group list-group-content">
        <h3> ... </h3>
        <a class="list-group-item list-thumb" href="#">
          <div style="background-image:url(example.jpg);"></div>
          <h4> ... </h4>
          <p> ... </p>
        </a>
        <a class="list-group-item" href="#">
          <h4> ... </h4>
          <p> ... </p>
        </a>
        <a class="list-group-item" href="#">
          <h4> ... </h4>
        </a>
      </div>

<ul class="media-list">
      <li class="media">
        <a class="pull-left" href="#">
          <img class="media-object" src="..." alt="...">
        </a>
        <div class="media-body">
          <h4 class="media-heading">Media heading</h4>
          ...
        </div>
      </li>
      </ul>
      

<!-- Button trigger modal -->
      <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Abrir modal
      </button>
      
      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Título del Modal</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
            <button type="button" class="btn btn-primary">Guardar cambios</button>
          </div>
        </div>
      </div>
      </div>

<ul class="pagination">
 <li class="disabled"><a href="#" class="glyphicon glyphicon-chevron-left"></a></li>
 <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
 <li><a href="#">2</a></li>
  ...
 <li><a href="#" class="glyphicon glyphicon-chevron-right"></a></li>
</ul>

<ul class="pager">
          <li class="previous disabled">
            <a href="#"><span class="glyphicon glyphicon-chevron-left"></span>Older</a>
          </li>
          <li class="next">
            <a href="#"><span class="glyphicon glyphicon-chevron-right"></span>Newer</a>
          </li>
      </ul>

<div class="panel panel-default">
      <div class="panel-body">
        Basic panel example
      </div>
      </div>
      <div class="panel panel-default">
      <div class="panel-heading">Panel heading without title</div>
      <div class="panel-body">
        Panel content
      </div>
      </div>
      <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
      </div>
      <div class="panel-body">
        Panel content
      </div>
      </div>
      <div class="panel panel-default">
      <div class="panel-body">
        Panel content
      </div>
      <div class="panel-footer">Panel footer</div>
      </div>