¿Qué pasa cuando hay 2 clases col de BOOTSTRAP?

tamaños-imagenes-bootstrap

El .col es para 576px hacia ABAJO y el col-md-8 es de tablet hacia ARRIBA

Ejemplo 1

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

Ejemplo 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

Ejemplo 3

col-md-12: que en todos los tamaños utilice las 12 columnas

Ejemplo 4

col-sm-4: que en todos los tamaños utilice las 4 columnas pero en extra pequeño sea de 12

Margins

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

Paddings

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

Centrar elemento

mx-auto y text-center
  • Etiquetas html: <section>
  • Formulas con etiqueta <var>(una etiqueta var por cada letra): y = mx + b
  • Tachado <s>:This line of text is meant to be treated as no longer accurate.
  • Subrayado <u>:This line of text will render as underlined
  • Letra pequeña <small>This line of text is meant to be treated as fine print.
  • This text is muted class="text-muted"
  • This text is important. class="text-primary"
  • This text indicates success. class="text-success"
  • This text represents some information. class="text-info"
  • This text represents a warning. class="text-warning"
  • This text represents danger. class="text-danger"
  • Secondary text. class="text-secondary"
  • This text is dark grey. class="text-dark"
  • También hay text-white
  • La etiqueta <cite> sirve para citar
  • blockquote-footer: <blockquote-footer>
    Pone este estilo cool
container

.row

1/4 col , equal-width columns on small, medium, large, and extra large devices
2/4 col , equal-width columns on small, medium, large, and extra large devices
3/4 col , equal-width columns on small, medium, large, and extra large devices
4/4 col , equal-width columns on small, medium, large, and extra large devices


container-fluid

.row

1/4 col , equal-width columns on small, medium, large, and extra large devices
2/4 col , equal-width columns on small, medium, large, and extra large devices
3/4 col , equal-width columns on small, medium, large, and extra large devices
4/4 col , equal-width columns on small, medium, large, and extra large devices


container

row 1

1 of 2 col
2 of 2 col

row 2

1 of 3 col
2 of 3 col
3 of 3 col


container-fluid
row
col 1/2
col 2/2
Ocupa el 100% del ancho w-100
col 1/2
col 2/2


container-fluid
row 1
1 of 3 col
2 of 3 col-6
3 of 3 col
row 2
1 of 3 col
2 of 3 col-5
3 of 3 col


container-fluid
row justify-content-md-center
1 of 3
El ancho se adapta al tamaño del contenido col-md-auto
3 of 3 col-lg-2
row
1 of 3
El ancho se adapta al tamaño del contenido col-md-auto
3 of 3 col-lg-2


container-fluid

row 1

col-sm-8 RESPONSIVE: toma las 12 columnas
col-sm-4 RESPONSIVE: toma las 12 columnas

row 2

col-sm RESPONSIVE: toma las 12 columnas
col-sm RESPONSIVE: toma las 12 columnas
col-sm RESPONSIVE: toma las 12 columnas


col-md-8

col-6 col-md-4

row 1
.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
row 2
.col-6 .col-md-4DESKTOP:4/12 TABLET:1/2
.col-6 .col-md-4DESKTOP:4/12 TABLET:2/2
.col-6 .col-md-4DESKTOP:4/12 TABLET:3/2 pasa abajo porque no cabe
row 3
.col-6
.col-6


Relleno personalizado

Custom column padding (Relleno de columna personalizado) py-3 px-lg-5
Custom column padding (Relleno de columna personalizado) py-3 px-lg-5


row-cols-2

Le indica a la fila

Column
Column
Column
Column

Offset columns

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3

Responsive Offset columns

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0


Centrando texto de manera cool

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in La etiqueta <cite> sirve para citar

Botones


NOTA: Las etiquetas <a> <button> e <input> pueden tener las clases btn para que tengan estilos de botones

Botones outline


Botones largos


btn btn-primary btn-lg btn btn-info btn-lg

Botones cortos


btn btn-primary btn-sm btn btn-info btn-sm

Botones block


btn btn-block btn-lg btn btn-block btn-lg

Botones disabled


btn btn-primary btn-lg btn btn-info btn-sm

Cards

Card image

John Doe

Some example text.

See Profile
Card image

John Doe

Some example text.

See Profile

Card con color de fondo

John Doe

Some example text.

See Profile

También hay bordes border-primary

John Doe

Some example text.

See Profile

formularios

Acepto terminos y condiciones
Radios
Checkbox

Formulario con grid y Flexbox hecha por mi

Formulario con grid y Flexbox hecho con ayuda

Collapse

  1. El primer id debe ir igual que aria-labelledby
  2. El segundo id debe ir igual que data-target
  3. data-parent debe coincidir con el id del primer div
  4. aria-expanded="true" es para que esa pestaña este abierta por default
  5. aria-controls no sirve, lo puedes borrar
<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>

Bootstrap Flex

Using d-flex class

Flex item 1
Flex item 2
Flex item 3

Using d-inline-flex class

<div class="d-inline-flex p-3 bg-secondary text-white">
Flex item 1
Flex item 2
Flex item 3

Horizantal direction using .flex-row y .flex-row-reverse

<div class="d-flex flex-row bg-secondary">
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-row-reverse bg-secondary mt-1">
Flex item 1
Flex item 2
Flex item 3

Vertical Direction .flex-column y .flex-column-reverse

<div class="d-flex flex-column">
Flex item 1
Flex item 2
Flex item 3

<div class="d-flex flex-column-reverse">
Flex item 1
Flex item 2
Flex item 3

Justify content

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
Flex item 1
Flex item 2
Flex item 3
d-flex justify-content-end
Flex item 1
Flex item 2
Flex item 3
d-flex justify-content-center
Flex item 1
Flex item 2
Flex item 3
d-flex justify-content-between
Flex item 1
Flex item 2
Flex item 3
d-flex justify-content-around
Flex item 1
Flex item 2
Flex item 3
I'm a .d-flex

I'm a .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 y flex-row-reverse

.flex-row 1
.flex-row 2
.flex-row 3
.flex-row-reverse 1
.flex-row-reverse 2
.flex-row-reverse 3

flex-column y flex-column-reverse

flex-column 1
flex-column 2
flex-column 3
flex-column-reverse 1
flex-column-reverse 2
flex-column-reverse 3

Justify content

justify-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>
Flex item 1
Flex item 2
Flex item 3

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>
Flex item 1
Flex item 2
Flex item 3

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>
Flex item 1
Flex item 2
Flex item 3

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>
Flex item 1
Flex item 2
Flex item 3

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>
Flex item 1
Flex item 2
Flex item 3

.flex-fill

Use .flex-fill on flex items to force them into equal widths(o anchos iguales si su contenido no supera sus cuadros de borde)

Flex item 1 with a lot of content
Flex item 2
Flex item 3

Align Items

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>
Flex item 1
Flex item 2
Flex item 3

.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>
Flex item 1
Flex item 2
Flex item 3

.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>
Flex item 1
Flex item 2
Flex item 3

.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>
Flex item 1
Flex item 2
Flex item 3

.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>
Flex item 1
Flex item 2
Flex item 3

Align Self

.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>
Flex item 1
Flex item 2
Flex item 3

.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>
Flex item 1
Flex item 2
Flex item 3

.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>
Flex item 1
Flex item 2
Flex item 3

.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>
Flex item 1
Flex item 2
Flex item 3

.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>
Flex item 1
Flex item 2
Flex item 3

justify-content-around con align-items IMPORTANTISIMO ALV

Flex item 1
Flex item 2
Flex item 3

Align-content se usa cuando tienes varias lineas de contenido y siempre se acompaña de un flex-wrap

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
<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%">
Soy tamaño extra small, puedes hacer más grande el navegador para ver como cambio
Soy tamaño Small, puedes hacer más grande el navegador para ver como cambio
Soy tamaño mediano
Soy tamaño Grande
Soy tamaño extra grande, puedes reducir el navegador para ver como cambio

