How can I align these items to the left? - html

I have 10 divs side by side. I need my last divs to align left instead of center. I've read Bootstrap's documentation and it says I should use <div class="d-flex flex-wrap"> but it does nothing. Also, I've read this same question here and the solution is to use float: left but the replies are from 2016, and I wonder if there is a newer way to achieve this. (I'm using Bootstrap 4).
This is what I have now:
.briones-project-row {
margin-bottom: 2em;
}
.briones-project-card {
background-color: #ffffff;
box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
-webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
-moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
margin-bottom: 3em;
}
.briones-project-card .main-image {
padding: 0;
}
.briones-project-card .main-image img {
width: 100%;
}
.briones-project-card .main-image img:hover {
opacity: 0.8;
}
.briones-project-card .card-content {
text-align: center;
}
.briones-project-card .card-content .project-name {
font-weight: 600;
color: #2d2d2d;
margin-top: 0.9em;
margin-bottom: 0.7em;
line-height: 1.3em;
min-height: 40px;
max-height: 40px;
}
.briones-project-card .card-content .project-detail {
font-weight: 400;
color: #737373;
line-height: 1.3em;
}
.briones-project-card .bottom-line {
position: absolute;
bottom: 0;
width: 100%;
height: 6px;
background-color: #DA3D0D;
}
.briones-primary-btn-container {
margin-top: 2em;
}
.briones-primary-btn {
background-color: #DA3D0D;
color: #ffffff;
font-weight: 400;
border: none;
border-radius: 0;
padding: 0.5em 3em;
}
.briones-primary-btn:hover {
background-color: #232323;
color: #ffffff;
}
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-12">
<!-- /Row One -->
<div class="row briones-project-row">
<!-- 01 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/don-pedro-limache-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Don Pedro de Limache</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /01 -->
<!-- 02 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/dona-barbara-casablanca-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Doña Bárbara de Casablanca</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /02 -->
<!-- 03 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/ayelen-oriente-quillota-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Ayelen Oriente de Quilota</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /03 -->
<!-- 04 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/rey-felipe-casablanca-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Rey Felipe de Casablanca</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /04 -->
<!-- 05 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/ayelen-poniente-quillota-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Ayelen Poniente de Quillota</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /05 -->
<!-- 06 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/esmeralda-de-limache-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Esmeralda de Limache</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /06 -->
<!-- 07 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/paqari-de-villa-alemana-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Paqari de Villa Alemana</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /07 -->
<!-- 08 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/lobelias-de-placilla-de-penuelas-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Las Lobelias de Placilla de Peñuelas</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /08 -->
<!-- 09 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/aliwen-quillota-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Aliwen de Quillota</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /09 -->
<!-- 10 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/alicura-penablanca-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Alicura de Peñablanca</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /10 -->
</div>
</div>
</div>
Aligning last div elements


Make the container set justify-content: flex-start and remove the mx-auto as the auto margins are pushing the contents to the middle in a flex context:
.briones-project-row {
margin-bottom: 2em;
justify-content: flex-start; /* there is also a utility class for this is preferred */
}
.briones-project-card {
background-color: #ffffff;
box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
-webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
-moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
margin-bottom: 3em;
}
.briones-project-card .main-image {
padding: 0;
}
.briones-project-card .main-image img {
width: 100%;
}
.briones-project-card .main-image img:hover {
opacity: 0.8;
}
.briones-project-card .card-content {
text-align: center;
}
.briones-project-card .card-content .project-name {
font-weight: 600;
color: #2d2d2d;
margin-top: 0.9em;
margin-bottom: 0.7em;
line-height: 1.3em;
min-height: 40px;
max-height: 40px;
}
.briones-project-card .card-content .project-detail {
font-weight: 400;
color: #737373;
line-height: 1.3em;
}
.briones-project-card .bottom-line {
position: absolute;
bottom: 0;
width: 100%;
height: 6px;
background-color: #DA3D0D;
}
.briones-primary-btn-container {
margin-top: 2em;
}
.briones-primary-btn {
background-color: #DA3D0D;
color: #ffffff;
font-weight: 400;
border: none;
border-radius: 0;
padding: 0.5em 3em;
}
.briones-primary-btn:hover {
background-color: #232323;
color: #ffffff;
}
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-12">
<!-- /Row One -->
<div class="row briones-project-row">
<!-- 01 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/don-pedro-limache-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Don Pedro de Limache</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /01 -->
<!-- 02 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/dona-barbara-casablanca-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Doña Bárbara de Casablanca</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /02 -->
<!-- 03 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/ayelen-oriente-quillota-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Ayelen Oriente de Quilota</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /03 -->
<!-- 04 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/rey-felipe-casablanca-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Rey Felipe de Casablanca</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /04 -->
<!-- 05 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/ayelen-poniente-quillota-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Ayelen Poniente de Quillota</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /05 -->
<!-- 06 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/esmeralda-de-limache-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Esmeralda de Limache</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /06 -->
<!-- 07 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/paqari-de-villa-alemana-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Paqari de Villa Alemana</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /07 -->
<!-- 08 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/lobelias-de-placilla-de-penuelas-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Las Lobelias de Placilla de Peñuelas</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /08 -->
<!-- 09 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/aliwen-quillota-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Aliwen de Quillota</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /09 -->
<!-- 10 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/alicura-penablanca-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Alicura de Peñablanca</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /10 -->
</div>
</div>
</div>


