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;
}

<divclass="bottles"><imgclass="bottle"src="https://via.placeholder.com/321x620"><imgclass="bottle"src="https://via.placeholder.com/321x620"><imgclass="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><divclass="container"><divclass="row"><divclass="col-4 a1"><imgclass="img-fluid"src="https://via.placeholder.com/321x620"alt="" /></div><divclass="col-4 a2"><imgclass="img-fluid"src="https://via.placeholder.com/321x620"alt="" /></div><divclass="col-4 a3"><imgclass="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 -40px0 -40px;
  z-index: 2;
}

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

<linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"crossorigin="anonymous"><section><divclass="container"><divclass="row"><divclass="col-4"><imgclass="img-fluid"src="https://cdn.pixabay.com/photo/2018/08/21/23/29/fog-3622519_960_720.jpg"alt="" /></div><divclass="col-4"><imgclass="img-fluid"src="https://cdn.pixabay.com/photo/2012/08/27/14/19/evening-55067_960_720.png"alt="" /></div><divclass="col-4"><imgclass="img-fluid"src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"alt="" /></div></div></div></section><scriptsrc="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"crossorigin="anonymous"></script><scriptsrc="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

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