<!DOCTYPE html>
<html lang="es">
<head>
<title>Bootstrap 1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Encabezado 1 de una página en bootstrap</h1>
<h2 class="card-header">Encabezado número 2 de la página</h2>
<p>Esta frase está aquí para mostrar el texto normal de un párrafo en bootstrap.</p>
<small>Yo, sin embargo, estoy en una etiqueta small</small>
<div class="row">
<div class="col-3" style="border:1px solid black;">Si eres nuevo en Bootstrap, puedes empezar con la plantilla HTML básica que se muestra a continuación</div>
<div class="col-3" style="border:1px solid black;">Si eres nuevo en Bootstrap, puedes empezar con la plantilla HTML básica que se muestra a continuación</div>
<div class="col-3" style="border:1px solid black;">Si eres nuevo en Bootstrap, puedes empezar con la plantilla HTML básica que se muestra a continuación</div>
<div class="col-3" style="border:1px solid black;">Si eres nuevo en Bootstrap, puedes empezar con la plantilla HTML básica que se muestra a continuación</div>
</div>
<div class="row">
<div class="col-8" style="border:1px solid black;">El framework es gratuito y se puede usar para fines comerciales</div>
<div class="col-4" style="border:1px solid black;">El framework es gratuito y se puede usar para fines comerciales</div>
</div>
<mark>Si me quieres destacar, yo soy tu etiqueta (mark)</mark>
<blockquote class="blockquote text-right">
<p>Yo puedo ser interesante, una .blockquote</p>
</blockquote>
<p>Prueba la etiqueta <code>code</code>, ya veras que bien</p>
<p>Y si quieres saber las teclas rápidas son estas: <kbd>ctrl+f</kbd>, <kbd>ctrl+t</kbd> y <kbd>ctrl+s</kbd></p>
<p class="text-muted pull-right">Soy la clase text-muted aplicada a un párrafo.</p>
<p class="text-primary">Soy la clase text-primary aplicada a un párrafo.</p>
<p class="text-success pull-right">Soy la clase text-success aplicada a un párrafo.</p>
<p class="text-info">Soy la clase text-info aplicada a un párrafo.</p>
<p class="text-warning pull-right">Soy la clase text-warning aplicada a un párrafo.</p>
<p class="text-danger">Soy la clase text-danger aplicada a un párrafo.</p>
<p class="bg-primary text-left">Pues yo soy un párrafo con una clase bg-primary</p>
<p class="bg-success text-center">Pues yo soy un párrafo con una clase bg-success y otra text-center</p>
<p class="bg-info text-right">Pues yo soy un párrafo con una clase bg-info y otra text-right</p>
<p class="bg-warning text-center">Pues yo soy un párrafo con una clase bg-warning</p>
<p class="bg-danger text-right">Pues yo soy un párrafo con una clase bg-danger</p>
<p class="lead">Probando, probando clase lead</p>
<ul class="list-inline">
<li class="list-inline-item">Que me dices</li>
<li class="list-inline-item">Si te digo que soy</li>
<li class="list-inline-item">una lista "list-inline"?</li>
</ul>
<table class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
<th>Encabezado 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yo soy</td>
<td>una clase</td>
<td>table</td>
</tr>
<tr>
<td>Que también</td>
<td>soy clase</td>
<td>table-striped</td>
</tr>
<tr>
<td>Y también</td>
<td>soy clase</td>
<td>table-hover</td>
</tr>
<tr>
<td>Y también</td>
<td>soy clase</td>
<td>table-condensed</td>
</tr>
<tr class="table-success">
<td>Y la fila</td>
<td>es clase success</td>
<td>probad info, warning y danger</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<html lang="es">
<head>
<title>Bootstrap 1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Encabezado 1 de una página en bootstrap</h1>
<h2 class="card-header">Encabezado número 2 de la página</h2>
<p>Esta frase está aquí para mostrar el texto normal de un párrafo en bootstrap.</p>
<small>Yo, sin embargo, estoy en una etiqueta small</small>
<div class="row">
<div class="col-3" style="border:1px solid black;">Si eres nuevo en Bootstrap, puedes empezar con la plantilla HTML básica que se muestra a continuación</div>
<div class="col-3" style="border:1px solid black;">Si eres nuevo en Bootstrap, puedes empezar con la plantilla HTML básica que se muestra a continuación</div>
<div class="col-3" style="border:1px solid black;">Si eres nuevo en Bootstrap, puedes empezar con la plantilla HTML básica que se muestra a continuación</div>
<div class="col-3" style="border:1px solid black;">Si eres nuevo en Bootstrap, puedes empezar con la plantilla HTML básica que se muestra a continuación</div>
</div>
<div class="row">
<div class="col-8" style="border:1px solid black;">El framework es gratuito y se puede usar para fines comerciales</div>
<div class="col-4" style="border:1px solid black;">El framework es gratuito y se puede usar para fines comerciales</div>
</div>
<mark>Si me quieres destacar, yo soy tu etiqueta (mark)</mark>
<blockquote class="blockquote text-right">
<p>Yo puedo ser interesante, una .blockquote</p>
</blockquote>
<p>Prueba la etiqueta <code>code</code>, ya veras que bien</p>
<p>Y si quieres saber las teclas rápidas son estas: <kbd>ctrl+f</kbd>, <kbd>ctrl+t</kbd> y <kbd>ctrl+s</kbd></p>
<p class="text-muted pull-right">Soy la clase text-muted aplicada a un párrafo.</p>
<p class="text-primary">Soy la clase text-primary aplicada a un párrafo.</p>
<p class="text-success pull-right">Soy la clase text-success aplicada a un párrafo.</p>
<p class="text-info">Soy la clase text-info aplicada a un párrafo.</p>
<p class="text-warning pull-right">Soy la clase text-warning aplicada a un párrafo.</p>
<p class="text-danger">Soy la clase text-danger aplicada a un párrafo.</p>
<p class="bg-primary text-left">Pues yo soy un párrafo con una clase bg-primary</p>
<p class="bg-success text-center">Pues yo soy un párrafo con una clase bg-success y otra text-center</p>
<p class="bg-info text-right">Pues yo soy un párrafo con una clase bg-info y otra text-right</p>
<p class="bg-warning text-center">Pues yo soy un párrafo con una clase bg-warning</p>
<p class="bg-danger text-right">Pues yo soy un párrafo con una clase bg-danger</p>
<p class="lead">Probando, probando clase lead</p>
<ul class="list-inline">
<li class="list-inline-item">Que me dices</li>
<li class="list-inline-item">Si te digo que soy</li>
<li class="list-inline-item">una lista "list-inline"?</li>
</ul>
<table class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
<th>Encabezado 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yo soy</td>
<td>una clase</td>
<td>table</td>
</tr>
<tr>
<td>Que también</td>
<td>soy clase</td>
<td>table-striped</td>
</tr>
<tr>
<td>Y también</td>
<td>soy clase</td>
<td>table-hover</td>
</tr>
<tr>
<td>Y también</td>
<td>soy clase</td>
<td>table-condensed</td>
</tr>
<tr class="table-success">
<td>Y la fila</td>
<td>es clase success</td>
<td>probad info, warning y danger</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>