Estilos


Encabezado

h1. Texto referencia small

h2. Texto referencia small

h3. Texto referencia small

h4. Texto referencia small

h5. Texto referencia small
h6. Texto referencia small

                
                  <h1>h1. Texto referencia</h1>
                  <h2>h2. Texto referencia</h2>
                  <h3>h3. Texto referencia</h3>
                  <h4>h4. Texto referencia</h4>
                  <h5>h5. Texto referencia</h5>
                  <h6>h6. Texto referencia</h6>
                
              

Cuerpo

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. → 21 px

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. → 16 px | 1 em


                
                  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                
              

Énfasis

Esta línea de texto es tratada como impresión fina

El siguiente fragmento de texto es mostrado como texto en negrita

El siguiente fragmento de texto es mostrado como texto en cursiva


                
                  <p>Esta línea de texto es tratada como impresión fina</p>

                  <p>El siguiente fragmento de texto es <strong>mostrado como texto en negrita</strong></p>

                  <p>El siguiente fragmento de texto es <i>mostrado como texto en cursiva</i></p>
                
              

Cita

“Todas las áreas del Gobierno tendrán un plan de comunicación e información que será publicado y actualizado en forma permanente”

Andrés Ibarra

                
                  <blockquote>
                   <p> “Todas las áreas del Gobierno tendrán un plan de comunicación e información que será publicado y actualizado en forma permanente”</p>
                    — <cite>Andrés Ibarra</cite>
                  </blockquote>
                
              

Listas

Lista sin orden
  • Lorem ipsum dolor sit amet.
  • Consectetur adipiscing elit lorem ipsum dolor sit.
  • Lorem ipsum dolor sit amet.
  • Consectetur adipiscing elit lorem ipsum dolor sit.
  • Lorem ipsum dolor sit amet.
  • Consectetur adipiscing elit lorem ipsum dolor sit.
                
                <ul>
                  <li>Lorem ipsum dolor sit <strong>amet</strong>.</li>
                  <li>Consectetur adipiscing elit <strong>lorem ipsum dolor sit</strong>.</li>
                  <li>Lorem ipsum dolor sit <strong>amet</strong>.</li>
                  <li>Consectetur adipiscing elit <strong>lorem ipsum dolor sit</strong>.</li>
                  <li>Lorem ipsum dolor sit <strong>amet</strong>.</li>
                  <li>Consectetur adipiscing elit <strong>lorem ipsum dolor sit</strong>.</li>
                </ul>
                
              

Lista ordenada
  1. Lorem ipsum dolor sit amet.
  2. Consectetur adipiscing elit lorem ipsum dolor sit.
  3. Lorem ipsum dolor sit amet.
  4. Consectetur adipiscing elit lorem ipsum dolor sit.
  5. Lorem ipsum dolor sit amet.
  6. Consectetur adipiscing elit lorem ipsum dolor sit.
                
                  <ol>
                    <li>Lorem ipsum dolor sit <strong>amet</strong>.</li>
                    <li>Consectetur adipiscing elit <strong>lorem ipsum dolor sit</strong>.</li>
                    <li>Lorem ipsum dolor sit <strong>amet</strong>.</li>
                    <li>Consectetur adipiscing elit <strong>lorem ipsum dolor sit</strong>.</li>
                    <li>Lorem ipsum dolor sit <strong>amet</strong>.</li>
                    <li>Consectetur adipiscing elit <strong>lorem ipsum dolor sit</strong>.</li>
                  </ol>
                
              

Lista de descripción
Listas descriptivas
Una lista descriptiva es perfecta para la definición de términos.
Euismod
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
                
                  <dl>
                    <dt>Listas descriptivas</dt>
                    <dd>Una lista descriptiva es perfecta para la definición de términos.</dd>
                    <dt>Euismod</dt>
                    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                    <dt>Malesuada porta</dt>
                    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                  </dl>
                
              

Tablas

El objetivo de las tablas es mostrar una serie de datos en forma ordenada, organizado en filas y columnas.


# Nombre Apellido Nombre de usuario
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
                
                  <table class="table">
                    <thead>
                      <tr>
                        <th>#</th>
                        <th>Nombre</th>
                        <th>Apellido</th>
                        <th>Nombre de usuario</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th scope="row">1</th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                      </tr>
                      <tr>
                      <th scope="row">2</th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                      </tr>
                      <tr>
                      <th scope="row">3</th>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                      </tr>
                    </tbody>
                  </table>
                
              

Tabla con separador de filas
# Nombre Apellido Nombre de usuario
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

                
                  <table class="table table-striped">

                  </table>
                
              

