Skip to content

Instantly share code, notes, and snippets.

@pochitax

pochitax/index.html

Created July 26, 2022 02:06
Show Gist options
  • Save pochitax/1e1af8192896afa0c2cc81276239edc4 to your computer and use it in GitHub Desktop.
Save pochitax/1e1af8192896afa0c2cc81276239edc4 to your computer and use it in GitHub Desktop.
Download ZIP
Ejercicio columnas y puntos de quiebre Bootstrap 5.2
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breakpoints</title>
<!-- CSS BOOTSTRAP -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid container-md">
<!-- trabajo columnas : breakpoints -->
<div class="row">
<div class="col-sm-10 col-md-6 col-lg-8 bg-danger">
hola
</div>
<div class="col-sm-2 col-md-6 col-lg-4 bg-primary">
como están
</div>
</div>
<!-- Sistema de filas y columnas -->
<div class="row">
<div class="col-1 bg-primary">1</div>
<div class="col-1 bg-primary">2</div>
<div class="col-1 bg-primary">3</div>
<div class="col-1 bg-primary">4</div>
<div class="col-1 bg-primary">5</div>
<div class="col-1 bg-primary">6</div>
<div class="col-1 bg-primary">7</div>
<div class="col-1 bg-primary">8</div>
<div class="col-1 bg-primary">9</div>
<div class="col-1 bg-primary">10</div>
<div class="col-1 bg-primary">11</div>
<div class="col-1 bg-primary">12</div>
<div class="col-1 bg-primary">13</div>
</div>
<!-- la fila es un separador -->
<div class="row">
<div class="col-md-1 bg-primary">1</div>
<div class="col-md-1 bg-primary">2</div>
<div class="col-md-1 bg-primary">3</div>
<div class="col-md-1 bg-primary">4</div>
<div class="col-md-1 bg-primary">5</div>
<div class="col-md-1 bg-primary">6</div>
<div class="col-md-1 bg-primary">7</div>
<div class="col-md-1 bg-primary">8</div>
<div class="col-md-1 bg-primary">9</div>
<div class="col-md-1 bg-primary">10</div>
<div class="col-md-1 bg-primary">11</div>
</div>
<div class="row">
<div class="col-md-2 bg-info">1</div>
<div class="col-md-2 bg-info">2</div>
<div class="col-md-2 bg-info">3</div>
<div class="col-md-2 bg-info">4</div>
<div class="col-md-2 bg-info">5</div>
<div class="col-md-2 bg-info">6</div>
</div>
<div class="row">
<div class="col-md-3 bg-success">1</div>
<div class="col-md-3 bg-success">2</div>
<div class="col-md-3 bg-success">3</div>
<div class="col-md-3 bg-success">4</div>
</div>
<div class="row mx-4">
<div class="col-md-4 bg-warning">1</div>
<div class="col-md-4 bg-warning">2</div>
<div class="col-md-4 bg-warning">3</div>
</div>
<div class="row mx-4">
<div class="col-md-4">
<div class="mx-4 my-3 bg-warning">hola</div>
</div>
<div class="col-md-4">
<div class="mx-4 my-3 bg-warning">hola</div>
</div>
<div class="col-md-4">
<div class="mx-4 my-3 bg-warning">hola</div>
</div>
</div>
</div>
<!-- JS BOOTSTRAP-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment