Crear cualquier cantidad de columnas iguales en una ‘fila’ nunca fue tan fácil como ahora con Bootstrap 4.0+. Con la introducción del enfoque ‘flexbox’ al sistema de cuadrícula, los diseñadores no tienen que preocuparse por agregar CSS adicional para que funcione. Así es como se hace.
- Acercarse:
- Vaya al sitio de Bootstrap y obtenga los últimos archivos de Bootstrap en su computadora.
- Escriba una plantilla HTML básica usando estos archivos.
- Una vez que todo esté configurado, cree un div de ‘contenedor’ simple dentro de la etiqueta <body>.
- Dentro del ‘contenedor’, cree otro div con la clase ‘fila’ y, como sugiere el nombre, estamos creando una fila para manejar columnas. Rellene el div ‘fila’ con 5 divs con la clase ‘col’ . Debido a que el sistema de cuadrícula Bootstrap 4.0+ ahora se ha cambiado a Flexbox, las columnas se organizarán por sí mismas en cinco elementos DOM de igual tamaño.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<title>5 cols a row</title>
<style>
.row .col {
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="container px-5 py-5">
<div class="row">
<div class="col mx-1">1</div>
<div class="col mx-1">2</div>
<div class="col mx-1">3</div>
<div class="col mx-1">4</div>
<div class="col mx-1">5</div>
</div>
</div>
<script src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
</body>
</html>
Para distinguir entre las columnas, se agrega un pequeño margen a cada una de las columnas.
Producción: