Overlap Columns In Bootstrap 4

I have one row inside which I have three columns like this: I would like the three columns to overlap and create and illusion like the the following: Where each bottle will repre

Solution 1:

If you want to overlap all the time, instead of using grid you could use negative margins instead:

.bottle {
  width: 100px;
  height: auto;
  border: 1px solid black;
}

.bottles .bottle:first-child {
  margin-right: -30px;
}

.bottles .bottle:last-child {
  position: relative;
  margin-left: -30px;
  z-index: -1;
}

<div class="bottles">
  <img class="bottle" src="https://via.placeholder.com/321x620">
  <img class="bottle" src="https://via.placeholder.com/321x620">
  <img class="bottle" src="https://via.placeholder.com/321x620">
</div>

I resized images to fit inside snippet preview, but you will need only to play with negative margins to achieve effect you want.

Solution 2:

I think this is what you're looking for from what I understood. I created a new class for each column and shifted it using the margins. You can adjust the margin % to fit your desired position.

<style>
.a1 {
    margin-left: 15%;
    position: absolute;
}
.a2 {
    margin-left: 30%;
    margin-top: 5%;
    position: absolute;
    z-index: 3;
}
.a3 {
    margin-left: 45%;
    position: absolute;
}
</style>

<section>
    <div class="container">
        <div class="row">
            <div class="col-4 a1">
                <img class="img-fluid" src="https://via.placeholder.com/321x620" alt="" />
            </div>
            <div class="col-4 a2">
                <img class="img-fluid" src="https://via.placeholder.com/321x620" alt="" />
            </div>
            <div class="col-4 a3">
                <img class="img-fluid" src="https://via.placeholder.com/321x620" alt="" />
            </div>
        </div>
    </div>
</section>

Solution 3:

Do you mean something like the following:

.col-4 {
  position: relative;
}

.col-4:nth-child(1), .col-4:nth-child(3) {
  z-index: 1;
}

.col-4:nth-child(2) {
  margin: 0 -40px 0 -40px;
  z-index: 2;
}

.img-fluid {
  width: 321px;
  height: 620px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<section>
  <div class="container">
    <div class="row">
      <div class="col-4">
        <img class="img-fluid" src="https://cdn.pixabay.com/photo/2018/08/21/23/29/fog-3622519_960_720.jpg" alt="" />
      </div>
      <div class="col-4">
        <img class="img-fluid" src="https://cdn.pixabay.com/photo/2012/08/27/14/19/evening-55067_960_720.png" alt="" />
      </div>
      <div class="col-4">
        <img class="img-fluid" src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg" alt="" />
      </div>
    </div>
  </div>
</section>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Solution 4:

Instead of using "col-4" use "col-sm-4" or here is the rule for column click

<link  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <section>
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <img class="img-fluid" src="https://via.placeholder.com/321x620" alt="" />
                </div>
                <div class="col-sm-4">
                    <img class="img-fluid" src="https://via.placeholder.com/321x620" alt="" />
                </div>
                <div class="col-sm-4">
                    <img class="img-fluid" src="https://via.placeholder.com/321x620" alt="" />
                </div>
            </div>
        </div>
    </section>