remove mx-auto from the 9th card.
change mx-auto from the 10th card to me-auto
.briones-project-row {
margin-bottom: 2em;
}
.briones-project-card {
background-color: #ffffff;
box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
-webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
-moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.34);
margin-bottom: 3em;
}
.briones-project-card .main-image {
padding: 0;
}
.briones-project-card .main-image img {
width: 100%;
}
.briones-project-card .main-image img:hover {
opacity: 0.8;
}
.briones-project-card .card-content {
text-align: center;
}
.briones-project-card .card-content .project-name {
font-weight: 600;
color: #2d2d2d;
margin-top: 0.9em;
margin-bottom: 0.7em;
line-height: 1.3em;
min-height: 40px;
max-height: 40px;
}
.briones-project-card .card-content .project-detail {
font-weight: 400;
color: #737373;
line-height: 1.3em;
}
.briones-project-card .bottom-line {
position: absolute;
bottom: 0;
width: 100%;
height: 6px;
background-color: #DA3D0D;
}
.briones-primary-btn-container {
margin-top: 2em;
}
.briones-primary-btn {
background-color: #DA3D0D;
color: #ffffff;
font-weight: 400;
border: none;
border-radius: 0;
padding: 0.5em 3em;
}
.briones-primary-btn:hover {
background-color: #232323;
color: #ffffff;
}
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-12">
<!-- /Row One -->
<div class="row briones-project-row">
<!-- 01 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/don-pedro-limache-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Don Pedro de Limache</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /01 -->
<!-- 02 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/dona-barbara-casablanca-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Doña Bárbara de Casablanca</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /02 -->
<!-- 03 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/ayelen-oriente-quillota-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Ayelen Oriente de Quilota</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /03 -->
<!-- 04 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/rey-felipe-casablanca-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Rey Felipe de Casablanca</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /04 -->
<!-- 05 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/ayelen-poniente-quillota-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Ayelen Poniente de Quillota</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /05 -->
<!-- 06 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/esmeralda-de-limache-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Esmeralda de Limache</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /06 -->
<!-- 07 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/paqari-de-villa-alemana-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Paqari de Villa Alemana</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /07 -->
<!-- 08 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 mx-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/lobelias-de-placilla-de-penuelas-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Las Lobelias de Placilla de Peñuelas</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /08 -->
<!-- 09 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/aliwen-quillota-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Aliwen de Quillota</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /09 -->
<!-- 10 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-11 me-auto">
<div class="col-lg-12 briones-project-card">
<div class="row">
<a href="#" class="col-lg-12 main-image text-center">
<img src="images/alicura-penablanca-thumbnail.jpg" alt="Imagen del proyecto" class="img-fluid">
</a>
</div>
<div class="row">
<div class="col-lg-12 card-content">
<p class="project-name">Alicura de Peñablanca</p>
<p class="project-detail">Ubicación del proyecto <br/> Xm2 | X días</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 bottom-line"></div>
</div>
</div>
</div>
<!-- /10 -->
</div>
</div>
</div>

Related

Customer Section's images stacked vertically on mobile screens bootstrap 5