Tabla con buscador
# Nombre Apellido Nombre de usuario
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Steve Otto @mdq
5 Peter Thornton @slim
6 John Big Bird @twitter2
                
                  <div id="usuarios">
                    <table class="table table-striped">
                      <thead>
                        <tr>
                          <th>#</th>
                          <th>Nombre</th>
                          <th>Apellido</th>
                          <th>Nombre de usuario</th>
                        </tr>
                        </thead>
                        <tbody class="list">
                        <tr>
                          <th scope="row">1</th>
                          <td class="nombre">Mark</td>
                          <td class="apellido">Otto</td>
                          <td class="usuario">@mdo</td>
                        </tr>
                        <tr>
                        <th scope="row">2</th>
                          <td class="nombre">Jacob</td>
                          <td class="apellido">Thornton</td>
                          <td class="usuario">@fat</td>
                        </tr>
                        <tr>
                        <th scope="row">3</th>
                          <td class="nombre">Larry</td>
                          <td class="apellido">the Bird</td>
                          <td class="usuario">@twitter</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                
              

Javascript relacionado
                
                  var options = {
                    valueNames: [ 'nombre', 'apellido', 'usuario' ]
                  };

                  var userList = new List('usuarios', options);
                
              

Tabla con bordes
# Nombre Apellido Nombre de usuario
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

                
                  <table class="table table-bordered">

                  </table>
                
              

Tabla con colores
# Nombre Apellido Nombre de usuario
1 Jacob Thornton @fat
3 Mark Otto @mdo
4 Jacob Thornton @fat
5 Larry the Bird @twitter

                

                      <tr class="info">
                        <th scope="row">1</th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                      </tr>
                      <tr class="success">
                        <th scope="row">3</th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                      </tr>
                      <tr class="warning">
                        <th scope="row">4</th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                      </tr>
                      <tr class="danger">
                        <th scope="row">5</th>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                      </tr>

                
              

Tabla con hover
# Nombre Apellido Nombre de usuario
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

                
                  <table class="table table-hover">
                      ......
                  </table>
                
              

Ejemplo de formulario

Los formulario permite que el usuario cargue datos y sean enviados al servidor. Es el medio ideal para realizar logueos, establecer contacto, sacar turnos, etc.


Tamaño de los campos para formulario

                  
                    <form>
                      <div class="form-group">
                        <input class="form-control input-lg" type="text" placeholder=".input-lg">
                      </div>
                      <div class="form-group">
                        <input class="form-control" type="text" placeholder=".input-default">
                      </div>
                      <div class="form-group">
                        <input class="form-control input-sm" type="text" placeholder=".input-sm">
                      </div>
                     </form>
                  
                


                  
                    <form>
                      <div class="form-group">
                        <select class="form-control input-lg"><option value="">.input-lg</option></select>
                      </div>
                      <div class="form-group">
                        <select class="form-control"><option value="">Default</option></select>
                      </div>
                      <div class="form-group">
                        <select class="form-control input-sm"><option value="">.input-sm</option></select>
                      </div>
                     </form>
                  
                

Adjuntar archivo:


                  
                    <form>
                      <div class="form-group">
                        <label for="exampleInputEmail1">Dirección Email</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                      </div>
                      <div class="form-group">
                        <label for="exampleInputPassword1">Contraseña</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Contraseña">
                      </div>
                      <div class="form-group">
                        <p>Adjuntar archivo:</p>
                        <input type="file" id="exampleInputFile" class="inputfile">
                        <label for="exampleInputFile">Seleccionar archivo</label>
                      </div>
                      <div class="checkbox">
                        <label>
                          <input type="checkbox"> Campo de verificación (Check)
                        </label>
                      </div>
                      <button type="submit" class="btn btn-primary">Enviar</button>
                     </form>
                  
                

Estado de validación


                
                  <div class="form-group has-success has-feedback">
                    <label class="control-label" for="inputSuccess2">Campo de entrada con éxito</label>
                    <input type="text" class="form-control" id="inputSuccess2">
                    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                  </div>
                  <div class="form-group has-success has-feedback">
                    <label class="control-label" for="inputSuccess2">Campo de entrada pequeño con éxito</label>
                    <input type="text" class="form-control input-sm" 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">Campo de entrada con advertencia</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">Campo de entrada con error</label>
                    <input type="text" class="form-control" id="inputError2">
                    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
                  </div>
                
              

Campos especiales

                
                  <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Acción</button>
                        <ul class="dropdown-menu">
                          <li><a href="#">Acción 1</a></li>
                          <li><a href="#">Acción 2</a></li>
                          <li><a href="#">Acción 3</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Acción 4</a></li>
                        </ul>
                      </div><!-- /btn-group -->
                      <input type="text" class="form-control">
                    </div>
                  </div>
                
              

                
                  <div class="form-group">
                    <div class="input-group">
                      <input class="form-control" type="text">
                      <span class="input-group-btn">
                        <button class="btn btn-default" type="button">IR!</button>
                      </span>
                    </div>
                  </div>
                
              

@


                
                  <div class="input-group">
                    <span class="input-group-addon" id="basic-addon1">@</span>
                    <input type="text" class="form-control" placeholder="Nombre de usuario" aria-describedby="basic-addon1">
                  </div>
                  <!-- -->
                  <div class="input-group">
                    <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user"></span></span>
                    <input type="text" class="form-control" placeholder="Nombre de usuario" aria-describedby="basic-addon1">
                  </div>
                
              

@ejemplo.com

                
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Nombre de usuario del receptor" aria-describedby="basic-addon2">
                    <span class="input-group-addon" id="basic-addon2">@ejemplo.com</span>
                  </div>
                
              

$ .00

                
                  <div class="input-group">
                    <span class="input-group-addon">$</span>
                    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
                    <span class="input-group-addon">.00</span>
                  </div>
                
              

https://ejemplo.com/usuarios/

                
                  <div class="input-group"/>
                    <span class="input-group-addon" id="basic-addon3">https://ejemplo.com/usuarios/</span/>
                    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"/>
                  </div/>

                
              

Botones

                

                  <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 disabled">Disabled</button>
                  <button type="button" class="btn btn-info disabled state-loading">Cargando</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>
                  <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-map-marker"></span>   Boton con ícono</button>
                
              

Tamaños de botones


                
                  <button type="button" class="btn btn-primary btn-lg">...</button>
                  <button type="button" class="btn btn-default btn-lg">...</button>
                  <button type="button" class="btn btn-primary">...</button>
                  <button type="button" class="btn btn-default">...</button>
                  <button type="button" class="btn btn-primary btn-sm">...</button>
                  <button type="button" class="btn btn-default btn-sm">...</button>
                  <button type="button" class="btn btn-primary btn-xs">...</button>
                  <button type="button" class="btn btn-default btn-xs">...</button>
                
              

Imágenes

 

                
                  <img src="#" alt="" class="img-rounded">
                  <img src="#" alt="" class="img-circle">
                

              

Clases auxiliares

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.


                
                  <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
                  <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                  <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                  <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
                  <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
                  <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
                
              

Esta clase se utiliza en casos donde el contenido es poco, ocasionando que el pie de página pierda su posicion en la parte inferior.

                
                  <footer class="main-footer sticky-footer">
                    <div class="container">
                      .......
                    </div>
                  </footer>
                
              

Componentes

Botón con desplegable


                
                  <div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">  Default <span>class="caret"></span></button>
                    <ul class="dropdown-menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li role="separator" class="divider"></li>
                      <li><a href="#">Separated link</a></li>
                    </ul>
                  </div>
                
              

Grupo de botones


Pestañas


                
                  <ul class="nav nav-tabs">
                    <li role="presentation" class="active">Inicio</li>
                    <li role="presentation">Perfil</li>
                    <li role="presentation">Mensajes</li>
                  </ul>
                
              


                
                  <nav class="navbar navbar-default">
                    <div class="container-fluid">
                      <!-- Brand and toggle get grouped for better mobile display -->
                      <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                          <span class="sr-only">Toggle navigation</span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#"><img src="img/argentinagob.svg" height="50" alt=""></a>
                      </div>

                      <!-- Collect the nav links, forms, and other content for toggling -->
                      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav navbar-right">
                          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                          <li><a href="#">Link</a></li>
                          <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Desplegable <span>class="caret"></span></a>
                            <ul class="dropdown-menu">
                              <li><a href="#">Action</a></li>
                              <li><a href="#">Another action</a></li>
                              <li><a href="#">Something else here</a></li>
                              <li role="separator" class="divider"></li>
                              <li><a href="#">Separated link</a></li>
                              <li role="separator" class="divider"></li>
                              <li><a href="#">One more separated link</a></li>
                            </ul>
                          </li>
                          <li><a href="#">Link</a></li>
                          <li>
                            <ul class="dropdown-menu">
                              <li><a href="#">Action</a></li>
                              <li><a href="#">Another action</a></li>
                              <li><a href="#">Something else here</a></li>
                              <li role="separator" class="divider"></li>
                              <li><a href="#">Separated link</a></li>
                              <li role="separator" class="divider"></li>
                              <li><a href="#">One more separated link</a></li>
                            </ul>
                          </li>
                        </ul>
                      </div><!-- /.navbar-collapse -->
                    </div><!-- /.container-fluid -->
                  </nav>
                
              


                
                  <ol class="breadcrumb">
                    <li>Inicio</li>
                    <li>Sección</li>
                    <li class="active">Artículo</li>
                  </ol>
                
              