Instrucciones de uso

  1. Copiar y pegar el código de Bootstrap
  2. Fijarte que siempre estén iguales el data-target del boton y el primer id
  3. Fijarte que el aria-labelledby del cuerpo del Modal sea igual al id del H5 o de la etiqueta donde quieras que se desplegue todo
  4. Si quiero usar un ToolTip, no olvidar que debo de poner el código JQuery que viene en la página de Bootstrap
  5. Si quiero usar un PopOver, no olvidar que debo de poner el código JQuery que viene en la página de Bootstrap
  6. Tanto el PopOver y ToolTip deben de llevar su respectivo data-toggle="tooltip" y data-toggle="tooltip" junto con su data-content="" y title="Página de Boostrap, dame Click"

Notas importantes

  1. data-toggle: modal: con este atributo indicamos que queremos trabajar con una ventana modal
  2. data-target: #modal-uno: hace referencia al id que queremos trabajar
  3. table-index:-1Es un atributo que nos pide Bootstrap
  4. arial-labelledby debe ser igual al data-target pero sin el simbolo #, normlamente se encuentra en
  5. aria-hidden:true con esto la pantalla se pon un poco oscura
  6. data-dismiss: modal este atributo va en la etiqueta button y se utiliza para decirle a bootstrap que queremos cerrar el modal, dentro del boton debe haber una etiqueta label con el atributo arial-hiddne="true"

Formularios modales

Menú de navegación alineado a la izquierda

Menú centrado

Menú centrado a la derecha

Menú interactivo sencillo

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Menú con Pills

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

Explicación

  1. Para utilizar un menú debemos utilizar la etiqueta nav
  2. Poner la clase navbar ya que con eso le decimos a Bootstrap que queremos poner un menú
  3. Poner la clase navbar-expand-lg que me permitirá transformar mi menú a dispositivo movil en un tamaño largo
  4. Poner la clase bg-light que me permite que todos nuestros enlaces texto y demás, tengan un color oscuro para que contraste con el fondo de color claro
  5. Poner la clase navbar-light nos pone un fondo de color claro
  6. Poner la etiqueta a con la clase navbar-brand, después puedes ponerle un texto o una imagen pero se acostumbra texto
  7. Poner un boton con la clase 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ú
  8. Al botón le puedes poner los atributos aria-controls="#navbar" aria-expanded="false" aria-label="menú de navegación" para que funcionen bien en

    Kindles

  9. Dentro del boton poner una etiqueta span con la clase navbar-toggler-icon para que en dispositivos moviles tengas tu ícono de hamburguesa
  10. Para que funcione el menú, fuera del boton abres una etiqueta div con la clases collapse navbar-collapse y un id que habías puesto en el data-target del boton
  11. Dentro poner una lista desordenada con las clases navbar-nav mr-auto, mr-auto sirve para poner un margin right en automatico, osea te pone las etiquetas li a la derecha
  12. A los elementos li le pones la clase nav-item y dentro de la etiqueta li pones una etiqueta a con la clase nav-link
  13. Para hacer un submenu debes poner la clase 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 submenu
  14. Dentro de la etiqueta li donde quieres tu submenu debes abrir un div con la clase dropdown-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
  15. TIP IMPORTANTE: Si no sabes que hace una clase de Bootstrap, ve probando una en una en diferentes tamaños
  16. La clase 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.
  17. Menú siempre FIJO: debes de poner la clase fixed-top en la etiqueta nav donde empezaste a crear tu menú
  18. Colores: al princio del nav donde pusiste bg-light navbar-light puedes poner bg-dark navbar-dark
  19. TIP: Cuando uses la clase navbar-brand puedes poner tu imagen logo y abajo de la imagen un texto Sin etiqueta

Sticky Navigation Bar

Example

  • HTML5
  • CSS3
  • JS
  • TypeScript
25%
50%
75%
100% Angular

Ejemplo 1

Ejemplo 2

Note: I think that the SCROLLSPY should be used at the beginning of the project

Clearfix

NUNCA lo vas a usar porque, solo se usa cuando estás trabajando con FLOAT y eso está mal, para eso existe FlexBox

Colores

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!

width and height

w-25 25%
w-50 50%
w-75 75%
w-100 100%
h-25
25%
h-50
50%
h-75
75%
h-100
100%