bootstrap 4 vertical centre and positioning of div

Question

I'm trying to put some cards in a container with a parallax background effect. But while doing so, I cannot make the cards vertically centered. the row on which they are at is coming at the starting of the div. Also I want to do the container div to be relatively positioned so that the cards that are absolutely positioned will be relative to the container they're within instead of the entire page. In mobile view the cards are coming out of the div and overlapping other elements in the page. Have a look at my code below:

HTML

<div class="container-fluid parallax">
    <div class="row justify-content-center">
        <div class="col-lg-3 col-md-4 col-sm-8">
            <div class="hovereffect">
                <img class="img-responsive" src="assets/images/antoine-barres.jpg" alt="" width="350" height="200">
                <div class="overlay">
                   <h2>Hover effect 1</h2>
                   <a class="info" href="#">link here</a>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-8">
            <div class="hovereffect">
                <img class="img-responsive" src="assets/images/antoine-barres.jpg" alt="" width="350" height="200">
                <div class="overlay">
                   <h2>Hover effect 1</h2>
                   <a class="info" href="#">link here</a>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-8">
            <div class="hovereffect">
                <img class="img-responsive" src="assets/images/antoine-barres.jpg" alt="" width="350" height="200">
                <div class="overlay">
                   <h2>Hover effect 1</h2>
                   <a class="info" href="#">link here</a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

 .parallax {   
    background-image: url("/assets/images/home_services.jpg");
    min-height: 500px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .hovereffect {
    width:100%;
    height:100%;
    float:left;
    overflow:hidden;
    position:relative;
    text-align:center;
    cursor:default;
    }

    .hovereffect .overlay {
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
    top:0;
    left:0;
    opacity:0;
    background-color:rgba(0,0,0,0.5);
    -webkit-transition:all .4s ease-in-out;
    transition:all .4s ease-in-out
    }

    .hovereffect img {
    display:block;
    position:relative;
    -webkit-transition:all .4s linear;
    transition:all .4s linear;
    }

    .hovereffect h2 {
    text-transform:uppercase;
    color:#fff;
    text-align:center;
    position:relative;
    font-size:17px;
    background:rgba(0,0,0,0.6);
    -webkit-transform:translatey(-100px);
    -ms-transform:translatey(-100px);
    transform:translatey(-100px);
    -webkit-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
    padding:10px;
    }

    .hovereffect a.info {
    text-decoration:none;
    display:inline-block;
    text-transform:uppercase;
    color:#fff;
    border:1px solid #fff;
    background-color:transparent;
    opacity:0;
    filter:alpha(opacity=0);
    -webkit-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
    margin:50px 0 0;
    padding:7px 14px;
    }

    .hovereffect a.info:hover {
    box-shadow:0 0 5px #fff;
    }

    .hovereffect:hover img {
    -ms-transform:scale(1.2);
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
    }

    .hovereffect:hover .overlay {
    opacity:1;
    filter:alpha(opacity=100);
    }

    .hovereffect:hover h2,.hovereffect:hover a.info {
    opacity:1;
    filter:alpha(opacity=100);
    -ms-transform:translatey(0);
    -webkit-transform:translatey(0);
    transform:translatey(0);
    }

    .hovereffect:hover a.info {
    -webkit-transition-delay:.2s;
    transition-delay:.2s;
    }

BlackWiCKED · Accepted Answer · 2020-02-22T02:43:22.997

My suggestion is to use flex, as the following example shows. Used most of your code, just added some background colors to make the elements visible without images.

.parallax {
  background-image: url("/assets/images/home_services.jpg");
  min-height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #ff0;
  position: relative;
}

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
  background-color: #f00;
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transform: translatey(-100px);
  -ms-transform: translatey(-100px);
  transform: translatey(-100px);
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  padding: 10px;
}

.hovereffect a.info {
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #fff;
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  margin: 50px 0 0;
  padding: 7px 14px;
}

.hovereffect a.info:hover {
  box-shadow: 0 0 5px #fff;
}

.hovereffect:hover img {
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.hovereffect:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
}

.hovereffect:hover h2,
.hovereffect:hover a.info {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-transform: translatey(0);
  -webkit-transform: translatey(0);
  transform: translatey(0);
}

.hovereffect:hover a.info {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid parallax d-flex">
  <div class="row justify-content-center align-items-center">
    <div class="col-3">
      <div class="hovereffect">
        <img class="img-responsive" src="assets/images/antoine-barres.jpg" alt="" width="350" height="200">
        <div class="overlay">
          <h2>Hover effect 1</h2>
          <a class="info" href="#">link here</a>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="hovereffect">
        <img class="img-responsive" src="assets/images/antoine-barres.jpg" alt="" width="350" height="200">
        <div class="overlay">
          <h2>Hover effect 1</h2>
          <a class="info" href="#">link here</a>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="hovereffect">
        <img class="img-responsive" src="assets/images/antoine-barres.jpg" alt="" width="350" height="200">
        <div class="overlay">
          <h2>Hover effect 1</h2>
          <a class="info" href="#">link here</a>
        </div>
      </div>
    </div>
  </div>
</div>

And if you'd like to avoid setting a specific height on your `.paralax`, try using flexbox on the parent of your `.container-fluid` — Artur, Feb 22 '20 at 02:23
Also make sure the col numbers adds up to 12 within the row. Now for col-sm you have 3 x 8, which causing a line break, and it just won't work. In my example I used col-sm-3, since it is aligned to center it has some margins left and right. — BlackWiCKED, Feb 22 '20 at 02:34
but while in small device view, the cards are still overlapping the next element which is outside the container-fluid — surjendu_dey, Feb 22 '20 at 02:41
Indeed, but there is a hard-coded 350px width for each column's image, which makes it hard to optimize for small screens. The fix image width should be removed, and the image should be stretched to match the column width. — BlackWiCKED, Feb 22 '20 at 02:46
For example `width=100% ` instead of `width=350`. But make sure you keep the aspect ratio. Remove the `height` property. — BlackWiCKED, Feb 22 '20 at 03:15
@BlackWiCKED I tried adding a separate class, as well as modifying the parallax-cell class by adding width and height to it, but it's not working as expected. — surjendu_dey, Feb 22 '20 at 04:04

score 0 · Answer 2 · answered Feb 22 '20 at 02:21

One solution would be to set a a height for a common container of these images and use flexbox to align items vertically. However, this is not super dry as a solution.

So, what you could do is take your .container-fluid's container, make it a flex with .d-flex and align them with align-items-center.

Here is some reference on bootstrap 4's flex utility classes.

bootstrap 4 vertical centre and positioning of div

2 Answers2