No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

4D
3H
10M
23S

La grilla de Bootstrap

5/21
Recursos

Aportes 114

Preguntas 14

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

WOOOWWW cuanto tiempo ahorrado!!!
Yo sugiero que las personas que no conocen como hacer un sistema de grillas, no pasen directamente a usar Bootstrap, es importante que entiendan que es realmente lo que Bootstrap hace y que deje de parecer magia XD. Esto con la intenci贸n de que cuando exista algo que el framework no pueda solucionar o no sea exactamente lo que necesitan, podamos superar el reto.

Este consejo realmente aplica para todas estas tecnolog铆as que facilitan el uso de las herramientas base, hablando en desarrollo web: html, css y javascript.

Saludos!!

Apuntes:
Bootstrap maneja un sistema de 12 grillas (o cuadriculas) que pueden gestionarse con las clases 鈥.row鈥 (para filas) o 鈥.col鈥 (para columnas).
En cada fila, puede haber un m谩ximo de 12 columnas (en caso de que hayan mas de 12, la columna subsiguiente se ubicara en la siguiente fila).
- Container Nos crea un contenedor con un ancho fijo (ancho m谩ximo) en cada uno de los tama帽os de dispositivo.

- Container-fluidNos crea un contenedor (igual que el anterior) pero sin un ancho fijo aparente, por lo que ocupar铆a todo el ancho de la pantalla.
Breakpoints: Son puntos de ruptura en el dise帽o web responsive en los que la pantalla cambia de layout.

Grisha! Jajaja

Extensi贸n para VS Code recomendada:

Sasha es un crack, uno de los mejores profesores.
Incredible.

Deber铆an actualizar este curso ya, actualmente estamos en bootstrap 5 y si lees la documentaci贸n hay demasiadas cosas nuevas que este curso no toca

FALTA ACTUALIZAR

