<h1>hello world</h1>

<h2>hello world</h2>

<h3>hello world</h3>

<h4>hello world</h4>

<h5>hello world</h5>

<h6>hello world</h6>

<hr>

<h6 class="h1">hello world</h6>

<h5 class="h2">hello world</h5>

<h4 class="h3">hello world</h4>

<h3 class="h4">hello world</h3>

<h2 class="h5">hello world</h2>

<h1 class="h6">hello world</h1>

<hr>

<h1 class="display-1">hola bootstrap</h1>

<h1 class="display-2">hola bootstrap</h1>

<h1 class="display-3">hola bootstrap</h1>

<h1 class="display-4">hola bootstrap</h1>

<hr>

<h1>hola bootstrap <span class="text-muted">en html</span></h1>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p class="font-weight-bold">negrita</p>

<p class="font-italic">negrita</p>

<p class="font-weight-normal">negrita</p>

<p class="text-uppercase">hello wordl</p>

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

sed do eiusmod tempor</p></blockquote>

</blockquote class="blockquote"><p>Lorem ipsum dolor sit amet, consectetur

adipisicing elit, sed do eiusmod tempor</p>

<footer class="blockquote">alguien famoso <cite title="origen de la cita">origen de la

cita</cite></cite</footer>

</blockquote>

<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<hr>

<p class="text-left">hello world</p>

<p class="text-center">hello world</p>

<p class="text-right">hello world</p>

<hr>

<p class="text-sm-right">hello world</p>

<p class="text-md-right">hello world</p>

<p class="text-lg-right">hello world</p>

<p class="text-xl-right">hello world</p>

<br><br>

<p class="text-sm-center">hello world</p>

<p class="text-md-center">hello world</p>

<p class="text-lg-center">hello world</p>

<p class="text-xl-center">hello world</p>

<br><br>

<spam class="align-baseline">hello</spam>

<spam class="align-top">hello</spam>

<spam class="align-bottom">hello</spam>

<spam class="align-middle">hello</spam>

<spam class="align-text-top">hola</spam>

<spam class="align-text-bottom">que tal</spam>

<br><br>

<h1 class="bg-success d-inline">hello</h1>

<h1 class="bg-success d-inline">world</h1>

<br><br>

<spam class="bg-danger">hola</spam>

<spam class="d-block bg-success">mundo</spam>

<br><br>

<div class="bg-success d-inline-block">

<h1>hello world</h1>

<spam>hola</spam>

</div>
 <div class="bg-danger d-inline-block">

<h1>hello world</h1>

<spam>hola</spam>

</div>

<div class="float-left">

hola

</div>

<div class="float-left">

mundo

</div>

<div class="float-right">

entero

</div>

<br><br>

<div class="float-md-right">hello world</div>

<div class="float-lg-right">hola mundo</div>

<br><br>

<div class="float-md-left">hello world</div>

 <div class="float-lg-left">hola mundo</div>

<br><br>

<div class="bg-danger clearfix">

<button class="float-left">left</button>

<button class="float-right">right</button>

</div>

<!--fixed-top-->

<h1 class="sticky-top bg-danger">quedate quieto</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<footer class="fixed-bottom bg-secondary">final pie</footer>

<h1 class="bg-primary text-white mt-4">facebook</h1>

<h1 class="bg-primary text-white mt-3">facebook</h1>

<h1 class="bg-primary text-white mt-2">facebook</h1>

<h1 class="bg-primary text-white mt-1">facebook</h1>

<br><br>
 <h1 class="bg-primary text-white mb-5">facebook</h1>

<h1 class="bg-primary text-white mb-4">facebook</h1>

<h1 class="bg-primary text-white mb-3">facebook</h1>

<h1 class="bg-primary text-white mb-2">facebook</h1>

<hr>

<p>hello<span class="ml-5">world</span>hello</p>

<p>hello<span class="mr-5">world</span>hello</p>

<p>hello<span class="mx-5">world</span>hello</p>

<hr>

<p>hola mundo</p>

<p class="my-5">hola mundo</p>

<p>hola mundo</p>

<!--paddding arriba-->

<hr>

<h1 class="bg-danger pt-5">hola mundo</h1>

<h1 class="bg-danger pt-4">hola mundo</h1>

<h1 class="bg-danger pt-3">hola mundo</h1>

<h1 class="bg-danger pt-2">hola mundo</h1>

<!--paddding abajo-->

<hr>

<h1 class="bg-success pb-5">hola mundo</h1>

<h1 class="bg-success pb-4">hola mundo</h1>

<h1 class="bg-success pb-3">hola mundo</h1>

<h1 class="bg-success pb-2">hola mundo</h1>

<p>hello <span class="px-5">world</span>hello</p>

<!--ataque a todos lados com padding-->

 <p class="bg-primary p-5">hola mundo</p>

<!--ataque a todos lados com marging-->

<p class="bg-warning m-5">hola mundo</p>

<div class="bg-warning p-3 w-30 d-inline-block ">

ancho 25

</div>

<div class="bg-primary p-3 w-25 d-inline-block ">

ancho 25

</div>

<div class="bg-danger p-3 w-25 d-inline-block">

ancho 25

</div>

<div class="bg-success p-3 w-25 d-inline-block ">

ancho 25

</div>

<hr>

<div class="bg-success" style="border:2px solid black; height:300px ">

<div class="bg-warning d-inline-block h-25">

elemento1

</div>

<div class="bg-primary d-inline-block h-50">

elemento2
</div>

<div class="bg-danger d-inline-block h-100">

elemento3

</div>

</div>
<button class="btn btn-primary">prueba</button>
<button class="btn btn-secondary">prueba</button>
<button class="btn btn-info">prueba</button>
<button class="btn btn-success">prueba</button>
<button class="btn btn-warning">prueba</button>
<button class="btn btn-danger">prueba</button>
<button class="btn btn-light">prueba</button>
<button class="btn btn-dark">prueba</button>
<button class="btn btn-link">prueba</button>

<hr>
<a class="btn btn-danger" href="#">ENLACE</a>
<button type="submit" class="btn btn-success">ENVIAR</button>
<input type="button" class="btn btn-warning" VALUE="ACEPTAR">
<input type="submit" class="btn btn-warning" VALUE="SEND">
<input type="RESET" class="btn btn-warning" VALUE="REFRESH">
<button class="btn btn-outline-success">BOTON</button>
<hr>
<button class="btn btn-outline-primary">prueba</button>
<button class="btn btn-outline-secondary">prueba</button>
<button class="btn btn-outline-info">prueba</button>
<button class="btn btn-outline-warning">prueba</button>
<button class="btn btn-outline-danger">prueba</button>
<button class="btn btn-outline-light">prueba</button>
<button class="btn btn-outline-dark">prueba</button>

<hr>
<button class="btn btn-danger">prueba</button>
<button class="btn btn-danger btn-lg">prueba</button>
<button class="btn btn-danger btn-sm">prueba</button>
<br><br>
<button class="btn btn-danger btn-block">prueba</button>
<hr>

<button class="btn btn-danger lg">

<i class="fa fa-user"></i> MI USER
</button>

<button class="btn btn-danger lg">

<i class="fa fa-telegram" aria-hidden="true"></i> MI TELEGRAM
</button>
<BR><BR>
<button class="btn btn-warning" data-toggle="button">toggle</button>

<hr>
 <div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-
toggle="dropdown">ELEGIR</button>
<div class="dropdown-menu">
<a href="#"class="dropdown-item">UNO</a>
<a href="#"class="dropdown-item">DOS</a>
<a href="#"class="dropdown-item">TRES</a>
</div>
</div>

<hr>

<div class="btn-group">
<button class="btn btn-success">MI BOTON</button>
<button class="btn btn-success dropdown-toggle dropdown-toggle-
split" DATA-TOGGLE="dropdown">DATA-TOGGLE</button>
<div class="dropdown-menu">
<a href="#"class="dropdown-item">UNO</a>
<a href="#"class="dropdown-item">DOS</a>
<a href="#"class="dropdown-item">TRES</a>
</div>
</div>

<hr>

<div class="btn-toolbar" role="toolbar">

<div class="btn-group mr-5 ">

<button class="btn btn-danger dropdown-toggle dropdown-toggle-

split" DATA-TOGGLE="dropdown">IZQUIERDA</button>
<div class="dropdown-menu">
<a href="#"class="dropdown-item">UNO</a>
<a href="#"class="dropdown-item">DOS</a>
<a href="#"class="dropdown-item">TRES</a>
</div>

<button class="btn btn-danger dropdown-toggle dropdown-toggle-

split" DATA-TOGGLE="dropdown">CENTRO</button>
<div class=" dropdown-menu">
<a href="#"class="dropdown-item">UNO</a>
<a href="#"class="dropdown-item">DOS</a>
<a href="#"class="dropdown-item">TRES</a>
</div>
 <button class="btn btn-danger dropdown-toggle dropdown-toggle-
split" DATA-TOGGLE="dropdown">DERECHA</button>
<div class="dropdown-menu">
<a href="#"class="dropdown-item">UNO</a>
<a href="#"class="dropdown-item">DOS</a>
<a href="#"class="dropdown-item">TRES</a>
</div>

</div>

<div class="btn-group mr-5">

<button class="btn btn-warning">1</button>
<button class="btn btn-warning">2</button>
<button class="btn btn-warning">3</button>
</div>
<button class="btn btn-danger">4</button>
</div>

<hr>
<div class="btn-group-vertical">
<button class="btn btn-danger">prueba</button>
<button class="btn btn-danger">prueba</button>
<button class="btn btn-danger">prueba</button>
</div>