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

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

.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/[email protected]/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

CodePudding user response：

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/[email protected]/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>

CodePudding user response：

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/[email protected]/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>