(


Cuando sabes CSS-grid te sientes genial haciendo esas grillas tu mismo, pero hay que aceptar que esto ayuda y facilita demasiado el trabajo.

Muy 煤til y de una vez responsive design

pense que no era necesario aprender boostrap hoy en dia pero este curso me esta pareciendo muy interesante

Increible todo lo que se puede ahorrar con este framework

<div class="container" style="background: red;">
		<div class="row">
			<div class="col" style="border: 1px solid">
				1
			</div>
			<div class="col" style="border: 1px solid">
				2
			</div>
			<div class="col" style="border: 1px solid">
				3
			</div>
		</div>
	</div>
	<div class="container" style="background: blue;">
		<div class="row">
			<div class="col" style="border: 1px solid">
				1
			</div>
			<div class="col" style="border: 1px solid">
				2
			</div>
		</div>
	</div>
	<div class="container" style="background: #0059FF;">
		<div class="row">
			<div class="col-3" style="border: 1px solid">
				1
			</div>
			<div class="col-9" style="border: 1px solid">
				2
			</div>
		</div>
	</div>```

He escrito unas lineas para poder monitorizar en todo momento cual es el tramo de tama帽o de pantalla actual.
Es una especie de navbar fijo.
A medida que redimensionamos la pantalla del navegador, cuando se produce un break point , se actualiza el mensaje en el navbar, indicando el tramo de pixels.

<body>
    <div id="windowSizeTest" class="text-center p-0 m-0 " style="font-weight: bold; border: 1px solid black; color: white; position: fixed;top: 0; z-index: 100;width:100%; height:35px">
      
      <span id="xs" class="d-block d-sm-none"  style="background-color: rgb(34, 124, 197); width:100%; height:35px">1)XS: Extra Small (0 a 575 px)</span>
      <span id="sm" class="d-none  d-sm-block d-md-none"  style="background-color: rgb(28, 61, 134); width:100%; height:35px">2)SM: Small (575 a 768 px)</span>
      <span id="md" class="d-none  d-md-block d-lg-none"  style="background-color: rgb(64, 7, 138); width:100%; height:35px">3)MD: Medium (768 a 992)</span>
      <span id="lg" class="d-none  d-lg-block d-xl-none"  style="background-color: rgb(161, 18, 161);width:100%; height:35px">4)LG: Large (992 a 1200 px)</span>
      <span id="xl" class="d-none  d-xl-block" style="background-color: rgb(145, 16, 16);width:100%; height:35px">5)XL: Extra Large (1200 a 鈭  px)</span>
    
    </div>

He colocado el c贸digo al principio del body, depu茅s en la siguente etiqueta he aplicado un margin-top 35 para evitar que el navbar se superponga:

  <header style="margin-top: 35px;">

Queda una cosa as铆:
![](

Espero que resulte 煤til 馃檪

Hola. buen curso.
Pero seria bueno que lo actualizaran. me ha si do de gran ayuda en mi trabajo. pero actualicenlo por favor.

En resumen esto es tan potente que uno le dice adios a las medias query para las grillas 馃槂

Me encant贸 esto. Estoy emocionada por aprender Bootstrap 馃憣

Es muy com煤n colocar un background para probar en tiempo de ejecuci贸n, para eso coloco en el class bg-info

La grisha鈥

Maravilloso!

Me gusta mucho como ense帽a Shacha y esos fondos dan la impresi贸n de din谩mismo.
Adem谩s muy mejorada la actualizaci贸n del curso y mejor que lo dividieron en dos.

buen maestro, en platzi he visto varios cursos y muy buenos desarrolladores pero no muchos buenos maestros. Felicidades @sacha

gran ahorro de trabajo que nos ofrece bootstrap

Ufff que 煤til la grilla de Bootstrap!

Opino que los styles deberian editarse en una hoja de .css y no en el mimso html para un mejor orden.

Por fin la grisha!

wow que genial, me fascina bootstrap en especial que ya viene 鈥渞esponsive鈥

Actualmente los breackpoints se pueden modificar con sass de la siguiente manera

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

necesito aprender bootstrap , se ve muy bueno el curso

Algunas reglas a la hora de trabajar con el sistema de grillas de Bootstrap:

Las filas deben estar dentro de un contenedor (.container o .container-fluid)

Usar filas para crear grupos de columnas, no a la inversa. Esto lo hacemos agregando la clase .row (class=鈥渞ow鈥) al contenedor horizontal y la clase -col (class=鈥渃ol鈥) al contenedor columna. Ej <div class=鈥渞ow鈥><div class=鈥渃ol鈥>Contenido</div></div>

El contenido debe estar dentro de las columnas

Los 煤nicos elementos anidados dentro de una fila (row) deben ser columnas(col)

Las columnas se deben crear especificando el n煤mero de columnas disponibles (12)

El ancho de las columnas es autom谩tico y se distribuye el ancho de cada una de forma equitativa o proporcionada. Si queremos colocar el ancho nosotros, tenemos que especificar el ancho teniendo en cuenta el n煤mero de columnas, ejemplo, queremos que la primer columna ocupe un ancho de 3 columnas de 12 (cantidad m谩xima de columnas) y la segunda un ancho de 9
<div class=鈥渃ontainer鈥>

<div class=鈥渞ow鈥>

<div class=鈥渃ol-3鈥> Column </div>

<div class=鈥渃ol-9鈥> Column </div>

</div>

Los contenedores son un elemento muy usado en Bootstrap, estos pueden ser de dos tipos:
.container: Que es el que posee un ancho fijo.
.container-fluid: Posee un ancho fluido o del 100% de la pantalla.

Otra caracter铆stica sobresaliente de Bootstrap son sus grillas, que podemos manejar mediante filas(row) y columnas(col), para modificar el espacio de las columnas debemos de tener en cuenta que el sistema de filas posee un total de 12 columnas; as铆 que si queremos distribuirlas con tama帽os diferentes solo debemos de variar su numeraci贸n, sin sobrepasar el total de 12.

es buena practica poner siempre el col-12 por default, esto sirve para tener una fila cuando se muestre en m贸viles

Excelente, aporte, Sacha. Esto viene justo para el curso de CSS Grid.

El componente mas b谩sico pero mas importante en la construcci贸n de la grilla es el Container.

Un gran ahorro de tiempo

B谩sicamente:
row = grid-template-rows
col = grid-template-columns

Estos son los break points respectivos de la grilla de boostrap

Test para los parametros de Bootstrap

https://codepen.io/intellix/pen/XbjWMo

La grilla de Bootstrap
La grilla de Bootstrap funciona de la siguiente manera, usamos los contenedores, se pueden dividir en

 <div class="container" style="background: red;">
 </div>

Que creara un contenedor pero este no ocupara la totalidad del viewport, en cambio si utilizamos

 <div class="container-fluid" style="background: red;">
 </div>

Es te si ocupara todo el viewport.

Ahora yendo con lo que son las filas
Para crear una fila simplemente usaremos la clase 篓row篓 dentro de un 篓div篓 para que Bootstrap haga su trabajo y cree la fila a medida, luego dentro de ella podemos crear un div para cada columna, hay que tener en cuenta que solo esta permitido usar 12 columnas por lo que al momento de distribuir el espacio entre 3 por ejemplo se le puede decir a cada columna el espacio que va a ocupar de acuerdo con esta escala. Ejemplo:

       <div class="container" style="background: red;">

           <div class="row" >


               <div class="col-3">
                   1
               </div>
               <div class="col-9">
                   2
               </div>
              
           </div>
           
              
       </div>

驴Como modifico las grillas desde css?

Boostrap o Foundation?

Excelente explicaci贸n del uso de las grillas.Lo haces ver muy f谩cil.

Todo muy claro hasta el momento con este framework!

Muy 煤lti!

Muy pr谩ctico aprender a utilizar Bootstrap.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <style media="screen">
      .col {
        border: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <div class="container" style="background: red">
      <!-- Ancho fijo -->
      <div class="row">
        <div class="col">
          1
        </div>
        <div class="col">
          2
        </div>
        <div class="col">
          3
        </div>
      </div>
      <!-- Ancho variable -->
      <div class="row">
        <div class="col-3">
          1
        </div>
        <div class="col-9">
          2
        </div>
      </div>
      <!-- Diferentes pantallas -->
      <div class="row">
        <div class="col-12 col-lg-9" style="background: blue;">
          1
        </div>
        <div class="col-12 col-lg-9" style="background: yellow;">
          2
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  </body>
</html>

Muy bueno este curso y que genial se ve Bootstrap con esto de la Grilla en especial eso de los breakpoints para distintos dispositivos.

jajajaja esto es maravilloso no te rompes la cabeza en utilizar el sistema de grillas aunque si es bueno saber la parte de css grid para saber por que se esta comportando de esta manera.

me encanto la clase鈥 esto es bueno para los que no estamos de lleno metido con el fronten

Los colores de boquita :v

Conteiners: Los contenedores son un bloque de construcci贸n fundamental de Bootstrap que contiene, rellena y alinea su contenido dentro de un dispositivo o ventana gr谩fica determinada. https://getbootstrap.com/docs/5.1/layout/containers/

muy interesante la clase

Ya he utilizado bootstrap pero ni sabia como funcionaba, ahora que estoy viendo esto de las grillas con bootstrap te das cuenta de lo facil que es hacer algo responsive con el .

馃槷 super poderoso bootstrap

Principalmente, Los 2 EDITORES mas importantes para este Tipo de Proyectos se debe Utilizar VISUAL STUDIO CODE Y PHP STORE

excelente video, fue bueno para recordar!

Se me hizo super sencillo poder trabajar con la grilla de Bootsrap. La hab铆a visto pero no sabia utilizarla realmente. El tema del resposive tambi茅n es muy impresionante como lo trabajo de forma autom谩tica 馃槺

Saludos para los que est谩n utilizando Atom baje este paquete atom-beautify para indentar el c贸digo despu茅s de ingresarlo de forma manual utilizando CTRL + ALT + B .

10:26 bokita el mas grande

    <div class="container" style="background-color: darkslategray;">
      <div class="row">
          <div class="col-12 col-lg-3" style="background: blueviolet;">
            1
          </div>
          <div class="col-12 col-lg-9" style="background: cornflowerblue;">
            2
          </div>
      </div>
    </div>```

Me encanto esta clase, se ve algo f谩cil, imagino que todo se complica al crecer el proyecto.

que bien explica Sasha

Perfecto. Gracias por explicarlo tan claramente.

Si alguien esta interesado en usar PUG con bootstrap en su proyecto les dejo el link con toda la documentaci贸n gracias al proyecto JADE.
Para SASS, la informaci贸n esta en el sitio oficial

Muy Bien.!!

muy bien explicado el funcionamiento basico de la grid bootstrap

Bien.

Gracias

un gran sistema de grillas

Es mejor importar las librer铆as de boostrap a mi documento html o dejarlo que lo saque de internet como esta por defecto?

me gusta como ense帽as.

<!-- Row Responsive -->
<div class="container bg-secondary">
	<div class="row">
		<div class="col-12 col-md col-lg-3 border">Col-3</div>
                <div class="col-12 col-md col-lg-9 border">Col-9</div>
</div>
</div>

con todo respeto cada vez que dicen programar con boostrap me frickeo un poco xD !!

Cuando agregas el style en el header, no es necesario decirle que es de tipo text/css ?

   <style type="text/css">
  
    </style>```

ojala hubiera aprendido bootstrap hace tiempo, me hubiera ahorrado muchos dolores de cabeza ya que el responsive yo lo hacia con media queries

Muy bien explicado, excelente curso

Muy buena explicaci贸n acerca de las grillas en Bootstrap, este es uno de los conceptos que se tienen que tener claros a la hora de desarrollar un proyecto con este framework.

buena clase!!!

MUY BUENO

Con esto s茅 que el sistema de CSS GRID LAYOUT es lo mejor que puede existir

+2

me encanta el contenido pero hago una pregunta aparte del curso, 驴c贸mo se edita un video para poner ese fondo y las animaciones para el nombre?

Excelente clase, Me parece fundamental tener presente que Bootstrap da prioridad first Mobile y siempre las dimensiones iniciales del Col inician en Extra Small a Extra large.

Excelente herramienta!!

Tambi茅n es posible uno mismo crear su sistema de grilla usando 煤nicamente CSS

Sencillo el manejo de grillas.

Para no estar refrescando la ventana yo uso el plugin Open Live Server en Visual Studio.

Me gusta mucho el fondo en movimiento que han implementado.

me eh dado cuenta que utilizado mal el sistema de grillas por mucho tiempo jaja, que buen curso (Y) !

Genial

estupendo 馃槃 buen repaso 馃槃

Excelente explicacion sobre la grilla

que bien

Facilita much铆simo la creaci贸n y trabajo con las grillas!

una excelente explicaci贸n, muchas gracias Sacha entend铆 perfectamente.

Excelente!

facilita todo

incre铆ble. facilita mucho el trabajo. Excelente clase, a seguir aprendiendo :D

Excelente.