I am trying to design my company's website. But all images in the customer section are stacked vertically on mobile devices. I am using Bootstrap 5.2. I have tried col-xs and col-md classes but was not able to achieve the output. I am attaching the code and image. Thanks For the Help.
/*
===========================================
Customer Section
===========================================
*/
.dot {
height: 20px;
width: 20px;
background-color: #3736b0;
border-radius: 50%;
display: block;
position: absolute;
top: 105rem;
left: 50%;
}
.section-4-title {
display: block;
position: absolute;
top: 108rem;
}
.section-4 {
margin-top: 3rem;
}
.card {
overflow: hidden;
height: 4rem;
width: 7rem;
border: none;
margin-top: 3rem;
margin-bottom: 1rem;
box-shadow: 1px 1px 12px 0 rgba(0, 0, 0, 0.2);
}
.card img {
height: 100%;
width: 100%;
}
.card-3 {
overflow: hidden;
height: 4rem;
width: 8rem;
border: none;
box-shadow: 1px 1px 12px 0 rgba(0, 0, 0, 0.2);
}
<!--
===========================================
Customer Logo Section
===========================================
-->
<div class="container">
<section class="section-4">
<div class="container text-center">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="dot"></div>
</div>
</div>
<div class="row">
<h2 class="section-4-title">
Simplifying communications for Industry
<div class="title-highlighter">Leaders in India and World</div>
</h2>
</div>
<div class="container">
<!-- Customer Row 1 -->
<div class="row bg-primary">
<div class="bg-dark col-lg-2 col-sm-4 col-xs-6">
<div class="card">
<img src="svgs/logo-1.svg" class="img-fluid" alt="Logo 1" />
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6">
<div class="card">
<img src="svgs/logo-2.svg" class="img-fluid" alt="Logo 2" />
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6">
<div class="card card-3">
<img src="svgs/logo-3.svg" alt="Logo 3" />
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6">
<div class="card">
<img src="svgs/logo-4.svg" alt="Logo 4" />
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6">
<div class="card">
<img src="svgs/logo-5.svg" alt="Logo 5" />
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6">
<div class="card">
<img src="svgs/logo-6.svg" alt="Logo 6" />
</div>
</div>
</div>
<!-- Customer Row 2 -->
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="card">
<img
src="svgs/logo-7.svg"
class="card-img-top"
alt="Logo 7"
/>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="card">
<img
src="svgs/logo-8.svg"
class="card-img-top"
alt="Logo 8"
/>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="card card-3">
<img
src="svgs/logo-9.svg"
class="card-img-top"
alt="Logo 9"
/>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="card card-10 py-2">
<img
src="svgs/logo-10.svg"
class="card-img-top"
alt="Logo 10"
/>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="card card-3">
<img
src="svgs/logo-11.svg"
class="card-img-top"
alt="Logo 11"
/>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<div class="card">
<img
src="svgs/logo-12.svg"
class="card-img-top"
alt="Logo 12"
/>
</div>
</div>
</div>
</div>
</div>
</section>
</div>

My images are not being displayed in a row

In a section of my code I made a row-grid for a part that displays images but when I went to insert and look at the website its not displaying in a row format but in a column and im not sure why. I thought the problem came from it being col-sm-6 but i changed it to col-sm-12 and its still not displaying it. Any reasons why?
.site-main .project-area {
padding: 4rem 0;
}
.site-main .project-area .button-group button {
background: transparent;
border: none;
font: normal 500 16px/130px var(--lato);
text-transform: uppercase;
}
.site-main .project-area .button-group button+button {
padding-left: 3rem;
}
.site-main .project-area .grid .our-project>title h4 {
font: normal 700 25px/12px var(--lato);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="project-area">
<div class="container">
<div class="project title pb-5">
<h1 class="h1 text-uppercase title-h1"> Recent Projects</h1>
<h1 class="h1 text-uppercase title h1"> Quality Work</h1>
</div>
<div class="div button-group">
<button type="button" class="active">All</button>
<button type="button" data-filter=".cars">Cars</button>
<button type="button" data-filter=".character">Characters</button>
<button type="button">Food</button>
<button type="button">Activities</button>
</div>
<div class="row-grid">
<div class="col-lg-4 col-md-6 col-sm-6 element-item cars">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/car.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item character">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/images.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">video game character</h4>
<span class="text-secondary">popular, Portfolio</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item popular">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/ntfs-to-be-professional-gamer-image1.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 element-item popular">
<div class="our-project">
<div class="img">
<img src="./img/portfolio/ntfs-to-be-professional-gamer-image1.jpg" alt="car">
</div>
<div class="title py-4">
<h4 class="text-uppercase">minimul design</h4>
<span class="text-secondary">Latest, Popular</span>
</div>
</div>
</div>
</div>
</div>
</section>

Changing the class row-grid to row makes it work. I don't think Bootstrap has a class called row-grid.
If you are trying to fit all the div elements into one row, just replace the col-lg-4 col-md-6 col-sm-6 and the col-lg-4 col-md-6 col-sm-12 with col

responsive image and text within border

Having problem styling the border.
What i want to achieve
What i have now
HTML codes
<div class="container">
<div class="col-sm-12 row">
<div class="col-sm-2 thumbnail">
<img class="img-responsive" src="images/ac/row_ac001_m0.jpg">
<div class="caption">
<p align="center"><b>Model No.Row-AC-001</b></p>
</div>
</div>
<img class="col-sm-2 img-responsive" src="images/ac/row_ac002_m0.jpg">
<img class="col-sm-2 img-responsive" src="images/ac/row_ac003_m0.jpg">
<!---continues------>
</div>
</div>
My CSS
.thumbnail {
border:1px;
width:15%;
border-style:solid;
}

.thumbnail{
border: thin gray solid;
border-radius: 0px !important;
margin: 0 5px;
}
.image_size{
width: 150px;
height: 150px;
display: block;
}
p{
font-size:12px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
</div>
</div>
PS: Change your image size as per your need.
Here is JSFiddle
Hope this helps.

Based on the photos you provided.
The wider the screen, the more items per line.
.myitem {
display: inline-block;
width: 200px;
max-height: 310px;
border: 1px solid #fff;
}
.mycoolcontainer,
.myitem {
margin: .4em;
}
img,
.mycoolcontainer,
.myitem {
max-width: 100%;
}
body {
background: #131418;
color: #999;
text-align: center;
}
<div class="mycoolcontainer">
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
</div>

I have changed your code and appended below. I hope this will help you to solve your problem.
The formation should be like this, the grid size based on your requirement. You can change the grid size.
HTML
<div class="row">
<div class="col-sm-2 col-md-2">
<div class="thumbnail">
<img src="https://cdn.pixabay.com/photo/2016/12/22/05/41/muang-sing-historical-park-1924558__340.jpg" alt="...">
<div class="caption">
<p class="text-center">Row-AC-001</p>
</div>
</div>
</div>
CSS
.thumbnail img {
max-width: 150px;
}
.thumbnail .caption {
padding-top: 9px;
}
Codepen link attached,
http://codepen.io/WebTechie/pen/vyMqdY

use html this way:
<div class="container">
<div class="row">
<div class="col-sm-2">
<div class="thumbnail">
<img class="img-responsive" src="images/ac/row_ac002_m0.jpg">
<div class="caption">
<p align="center"><b>Model No.Row-AC-001</b></p>
</div>
</div>
</div><!-- First col -->
<div class="col-sm-2">
<div class="thumbnail">
<img class="img-responsive" src="images/ac/row_ac002_m0.jpg">
<div class="caption">
<p align="center"><b>Model No.Row-AC-001</b></p>
</div>
</div>
</div><!-- Second col -->
</div>
</div>
Use CSS:
.thumbnail {
border:1px solid #ccc;
}

Remove blank space from the right side of the webpage with Bootstrap

So it seems it's a typical problem, but I haven't been able to remove that bloody blank space that completely disfigures my webpage on mobile view.
I have tried to remove individually each element to see what's happening, but I can't see it.
HTML code:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<!--Boostrap jQuery-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<!--Boostrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<!--Favicon-->
<link rel="icon" type="image/png" href="media/favicon-32x32.png" sizes="32x32" />
<!--Mi CSS-->
<link rel="stylesheet" type="text/css" href="estilo.css">
<title> TRAMA & DRAMA | Vestuario y producción</title>
</head>
<body>
<!-- navbar -->
<nav id="navegacion" class="navbar navbar-default navbar-fixed-top navbar-wrapper">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>¿Quiénes somos?</li>
<li>¿Qué hacemos?</li>
<li>
<img id="logo" src="media/logo-menu.png" alt="">
</li>
<li>Nuestros proyectos</li>
<li>Contacto</li>
</ul>
</div>
</div>
</nav>
<!--fin del navbar-->
<!--Barra rosa única del navbar-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa-nav"></div>
</div>
</div>
<!--Sldeshow -->
<div class="container-fluid">
<div class="row ">
<div id="pasion-div">
<div class="text-center">
<h1 id="pasion-texto">Pasión por el vestuario</h1>
</div>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 text-center img-responsive" id="id-quienes">
<img id="img-vestido" src="media/vestido.png" alt="Vestido">
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans" id="hacemos">
<h1>¿Qué hacemos?</h1>
</div>
</div>
<br>
<div class="row text-center fuente-merri">
<div class="col-sm-4">
<img src="media/icono-renta.png" alt="">
<p class="hacemos-headers"><b>Renta de vestuario</b></p>
<!--<p class="hacemos-descripciones fuente-merri">Nosotros hacemos muchas cosas bien chodas</p>-->
</div>
<div class="col-sm-4">
<img src="media/icono-coordinacion.png" alt="">
<p class="hacemos-headers"><b>Coordinación de vestuario</b></p>
</div>
<div class="row">
<img src="media/icono-diseno.png" alt="">
<p class="hacemos-headers"><b>Diseño de vestuario</b></p>
</div>
</div>
<div class="row text-center fuente-merri">
<div class="col-sm-4">
<img src="media/icono-espacios.png" alt="">
<p class="hacemos-headers"><b>Renta de espacios para cursos</b></p>
</div>
<div class="col-sm-4">
<img src="media/icono-realizacion.png" alt="">
<p class="hacemos-headers"><b>Realización</b></p>
</div>
<div class="row">
<img src="media/icono-mantenimiento.png" alt="">
<p class="hacemos-headers"><b>Mantenimiento de vestuario</b></p>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div id="proyectos">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans">
<h1>Nuestros proyectos</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center fuente-merri">
<p>Nos interesa que conozcas más a fondo los proyectos que llevamos a cabo en <b>Trama & Drama</b>.</p>
</div>
</div>
<br>
<div class="row text-center fuente-sans">
<div class="col-sm-4">
<img src="media/circ-1.png" alt="">
<h4>Diseño de vestuario</h4>
</div>
<div class="col-sm-4">
<img src="media/circ-2.png" alt="">
<h4>Producción y coordinación de vestuario</h4>
</div>
<div class="col-sm-4">
<img src="media/circ-3.png" alt="">
<h4>Renta de vestuario</h4>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="row text-center fuente-sans">
<div class="col-sm-6">
<img src="media/circ-4.png" alt="">
<h4>Servicio social</h4>
</div>
<div class="col-sm-6">
<img src="media/circ-5.png" alt="">
<h4>Actividades del mes</h4>
</div>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans">
<h1>Contacto</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center fuente-merri">
<div id="contacto-desc">
<p>¡Nos encantan los nuevos retos! Escríbemos, llámanos o platícanos de tu proyecto.</p>
</div>
</div>
</div>
<div class="row text-center">
<form role="form">
<div class="form-group">
<input type="text" name="" value="" placeholder="Tu nombre o el nombre de la empresa">
</div>
<div class="form-group">
<input type="email" name="" value="" placeholder="Correo electrónico">
</div>
<div class="form-group">
<input id="textfield" type="text" name="" value="" placeholder="Tu mensaje">
</div>
<button type="button" class="btn btn-primary">ENVIAR</button>
</form>
</div>
<br>
<div class="row text-center fuente-merri">
<p class="ch">Teléfonos</p>
<p class="cs">044 55 5601 1231</p>
<br>
<p class="ch">Correo eletrónico</p>
<p class="cs">info#tramaydrama.mx</p>
<br>
<p class="ch">Dirección</p>
<p class="cs">Eligio Villamar, No. 20, San Diego Churubusco. C.P: 04120, Delegación Coyoacan</p>
</div>
</div>
<br>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa-negra"></div>
</div>
</div>
<!--Footer-->
<footer>
<div class="container">
<div class="row fuente-sans">
<div class="col-sm-12 text-center" id="futer">
<a target="_blank" href="https://www.facebook.com/tramaydrama/?fref=ts"><img src="media/icono-fb.png" alt="Facebook"></a>
<img src="media/icono-inst.png" alt="Instagram">
<img src="media/icono-vimeo.png" alt="vimeo">
<p id="copyrights">Copyright Trama & Drama 2016 ©. Todos los derechos reservados | Página web por <a target="_blank"
href="http://animanoir.com"><b>Animanoir/Claque</b></a> | Diseño por <b>Cúmulo</b>.</p>
</div>
</div>
</div>
</footer>
<!--Bootstrap jQuery-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</body>
</html>
CSS code:
/*Fuentes*/
#import 'https://fonts.googleapis.com/css?family=Lora:700i'; /*Header*/
#import 'https://fonts.googleapis.com/css?family=Merriweather'; /*Títulos*/
#import 'https://fonts.googleapis.com/css?family=Open+Sans:300'; /*Subtítulos*/
body{
padding-top: 70px;
overflow: hidden
}
footer{
background-color: #B7254E;
color: white;
}
/*Los botones dentro de una font: ;ma*/
form > button{
width: 50%;
background-color: #5A1741 !important;
text-align: left !important;
}
/*ids*/
#copyrights{
padding-top: 25px;
}
#futer{
padding-top: 25px;
padding-bottom: 25px;
}
#textfield{
height: 150px;
}
#proyectos{
background-color: #5A1741;
color: white;
}
#id-quienes{
color: white;
background-color: #5A1741;
padding-top: 10px;
padding-bottom: 10px;
}
#imagen-fondo{
position: relative;;
z-index: -1;
}
#logo{
width: 13em;
}
#contacto-desc{
color: #692C52;
font-weight: bold;
}
#pasion-div{
background-image: url("media/portada-mejor.jpg");
background-repeat: no-repeat;
background-size: cover;
min-height: 650px;
padding: 13px;
font-size: 1.2em;
/*Para que se centre el texto*/
display: table;
width: 100%;
}
#pasion-div > div{
display: table-cell;
vertical-align: middle;
text-align: center;
}
#pasion-texto{
font-family: 'Lora', serif;
color: white;
font-size: 5em;
/*width: 400px;*/
}
#quienes{
background-color: #5A1741;
height: 200px;
}
/*clases*/
.ch{
font-weight: bold;
color: #5A1741;
}
.cs{
color: #5A1741;
color: #B7254E;
}
.navbar-nav{
background-color: white;
font-weight: bold;
}
.navbar-nav {
display:table;
width:100%;
margin: 0;
color: #B7254E;
}
.navbar-nav > li {
float:none;
display:table-cell;
text-align:center;
}
.navbar a{
color: #B7254E !important;
}
.barraRosa-nav{
width: 100%;
height: 45px;
background-color: #B7254E;
}
.barraRosa{
width: 100%;
height: 5px;
background-color: #B7254E;
}
.barraRosa-negra{
width: 100%;
height: 5px;
background-color: #5A1741
}
.hacemos-descripciones{
color: #B7254E;
}
.hacemos-headers{
color: #5A1741;
}
.fuente-merri{
font-family: 'Merriweather', serif;
}
.fuente-sans{
font-family: 'Open Sans', sans-serif;
}
/*Posicionar verticalmente en el centro*/
.vertical-align {
vertical-align: middle;
display: inline-block;
}
.form-group > input{
width: 50%;
}

Try this:
body {
overflow-x: hidden;
}

Try to add
html, body { margin: 0; }

I think you used to much class="row" even if there is no child columns.
for example you did this
<!--Sldeshow -->
<div class="container-fluid">
<div class="row "> /*remove this class="row" because you're not using col*/
<div id="pasion-div">
<div class="text-center">
<h1 id="pasion-texto">Pasión por el vestuario</h1>
</div>
</div>
</div>
</div>
and it should be like this
<!--Sldeshow -->
<div class="container-fluid">
<div> /*yep, this is right*/
<div id="pasion-div">
<div class="text-center">
<h1 id="pasion-texto">Pasión por el vestuario</h1>
</div>
</div>
</div>
</div>
so why removing the class row?
if you look at bootstrap.css you can see the .row have margin: 0 -15px, so why is that?
so that it can remove the excess 15px of the col-xx-00 class.
So try removing the class='row' that occupies the unnecessary white spaces.
here, i tried to remove the unnecessary rows.
<!-- navbar -->
<nav id="navegacion" class="navbar navbar-default navbar-fixed-top navbar-wrapper">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>¿Quiénes somos?</li>
<li>¿Qué hacemos?</li>
<li>
<img id="logo" src="media/logo-menu.png" alt="">
</li>
<li>Nuestros proyectos</li>
<li>Contacto</li>
</ul>
</div>
</div>
</nav>
<!--fin del navbar-->
<!--Barra rosa única del navbar-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa-nav"></div>
</div>
</div>
<!--Sldeshow -->
<div class="container-fluid">
<div> /*removed class="row" here*/
<div id="pasion-div">
<div class="text-center">
<h1 id="pasion-texto">Pasión por el vestuario</h1>
</div>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 text-center img-responsive" id="id-quienes">
<img id="img-vestido" src="media/vestido.png" alt="Vestido">
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans" id="hacemos">
<h1>¿Qué hacemos?</h1>
</div>
</div>
<br>
<div class="row text-center fuente-merri">
<div class="col-sm-4">
<img src="media/icono-renta.png" alt="">
<p class="hacemos-headers"><b>Renta de vestuario</b></p>
<!--<p class="hacemos-descripciones fuente-merri">Nosotros hacemos muchas cosas bien chodas</p>-->
</div>
<div class="col-sm-4">
<img src="media/icono-coordinacion.png" alt="">
<p class="hacemos-headers"><b>Coordinación de vestuario</b></p>
</div>
<div class="row">
<img src="media/icono-diseno.png" alt="">
<p class="hacemos-headers"><b>Diseño de vestuario</b></p>
</div>
</div>
<div class="row text-center fuente-merri">
<div class="col-sm-4">
<img src="media/icono-espacios.png" alt="">
<p class="hacemos-headers"><b>Renta de espacios para cursos</b></p>
</div>
<div class="col-sm-4">
<img src="media/icono-realizacion.png" alt="">
<p class="hacemos-headers"><b>Realización</b></p>
</div>
<div> /*removed class="row" here*/
<img src="media/icono-mantenimiento.png" alt="">
<p class="hacemos-headers"><b>Mantenimiento de vestuario</b></p>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div id="proyectos">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans">
<h1>Nuestros proyectos</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center fuente-merri">
<p>Nos interesa que conozcas más a fondo los proyectos que llevamos a cabo en <b>Trama & Drama</b>.</p>
</div>
</div>
<br>
<div class="row text-center fuente-sans">
<div class="col-sm-4">
<img src="media/circ-1.png" alt="">
<h4>Diseño de vestuario</h4>
</div>
<div class="col-sm-4">
<img src="media/circ-2.png" alt="">
<h4>Producción y coordinación de vestuario</h4>
</div>
<div class="col-sm-4">
<img src="media/circ-3.png" alt="">
<h4>Renta de vestuario</h4>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="row text-center fuente-sans">
<div class="col-sm-6">
<img src="media/circ-4.png" alt="">
<h4>Servicio social</h4>
</div>
<div class="col-sm-6">
<img src="media/circ-5.png" alt="">
<h4>Actividades del mes</h4>
</div>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans">
<h1>Contacto</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center fuente-merri">
<div id="contacto-desc">
<p>¡Nos encantan los nuevos retos! Escríbemos, llámanos o platícanos de tu proyecto.</p>
</div>
</div>
</div>
<div class="text-center"> /*removed class="row" here*/
<form role="form">
<div class="form-group">
<input type="text" name="" value="" placeholder="Tu nombre o el nombre de la empresa">
</div>
<div class="form-group">
<input type="email" name="" value="" placeholder="Correo electrónico">
</div>
<div class="form-group">
<input id="textfield" type="text" name="" value="" placeholder="Tu mensaje">
</div>
<button type="button" class="btn btn-primary">ENVIAR</button>
</form>
</div>
<br>
<div class="row text-center fuente-merri">
<p class="ch">Teléfonos</p>
<p class="cs">044 55 5601 1231</p>
<br>
<p class="ch">Correo eletrónico</p>
<p class="cs">info#tramaydrama.mx</p>
<br>
<p class="ch">Dirección</p>
<p class="cs">Eligio Villamar, No. 20, San Diego Churubusco. C.P: 04120, Delegación Coyoacan</p>
</div>
</div>
<br>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa-negra"></div>
</div>
</div>
<!--Footer-->
<footer>
<div class="container">
<div class="row fuente-sans">
<div class="col-sm-12 text-center" id="futer">
<a target="_blank" href="https://www.facebook.com/tramaydrama/?fref=ts"><img src="media/icono-fb.png" alt="Facebook"></a>
<img src="media/icono-inst.png" alt="Instagram">
<img src="media/icono-vimeo.png" alt="vimeo">
<p id="copyrights">Copyright Trama & Drama 2016 ©. Todos los derechos reservados | Página web por <a target="_blank"
href="http://animanoir.com"><b>Animanoir/Claque</b></a> | Diseño por <b>Cúmulo</b>.</p>
</div>
</div>
</div>
</footer>
or if you want, instead of removing rows, add col-sm-12 to the following tag. For example <div class="row"><div class="col-sm-12"><p>hey~</p></div></div>

Bootstrap responsive issue

The idea is if I use the container class it works form zoom in and zoom out, but it does not on responsive. If I use container-fluid class it works for responsive, but it does not work on zoom in or out. How do I make this work to be responsive and for the zoom in or out? This is a part from HTML code:
<div class="container-fluid">
<div class ="row">
<div class="col-xs-3"></div>
<div class="col-xs-6">
<div class="row svu-info1">
<div class="col-xs-6 col-sm-6 svu-info1-text1">
<p class="text-header">Înveți, te consulți, faci schimb de cunoștințe, te specialiezi! </p>
<p class="text-body"><span class="p-header"></span> este un program intern care
oferă posibilitatea tuturor colegilor să se dezvolte
profesional. Este un centru de cunoștințe și expertiză,
este locul unde ne ajutăm reciproc și unde întrebările
noastre își găsesc răspunsul.</p>
</div>
<div class="col-xs-6 col-sm-6 bg-img1">
<!-- <img src ="<?php echo Yii::app()->getBaseUrl(); ?>/images/pages/svu/img_svu_1.jpg" alt="img_svu_1"> -->
</div>
</div>
</div>
<div class="col-xs-3"></div>
</div>
<div class ="row bg-white">
<div class="col-xs-3"></div>
<div class="col-xs-6">
<div class="row svu-info2">
<div class="col-xs-6 col-sm-6 svu-info2-text2">
<p class="">TEST University include 10 comunități tehnice,</p>
<p class="">fiecare dintre ele având un decan - coordonator și un nucleu tehnic</p>
</div>
<div class="col-xs-6 col-sm-6">
<div class="row elements1">
<div class="col-xs-4 col-sm-4 first">.NET</div>
<div class="col-xs-4 col-sm-4 second">
<!-- <img src="<?php echo Yii::app()->getBaseUrl(); ?>/images/pages/svu/img_svu_android.png" alt="" /> -->
</div>
<div class="col-xs-4 col-sm-4 third">ANDROID</div>
</div>
</div>
</div>
</div>
<div class="col-xs-3"></div>
</div>
<div class ="row bg-white">
<div class="col-xs-3"></div>
<div class="col-xs-6">
<div class="row">
<div class ="col-xs-2 bg-img2">
<!-- <img src="<?php echo Yii::app()->getBaseUrl(); ?>/images/pages/svu/img_svu_ios.png" alt="" /> -->
</div>
<div class ="col-xs-10 elements2">
<div class="row row1">
<div class="col-sm-2 elem1">IOS</div>
<div class="col-sm-2 elem2">
<!-- <img src="<?php echo Yii::app()->getBaseUrl(); ?>/images/pages/svu/img_svu_pm.png" alt="" /> -->
</div>
<div class="col-sm-2 elem3">PM</div>
<div class="col-sm-2 elem4">C/C++</div>
<div class="col-sm-2 elem5">DataBase</div>
</div>
<div class="row row2">
<div class="col-sm-2 elem1">DevOps</div>
<div class="col-sm-2 elem2">Java</div>
<div class="col-sm-2 elem3">QA</div>
<div class="col-sm-2 elem4">
<!-- <img src="<?php echo Yii::app()->getBaseUrl(); ?>/images/pages/svu/img_svu_qa.png" alt="" /> -->
</div>
<div class="col-sm-2 elem5">WEB</div>
</div>
</div>
</div>
</div>
<div class="col-xs-3"></div>
</div>
</div>

You can give both container and container-fluid class in your div. e.g <div class="container-fluid container">. Maybe it'll do work for you.