Paginación


                
                  <ul class="pagination">
                    <li>
                      <a href="#" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                      </a>
                    </li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">6</a></li>
                    <li><a href="#">7</a></li>
                    <li><a href="#">8</a></li>
                    <li><a href="#">9</a></li>
                    <li>
                      <a href="#" aria-label="Next">
                        <span aria-hidden="true">»</span>
                      </a>
                    </li>
                  </ul>
                
              

Contenido

Grupo de lista

  • Cras justo odio
  • Dapibus ac facilisis in
  • 14 Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

                
                  <ul class="list-group">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item"><span class="badge">14</span> Morbi leo risus</li>
                    <li class="list-group-item">Porta ac consectetur ac</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                  </ul>
                
              

Panel

Ejemplo de panel básico

Panel link no destacado

Este es el título del link

Panel links no destacados con descripción

Ministerio de Economía

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo


                 
                    <div class="panel panel-default">
                      <div class="panel-body">
                        Ejemplo de panel básico
                      </div>
                    </div>
                    <!--  -- >
                    <a class="panel panel-default" href="#">
                      <div class="panel-body">
                        <h3>Este es el título del link</h3>
                      </div>
                    </a>
                    <!--  -- >
                    <a class="panel panel-default" href="#">
                      <div class="panel-body">
                        <h3>Ministerio de Economía</h3>
                        <p class="text-muted">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
                      </div>
                    </a>

                 
               


                
                  <a class="panel panel-default panel-icon" href="#">
                    <div class="panel-heading"><i class="fa fa-file"></i></div>
                    <div class="panel-body">
                      <h3>Ministerio de Economía</h3>
                      <p class="text-muted">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
                    </div>
                  </a>
                  <!-- -- >
                  <a class="panel panel-default panel-md" href="#">
                    <div style="background-image:url('./img/placeholder.png');" class="panel-heading"></div>
                    <div class="panel-body">
                      <time>Jueves 14 de Enero del 2016</time>
                      <h4>El Ministro Buryaile asistió a la apertura de la Semana Verde Internacional, en Berlín</h4>
                    </div>
                  </a>
                
              

Panel con estado cargando

¿Este es tu número de CUIT?

2222324252

lo calculamos a partir de tus datos pero no siempre coincide

Si, es mi número de cuit

                
                  <div class="panel panel-default panel-icon panel-primary margin-40 panel-loading" href="#">
                    <div class="panel-heading"></div>
                    <div class="panel-body">
                      <h2>¿Este es tu número de CUIT?</h2>
                      <p class="h2"><strong>2222324252</strong></p>
                      <p>lo calculamos a partir de tus datos pero no siempre coincide</p>
                      <p><a href="cuit-ingresado.html" class="btn btn-primary btn-block">Si, es mi número de cuit</a></p>
                    </div>
                    <div class="panel-footer">
                      <a href="cuit-no-coincidente.html">Si no es tu número de cuit, ingresá el numero correcto</a>
                    </div>
                  </div>
                
              

Wells

Utilice el well para darle un efecto de inserción a un elemento .

Texto referencia.

Texto referencia.

Texto referencia.

                
                  <div class="well well-lg">
                    <h1>Texto referencia.</h1>
                  </div>
                
              

Etiquetas

Default Primary Success Info Warning Danger
                
                  <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>
                
              

Etiqueta numérica

Resaltar facilmente los elementos nuevos o no leídos mediante la adición de un span class="badge" a los enlaces, navs, y otros elementos.

Bandeja de entrada   42


                
                  <a href="#">Bandeja de entrada    <span class="badge">42</span></a>
                  <button class="btn btn-primary" type="button">
                    Mensajes   <span class="badge">4</span>
                  </button>
                
              

Alertas


                
                  <div class="alert alert-success" role="alert">Mensaje</div>
                  <div class="alert alert-info" role="alert">Mensaje</div>
                  <div class="alert alert-warning" role="alert">Mensaje</div>
                  <div class="alert alert-danger" role="alert">Mensaje</div>
                
              

Alertas con ícono


