Skip to content

Instantly share code, notes, and snippets.

@ivandez

ivandez/gist:29f0760abc25fc9762514b78bdb8e70c

Created August 8, 2019 19:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ivandez/29f0760abc25fc9762514b78bdb8e70c to your computer and use it in GitHub Desktop.
Save ivandez/29f0760abc25fc9762514b78bdb8e70c to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap grip platzi challenge
Raw
gistfile1.txt
<--challenge 1-->
<style>
.container{
margin-top: 25px;
}
.col {
background-color: #19E58D;
border: 1px solid white;
padding: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"> </div>
</div>
</div>
<!--challenge 2-->
<style>
.container{
margin-top: 25px;
}
.row div {
background-color: #edb92b;
border: 1px solid white;
padding: 50px 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6 col-md-3">col 1/fila 1</div>
<div class="col-6 col-md-3">col 1/fila 2</div>
<div class="col-6 col-md-3">col 1/fila 3</div>
<div class="col-6 col-md-3">col 1/fila 4</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg">col 2/fila 1</div>
<div class="col-sm-12 col-md-6 col-lg">col 2/fila 2</div>
<div class="col-sm-12 col-md-6 col-lg">col 2/fila 3</div>
<div class="col-sm-12 col-md-6 col-lg">col 2/fila 4</div>
<div class="col-sm-12 col-md-6 col-lg">col 2/fila 5</div>
<div class="col-sm-12 col-md-6 col-lg">col 2/fila 6</div>
<div class="col-sm-12 col-md-6 col-lg">col 2/fila 7</div>
<div class="col-sm-12 col-md-6 col-lg">col 2/fila 8</div>
<div class="col-sm-12 col-md-6 col-lg">col 2/fila 9</div>
<div class="col-sm-12 col-md-6 col-lg">col 2/fila 10</div>
</div>
</div>
<!--challenge 3-->
<style>
.container {
margin-top: 25px;
}
.row div {
background-color: #eb4034;
border: 1px solid white;
padding: 50px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-md-6 offset-md-6">col 1/fila 1</div>
<!--todo en grande 6 y va hacia la derecha-->
</div>
<div class="row">
<div class="col-8 col-md-8 offset-md-2">col 1/fila 2</div>
<!--en peque;o 8 en grande centrada-->
</div>
<div class="row">
<div class="col-3 offset-9 offset-md-0">col 1/fila 3</div>
<!--siempre 3 en peq;o va a la derecha-->
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment