El .col
es para 576px hacia ABAJO y el
col-md-8
es de tablet hacia ARRIBA
col-md-8: 8/12 de tablet HACIA ARRIBA, phone: 12/12
col-6 col-md-4: 4/12 de tablet HACIA ARRIBA, phone: 1/2
col-lg-8: 8/12 de DESKTOP HACIA ARRIBA, PHONE & TABLET: 12/12
col-6 col-lg-4: 4/12 de DESKTOP HACIA ARRIBA, PHONE & TABLET: 1/2
col-md-12: que en todos los tamaños utilice las 12 columnas
col-sm-4: que en todos los tamaños utilice las 4 columnas pero en extra pequeño sea de 12
Margin-top: mt-1 mt-2 mt-3 mt-4 mt-5
Margin-bottom: mb-1 mb-2 mb-3 mb-4 mb-5
Margin-top: mt-1 mt-2 mt-3 mt-4 mt-5
Margin-top: mt-1 mt-2 mt-3 mt-4 mt-5
Padding-top: pt-1 pt-2 pt-3 pt-4 pt-5
Padding-bottom: pb-1 pb-2 pb-3 pb-4 pb-5
Padding-top: pt-1 pt-2 pt-3 pt-4 pt-5
Padding-top: pt-1 pt-2 pt-3 pt-4 pt-5
mx-auto
y text-center
<section>
<var>
(una etiqueta var
por cada letra): y = mx + b<s>
:<u>
:This line of text will render as underlined<small>
This line of text is meant to be treated as fine print. class="text-muted"
class="text-primary"
class="text-success"
class="text-info"
class="text-warning"
class="text-danger"
class="text-secondary"
class="text-dark"
<cite>
sirve para citar<blockquote-footer>
col
, equal-width columns on small, medium, large, and extra large devices
col
, equal-width columns on small, medium, large, and extra large devices
col
, equal-width columns on small, medium, large, and extra large devices
col
, equal-width columns on small, medium, large, and extra large devices
col
, equal-width columns on small, medium, large, and extra large devices
col
, equal-width columns on small, medium, large, and extra large devices
col
, equal-width columns on small, medium, large, and extra large devices
col
, equal-width columns on small, medium, large, and extra large devices
col
col
col
col
col
w-100
col-6
col-5
col-md-auto
col-lg-2
col-md-auto
col-lg-2
col-sm-8
RESPONSIVE: toma las 12 columnascol-sm-4
RESPONSIVE: toma las 12 columnascol-sm
RESPONSIVE: toma las 12 columnascol-sm
RESPONSIVE: toma las 12 columnascol-sm
RESPONSIVE: toma las 12 columnas.col-md-8
PHONE:completa TABLET: 8/12 DESKTOP: 8/12.col-6 .col-md-4
PHONE:1/2 TABLET: 4/12 DESKTOP: 4/12.col-6 .col-md-4
DESKTOP:4/12 TABLET:1/2.col-6 .col-md-4
DESKTOP:4/12 TABLET:2/2.col-6 .col-md-4
DESKTOP:4/12 TABLET:3/2 pasa abajo porque no cabe.col-6
.col-6
py-3 px-lg-5
py-3 px-lg-5
Le indica a la fila
Centrando texto de manera cool
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
NOTA: Las etiquetas <a> <button>
e <input>
pueden tener las clases btn
para que tengan estilos de botones
border-primary
div
<div class="card">
<div class="card-header" id="headingBorders"> </div>
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#bordes" aria-expanded="false">
Borders
<button>
</h2>
</div>
<div id="bordes" class="collapse" aria-labelledby="headingBorders" data-parent="#accordionExample1">
<div class="card-body">
<h2 style="background-color: blue; border: dashed 1px red;">Dashed</2>
</div>
</div>
</div>
Using d-flex class
Using d-inline-flex class
<div class="d-inline-flex p-3 bg-secondary text-white">
.flex-row
y .flex-row-reverse
<div class="d-flex flex-row bg-secondary">
<div class="d-flex flex-row-reverse bg-secondary mt-1">
.flex-column
y .flex-column-reverse
<div class="d-flex flex-column">
<div class="d-flex flex-column-reverse">
Use the .justify-content-* classes to change the alignment of flex items. Choose from start (default), end, center, between or around:
d-flex justify-content-start
d-flex justify-content-end
d-flex justify-content-center
d-flex justify-content-between
d-flex justify-content-around
.d-flex
.d-inline-flex
- .d-flex
- .d-inline-flex
- .d-sm-flex
- .d-sm-inline-flex
- .d-md-flex
- .d-md-inline-flex
- .d-lg-flex
- .d-lg-inline-flex
- .d-xl-flex
- .d-xl-inline-flex
.flex-row
1.flex-row
2.flex-row
3.flex-row-reverse
1.flex-row-reverse
2.flex-row-reverse
3flex-column
1flex-column
2flex-column
3flex-column-reverse
1flex-column-reverse
2flex-column-reverse
3justify-content-start
<div class="d-flex justify-content-start bg-secondary mb-3">
<div class="p-2 bg-warning"> Flex item 1 </div>
<div class="p-2 bg-info"> Flex item 2 </div>
<div class="p-2 bg-primary"> Flex item 3 </div>
</div>
justify-content-end
<div class="d-flex justify-content-end bg-secondary mb-3">
<div class="p-2 bg-warning"> Flex item 1 </div>
<div class="p-2 bg-info"> Flex item 2 </div>
<div class="p-2 bg-primary"> Flex item 3 </div>
</div>
justify-content-center
<div class="d-flex justify-content-center bg-secondary mb-3">
<div class="p-2 bg-warning"> Flex item 1 </div>
<div class="p-2 bg-info"> Flex item 2 </div>
<div class="p-2 bg-primary"> Flex item 3 </div>
</div>
justify-content-between
<div class="d-flex justify-content-between bg-secondary mb-3">
<div class="p-2 bg-warning"> Flex item 1 </div>
<div class="p-2 bg-info"> Flex item 2 </div>
<div class="p-2 bg-primary"> Flex item 3 </div>
</div>
justify-content-around
<div class="d-flex justify-content-around bg-secondary mb-3">
<div class="p-2 bg-warning"> Flex item 1 </div>
<div class="p-2 bg-info"> Flex item 2 </div>
<div class="p-2 bg-primary"> Flex item 3 </div>
</div>
Use .flex-fill on flex items to force them into equal widths(o anchos iguales si su contenido no supera sus cuadros de borde)
Control the vertical alignment of single rows of flex items with the .align-content-* classes.
.align-items-start:
<div class="d-flex align-items-start bg-light">
<div class="p-2 border"> Flex item 1 </div>
<div class="p-2 border"> Flex item 2 </div>
<div class="p-2 border"> Flex item 3 </div>
</div>
.align-items-end:
<div class="d-flex align-items-end bg-light">
<div class="p-2 border"> Flex item 1 </div>
<div class="p-2 border"> Flex item 2 </div>
<div class="p-2 border"> Flex item 3 </div>
</div>
.align-items-center:
<div class="d-flex align-items-center bg-light">
<div class="p-2 border"> Flex item 1 </div>
<div class="p-2 border"> Flex item 2 </div>
<div class="p-2 border"> Flex item 3 </div>
</div>
.align-items-baseline:
<div class="d-flex align-items-baseline bg-light">
<div class="p-2 border"> Flex item 1 </div>
<div class="p-2 border"> Flex item 2 </div>
<div class="p-2 border"> Flex item 3 </div>
</div>
.align-items-stretch (default):
<div class="d-flex align-items-stretch bg-light">
<div class="p-2 border"> Flex item 1 </div>
<div class="p-2 border"> Flex item 2 </div>
<div class="p-2 border"> Flex item 3 </div>
</div>
.align-self-start:
<div class="d-flex bg-light">
<div class="p-2 border"> Flex item 1 </div>
<div class="p-2 border align-self-start"> Flex item 2 </div>
<div class="p-2 border"> Flex item 3 </div>
</div>
.align-self-end:
<div class="d-flex bg-light">
<div class="p-2 border"> Flex item 1 </div>
<div class="p-2 border align-self-end"> Flex item 2 </div>
<div class="p-2 border"> Flex item 3 </div>
</div>
.align-self-center:
<div class="d-flex bg-light">
<div class="p-2 border"> Flex item 1 </div>
<div class="p-2 border align-self-center"> Flex item 2 </div>
<div class="p-2 border"> Flex item 3 </div>
</div>
.align-self-baseline:
<div class="d-flex bg-light">
<div class="p-2 border"> Flex item 1 </div>
<div class="p-2 border align-self-baseline"> Flex item 2 </div>
<div class="p-2 border"> Flex item 3 </div>
</div>
.align-self-stretch (default):
<div class="d-flex bg-light">
<div class="p-2 border"> Flex item 1 </div>
<div class="p-2 border align-self-stretch"> Flex item 2 </div>
<div class="p-2 border"> Flex item 3 </div>
</div>
Align-content se usa cuando tienes varias lineas de contenido y siempre se acompaña de un flex-wrap
<div class="d-flex flex-wrap align-content-start bg-light" style="height: 300px; width:80%">
<div class="d-flex flex-wrap align-content-end bg-light" style="height: 300px; width:80%">
<div class="d-flex flex-wrap align-content-center bg-light" style="height: 300px; width:80%">
<div class="d-flex flex-wrap align-content-between bg-light" style="height: 300px; width:80%">
<div class="d-flex flex-wrap align-content-around bg-light" style="height: 300px; width:80%">
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
nav
navbar
ya que con eso le decimos a Bootstrap que queremos poner un menú navbar-expand-lg
que me permitirá transformar mi menú a dispositivo movil en un tamaño largobg-light
que me permite que todos nuestros enlaces texto y demás, tengan un color oscuro para que contraste con el fondo de color claronavbar-light
nos pone un fondo de color claronavbar-brand
, después puedes ponerle un texto o una imagen pero se acostumbra texto navbar-toggler
con el atributo data-toggle="collapse"
, osea que cuando apretemos un componente mostrara/ocultara y en el data-target="#navbar-0"
pondremos
el id de nuestro menúaria-controls="#navbar" aria-expanded="false" aria-label="menú de navegación"
para que funcionen bien en
span
con la clase navbar-toggler-icon
para que en dispositivos moviles tengas tu ícono de hamburguesa div
con la clases collapse navbar-collapse
y un id que habías puesto en el data-target del botonnavbar-nav mr-auto
, mr-auto sirve para poner un margin right en automatico, osea te pone las etiquetas li a la derechanav-item
y dentro de la etiqueta li pones una etiqueta a con la clase nav-link
dropdown
en la etiqueta li, en la etiqueta a poner la clase dropdown-toggle
ponerle un id unico y los atributos role="button" aria-haspopup="true" data-toggle="dropdown" aria-expanded="false",
al hacer todo esto solo tendrás el triangulito que te dice que hay un submenudropdown-menu
, ponerle su atributo aria-labelledby="blog-0" y en ese div ponerle el mismo id que
a la etiqueta acon las etiquetas a que quieras, cada etqueta a con la clase dropdpwn-item
form-inline
te alinea el input y el boton en el formulario junto con las clases my-2 my-lg-0
que se usan para un pequeño espaciado la clase mr-auto
que
pusimos en la lista empujara a la derecha hasta el fondo todo.fixed-top
en la etiqueta nav donde empezaste a crear tu menúbg-light navbar-light
puedes poner bg-dark navbar-dark
navbar-brand
puedes poner tu imagen logo y abajo de la imagen un texto Sin etiquetaNote: I think that the SCROLLSPY should be used at the beginning of the project
NUNCA lo vas a usar porque, solo se usa cuando estás trabajando con FLOAT y eso está mal, para eso existe FlexBox
text-primary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, reprehenderit, consequuntur omnis animi eligendi nam, consectetur explicabo debitis minus ea recusandae sunt corrupti consequatur placeat architecto doloremque. Fugiat, neque modi!
text-secondary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, reprehenderit, consequuntur omnis animi eligendi nam, consectetur explicabo debitis minus ea recusandae sunt corrupti consequatur placeat architecto doloremque. Fugiat, neque modi!
text-sucess: Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, reprehenderit, consequuntur omnis animi eligendi nam, consectetur explicabo debitis minus ea recusandae sunt corrupti consequatur placeat architecto doloremque. Fugiat, neque modi!
text-dangery: Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, reprehenderit, consequuntur omnis animi eligendi nam, consectetur explicabo debitis minus ea recusandae sunt corrupti consequatur placeat architecto doloremque. Fugiat, neque modi!
text-warning: Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, reprehenderit, consequuntur omnis animi eligendi nam, consectetur explicabo debitis minus ea recusandae sunt corrupti consequatur placeat architecto doloremue. Fugiat, neque modi!
text-info: Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, reprehenderit, consequuntur omnis animi eligendi nam, consectetur explicabo debitis minus ea recusandae sunt corrupti consequatur placeat architecto doloremque. Fugiat, neque modi!
text-dark: Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, reprehenderit, consequuntur omnis animi eligendi nam, consectetur explicabo debitis minus ea recusandae sunt corrupti consequatur placeat architecto doloremque. Fugiat, neque modi!
text-light: Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, reprehenderit, consequuntur omnis animi eligendi nam, consectetur explicabo debitis minus ea recusandae sunt corrupti consequatur placeat architecto doloremque. Fugiat, neque modi!
bg-primary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, reprehenderit, consequuntur omnis animi eligendi nam, consectetur explicabo debitis minus ea recusandae sunt corrupti consequatur placeat architecto doloremque. Fugiat, neque modi!
bg-secondary Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, reprehenderit, consequuntur omnis animi eligendi nam, consectetur explicabo debitis minus ea recusandae sunt corrupti consequatur placeat architecto doloremque. Fugiat, neque modi!
bg-sucess Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, reprehenderit, consequuntur omnis animi eligendi nam, consectetur explicabo debitis minus ea recusandae sunt corrupti consequatur placeat architecto doloremque. Fugiat, neque modi!
bg-dangery: Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, reprehenderit, consequuntur omnis animi eligendi nam, consectetur explicabo debitis minus ea recusandae sunt corrupti consequatur placeat architecto doloremque. Fugiat, neque modi!
bg-warning: Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, reprehenderit, consequuntur omnis animi eligendi nam, consectetur explicabo debitis minus ea recusandae sunt corrupti consequatur placeat architecto doloremue. Fugiat, neque modi!
bg-info: Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, reprehenderit, consequuntur omnis animi eligendi nam, consectetur explicabo debitis minus ea recusandae sunt corrupti consequatur placeat architecto doloremque. Fugiat, neque modi!
bg-dark: Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, reprehenderit, consequuntur omnis animi eligendi nam, consectetur explicabo debitis minus ea recusandae sunt corrupti consequatur placeat architecto doloremque. Fugiat, neque modi!
bg-light: Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, reprehenderit, consequuntur omnis animi eligendi nam, consectetur explicabo debitis minus ea recusandae sunt corrupti consequatur placeat architecto doloremque. Fugiat, neque modi!