¿Ya iniciaste tu tramite?

Seguí el estado del trámite en linea

Línea gratuíta 0800-999-0209

Servicio Gratuíto de Orientación y Asesoramiento al Ciudadano


                
                  <div class="alert alert-warning">
                      <div class="media">
                          <div class="media-left">
                              <i class="fa fa-arrow-circle-o-right fa-fw fa-4x"></i>
                          </div>
                          <div class="media-body">
                              <h4>¿Ya iniciaste tu tramite? </h4>
                              <p class="margin-0">Seguí el <a href="http://www.mininterior.gov.ar/tramitesyservicios/estado-tramite-dni.php" target="_blank">estado del>trámite en linea</a></p>
                          </div>
                      </div>
                  </div>
                  <div class="alert alert-info">
                      <div class="media">
                          <div class="media-left">
                              <i class="fa fa-phone fa-fw fa-4x"></i>
                          </div>
                          <div class="media-body">
                              <h4><a href="">Línea gratuíta 0800-999-0209 </a></h4>
                              <p class="margin-0">Servicio Gratuíto de Orientación y Asesoramiento al Ciudadano</p>
                          </div>
                      </div>
                  </div>
                
              

Barra de progreso

60% Completado

                
                  <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% Completado</span>
                    </div>
                  </div>
                
              

Colores de fondo



                
                  <span class="bg-primary"></span>
                  <span class="bg-success"></span>
                  <span class="bg-info"></span>
                  <span class="bg-warning"></span>
                  <span class="bg-danger"></span>
                
              

Jumbotron

Hola mundo!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Leer más


Jumbotron con barra superior

Hola mundo!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt enim tempora at voluptas labore asperiores blanditiis similique laudantium placeat molestiae aut quam nisi sint atque, ullam consequuntur perspiciatis eum fuga.


                  
                    <section class="jumbotron" style="background-image: url('img/modernizacion.jpg');">
                      <div class="jumbotron_bar">
                        <div class="container">
                          <div class="row">
                            <div class="col-md-12">
                              <ol class="breadcrumb pull-left">
                                <li><a href="">Argentina</a></li>
                                <li class="active"><span>Ministerio de Modernización</span></li>
                              </ol>
                              <ul class="list-inline pull-right">
                                <li><a href="#" class="search"><i class="glyphicon glyphicon-search"></i>Buscar en el área</a></li>
                                <li><a href="#">Institucional</a></li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>
                    </section>
                  
                

Elemento multimedia

Estilos de objetos abstractos para la construcción de diversos tipos de componentes (como los comentarios de blogs, tweets, etc.) que ofrecen una imagen de la izquierda o alineado a la derecha junto con el contenido textual.

Encabezado

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

                
                  <div class="media">
                    <div class="media-left">
                      <a href="#">
                        <img class="media-object" src="http://placehold.it/100x100" alt="...">
                      </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">Encabezado</h4>
                       Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                    </div>
                  </div>
                
              

Videos Responsivos

Relación de aspecto 16:9


Relación de aspecto 4:3


Relación de aspecto 1:1

                

                  <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XYPJDCoR6nw"></iframe>
                  </div>
                  <div class="embed-responsive embed-responsive-4by3">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XYPJDCoR6nw"></iframe>
                  </div>
                  <div class="embed-responsive embed-responsive-1by1">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XYPJDCoR6nw"></iframe>
                  </div>

                
              

Javascript

Iniciar demo de modal
                  
                    <!-- Button to trigger modal -->
                    <a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Iniciar demo de modal</a>

                    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <h4 class="modal-title">Título de modal</h4>
                          </div>
                          <div class="modal-body">
                            <p>Texto de referencia…</p>
                          </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><!-- /.modal-content -->
                      </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->

                  
                

Nota de ayuda sobre elemento


                
                  <button type="button" class="btn btn-link" data-toggle="tooltip" data-placement="left" title="Nota a la izquierda">Nota a la izquierda</button>
                  <button type="button" class="btn btn-link" data-toggle="tooltip" data-placement="top" title="Nota superior">Nota superior</button>
                  <button type="button" class="btn btn-link" data-toggle="tooltip" data-placement="bottom" title="Nota inferior">Nota inferior</button>
                  <button type="button" class="btn btn-link" data-toggle="tooltip" data-placement="right" title="Nota a la derecha">Nota a la derecha</button>
                
              

Información contextual

                
                  <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">A la derecha</button>

                  <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Arriba</button>

                  <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
                  sagittis lacus vel augue laoreet rutrum faucibus.">Abajo</button>

                  <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">A la derecha</button>