La grilla de Bootstrap - Platzi

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 110

Preguntas 14

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

letori

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!!

Enrique Garcia Stave

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.

UlisesBa

Grisha! Jajaja

John Edward León Muñoz

Extensión para VS Code recomendada:

Michelle Verano Osorio

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

Jesus Adrian Berrio Valdes

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

Fortunato Jesus Caraballo Herrera

FALTA ACTUALIZAR

christian_sc96

(

Hammer

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 🙂

Juan Esteban Galvis

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

dalejandro06

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

Juan Esteban Munoz

Increible todo lo que se puede ahorrar con este framework

Max Felipe Hess Alvarez

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

despinozageekbucketcommx

<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>```

Cristian Camilo Alvarado Beltran

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

Karla

Me encantó esto. Estoy emocionada por aprender Bootstrap 👌

Roger Carlos Ariel Alba

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.

Víctor Hugo Hernández Valencia

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

Héctor Fernando Pujazón Lamas

gran ahorro de trabajo que nos ofrece bootstrap

mpaz

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

Jose Antonio Diaz Urbano

Por fin la grisha!

ROGER COTRINA

wow que genial, me fascina bootstrap en especial que ya viene “responsive”

Andrés Leonardo Rodríguez Parra

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

ANGELO ANDRES DUQUE GARCIA

La grisha…

Neryt Alexander Herrera Iñiguez

Maravilloso!

Gonzalo Pimentel

Ufff que útil la grilla de Bootstrap!

Daniel Felipe Merchan Fuquen

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

DiegoKardona

Boostrap o Foundation?

Octavio Gomez Romo

¿Como modifico las grillas desde css?

Octavio Gomez Romo

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

Miguel Angel Jardinez Ramos

Estos son los break points respectivos de la grilla de boostrap

JefersonParraM

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

Jefferson Andres Espejo Goez

Todo muy claro hasta el momento con este framework!

John Jairo Pico Parra

necesito aprender bootstrap , se ve muy bueno el curso

guillef33

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

ANGEL DAVID SULBARAN CALDERON

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>

Jimmy Buriticá Londoño

Excelente explicación del uso de las grillas.Lo haces ver muy fácil.

Miguel Angel

Un gran ahorro de tiempo

Jheyson Eduardo Galvis Valencia

Muy práctico aprender a utilizar Bootstrap.

Jesus Adrian Berrio Valdes

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
);

Basilio Gianfranco De Paula Cuevas

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.

Cristian Lionel Waitzel

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=“row”) al contenedor horizontal y la clase -col (class=“col”) al contenedor columna. Ej <div class=“row”><div class=“col”>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=“container”>

<div class=“row”>

<div class=“col-3”> Column </div>

<div class=“col-9”> Column </div>

</div>

Víctor Isaac Arias García

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

Gerardo Garduño Rosas

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.

Diego Pagini

Muy últi!

Juan Guillermo Perez Cardozo

muy bien explicado el funcionamiento basico de la grid bootstrap

Marcelo Javier Pedernera

Bien.

Emmanuel Sturla

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?

Alex Eugenio Gavidia Donayre

Gracias

jlrcolmenares

Perfecto. Gracias por explicarlo tan claramente.

pedrosalasgalindo

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

Guido Ortega

Muy bien explicado, excelente curso

camilo Rincon

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.

Cristhian Camilo Perez Veloza

que bien explica Sasha

Noe de Jesus Muñoz Martinez

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.

LuisMendezG

MUY BUENO

Ivan Mendez

me gusta como enseñas.

Ivan Mendez

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

Rafael Alvarez Cardona

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

demateu

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

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

JefersonParraM

<!-- 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>

Joel Vicente Nieto Gómez

También es posible uno mismo crear su sistema de grilla usando únicamente CSS

Alexander Garzon

Excelente video.

Jorge Fidel Zubieta Choque

Captura de Pantalla 2021-01-16 a la(s) 02.35.29.png

Alexander Valencia

un gran sistema de grillas

Maclovinhm

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

Sergio Díaz Fernández

+2

Andrés Campuzano Garzón

Me gusta mucho el fondo en movimiento que han implementado.

Andrés Campuzano Garzón

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

Christian Andres Moreno Ceballos

Genial

Cristian Garcia

facilita todo

Benjamín Maximiliano Blaimont Calderón

Hola a todos! Les recomiendo usar como editor de texto Visual Studio Code para el desarrollo Frontend-Por segundo año consecutivo fue galardonado como el editor de texto más usado en la comunidad de desarrolladores de Stackoverflow y por mi experiencia usándolo, es buenísimo! Espero que les sirva esta recomendación y me gustaría saber si han tenido la misma experiencia que yo 😄

David Silva Troya

Increíble! ahora todo tiene sentido jaja

rodrigo roque

10:26 bokita el mas grande

Andrea Elizabeth Ortiz Soriano

excelente video, fue bueno para recordar!

Job Forero

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 .

Joel Dominguez Merino

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 😱

Erick Alejandro Graterol Barico

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 .

Fernando Galdós

    <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>```

Edwin Jhair Zapata Aragon

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

lmarinb

Muy Bien.!!

Norman Erick Estrada Vargas

buena clase!!!

Cesar Anzules

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

Lioevaz

Excelente explicacion sobre la grilla

Angélica Rocha

una excelente explicación, muchas gracias Sacha entendí perfectamente.

Santiago Gomez Florez

Sencillo el manejo de grillas.

Yoimar Andres Lozano Rivas

Excelente.

Jhonatan David Ibarra Lavado

estupendo 😄 buen repaso 😄

christian rojas

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

Juan Gui Arenas

😮 super poderoso bootstrap

Jesús Enrique Morocoima Marcano

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

Raúl Adolfo Sánchez Rodríguez

1 de los containers que tiene Boostrap => .container

Wilker Vivas

Les recomiendo que pongan la velocidad del video en 1.25x

Vladimir Marcos Vega

vi los colores de boquita, el más grande !!!

Juan Manuel Hincapié Cardona

<!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>

Luis Ismael Blanco Chambi

Los colores de boquita :v

Rolando Mamani Salas

muy interesante la clase

Gutierrez Diego

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

Marlon Fabian Pineda Jaimes

Excelente herramienta!!

Kevin Naranjo

que bien