html – Vertically align different-sized logo images in bootstrap 4

html – Vertically align different-sized logo images in bootstrap 4

There are a few changes you need to make to get this to work:

1. You can use the Bootstrap classes align-items-center to vertically centre the columns, and text-center to centre them horizontally:

<div class=row align-items-center text-center>

2. Dont use a fixed height for the columns, as this affects the Bootstrap flex layout that is doing the centring:

.client-logo-padding {
  /* height: 70px; */    /* <-- Remove this */
  padding-top:15px;      /* use padding to add space between the logos */
  padding-bottom:15px;
}

3. You have an error in the height for the designmodo logo – you have height: 179px; which is obviously going to affect the grid layout. Ive changed that to height: 27px; – the actual height of the image.

Working Example: FYI I have changed the cols to col-sm-4 to see the result in the snippet

.client-logo-padding {
  padding-top:15px;  
  padding-bottom:15px;
}

.client-logo-padding a{
  display: inline-block;
  background-repeat: no-repeat; 
  margin: 0px auto;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#designmodo {
  width: 163px;
  height: 27px;
  background-image: url(https://i.imgur.com/LtXWVvP.png);

}

#designmodo:hover {
  background-image: url(/assets/images/logo/designmodo-hover.png);
}

#firstwebdesigner {
  width: 94px;
  height: 48px;
  background-image: url(https://i.imgur.com/zdtka18.png);
}

#firstwebdesigner:hover {
  background-image: url(https://i.imgur.com/cufuXaU.png);
}

#codegeekz {
  width: 146px;
  height: 27px;
  background-image: url(https://i.imgur.com/x13IZ8w.png);
}

#codegeekz:hover {
  background-image: url(/assets/images/logo/codegeekz-hover.png);
}

#webdesignerdepot {
  width: 94px;
  height: 48px;
  background-image: url(https://i.imgur.com/spweqh2.png);
}

#webdesignerdepot:hover {
  background-image: url(/assets/images/logo/webdesignerdepot-hover.png);
}

#speckyboy {
  width: 152px;
  height: 35px;
  background-image: url(https://i.imgur.com/7tI9oLb.png);
  background-repeat: no-repeat;
}

#speckyboy:hover {
  background-image: url(https://i.imgur.com/7tI9oLb.png);
}

#pageresource {
  width: 152px;
  height: 26px;
  background-image: url(https://i.imgur.com/1AJZ9YD.png);

}

#pageresource:hover {
  background-image: url(/assets/images/logo/pageresource-hover.png);
}

.box {
  width: 600px;
  border: 2px solid black;
  padding: 60px;
}
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css>
<div class=container box>
  <div class=row align-items-center text-center>
    <div class=col-sm-4 client-logo-padding>
      <a href= target=_blank id=designmodo></a>
    </div>

    <div class=col-sm-4 client-logo-padding>
      <a href= target=_blank id=speckyboy></a>
    </div>

    <div class=col-sm-4 client-logo-padding>
      <a href= target=_blank id=pageresource></a>
    </div>

    <div class=col-sm-4 client-logo-padding>
      <a href= target=_blank id=firstwebdesigner></a>
    </div>
    <div class=col-sm-4 client-logo-padding>
      <a href= target=_blank id=codegeekz></a>
    </div>

    <div class=col-sm-4 client-logo-padding>
      <a href= target=_blank id=webdesignerdepot></a>
    </div>

  </div>

</div>

Other Notes

You do not need to repeat the same CSS for each logo – instead you can add the common CSS to a new rule- this makes it much easier to manage. e.g.

.client-logo-padding a{
    display: inline-block;
    margin: 0px auto;
    /* etc... */
}

If the logo columns must have a height of 70px, you can do it like this:

  • delete the .client-logo-padding CSS rule
  • remove the height from the CSS for all logos
  • add the 70px height to the new .client-logo-padding a rule, and vertically centre the image in it:
    .client-logo-padding a{
        height: 70px;                 /* Set the height */
        background-position: center;  /* Vertically centre the image in the height */
        /* Rest of CSS... */
    }
<div class=d-flex flex-column>
    <div class=>Item-1</div>
    <div class=>Item-2</div>
    <div class=>Item-3</div>
</div>

html – Vertically align different-sized logo images in bootstrap 4

Leave a Reply

Your email address will not be published.