Muy buenas, He empezado a aprender bootstrap pero hay algunas cosas con las que no me aclaro. Sobre todo los espaciados. Por ejemplo, estoy intentando hacer el ejercicio típico para novatos y no doy con la clave para el sm. Este es mi código:
<style>
body > *{
min-height: 100px;
margin-bottom: 1%;
}
#bloque{
margin-left: 1%;
}
#bloque > div{
margin-bottom: 1%;
}
#bloque > div > div{
margin-bottom: 1%;
}
</style>
<title>Document</title>
</head>
<body>
<header class="container-fluid" style="background-color:green;"></header>
<div class="row">
<div class="col-md-2" style="background-color:red;"></div>
<div id="bloque" class="row col-md-10">
<div class="container-fluid" style="background-color:purple;min-height: 100px;"></div>
<div class="row col-12">
<div class="col-md-6" style="background-color:burlywood; min-height: 300px;"></div>
<div class="col-md-6" style="background-color:burlywood; min-height: 300px;"></div>
</div>
<div class="row d-flex justify-content-between col-md-12">
<div class="col-md-2" style="background-color:blue;min-height: 100px;"></div>
<div class="col-md-2" style="background-color:blue;min-height: 100px;"></div>
<div class="col-md-3" style="background-color:blue;min-height: 100px;"></div>
<div class="col-md-2" style="background-color:blue;min-height: 100px;"></div>
<div class="col-md-2" style="background-color:blue;min-height: 100px;"></div>
<div class="col-md-2" style="background-color:blue;min-height: 100px;"></div>
<div class="col-md-2" style="background-color:blue;min-height: 100px;"></div>
<div class="col-md-3" style="background-color:blue;min-height: 100px;"></div>
<div class="col-md-2" style="background-color:blue;min-height: 100px;"></div>
<div class="col-md-2" style="background-color:blue;min-height: 100px;"></div>
</div>
</div>
</div>
<div class="container-fluid" style="background-color:green;"></div>
Y el ejercicio que estoy haciendo:
Gracias