image in bootstrap column has space on right side

Question

EDIT: This was my issue bootstrap 4 center-block unable to center

I cannot for the life of me figure out how to properly align this image inside a bootstrap column. You can see how there is a big whitespace gap to the right of the image between the border of the image and the padding for the div column the image is in.

I have a row with 3 columns. I want the 2 images to be properly aligned in the page. this would be more easily accomplished if this awkward whitespace did not appear.

For now, I've added the below as a (not-so) quick fix.

.right-img {
    padding-left: 45px;
}

I have tried several avenues including

class="center-block"

and removing

float-left

from the show-image class and flexbox and display-block and all the align properties and ensuring I have a container above the row.

I would really appreciate it if someone could help with the issue.

Here is the HTML:

<div class="container">
    <div class="row">
      <div class="col-lg-5 show-image">
        <img class="img-responsive rounded head-img" src="{{ url_for('static', filename='#') }}" alt="Image Failed to Load">
        <div class="hover-buttons">
          <button type="submit" class="btn btn-danger btn-sm">Why Join?</button>
          <button type="submit" class="btn btn-danger btn-sm">How It Works</button>
        </div>
      </div>
      <div class="col-lg-2" id="with-container">
        <h1 class="my-4 text-center">WITH</h1>
      </div>
      <div class="col-lg-5 show-image right-img">
        <img class="img-fluid rounded head-img" src="{{url_for('static', filename='#')}}" alt="Image Failed to Load">
        <div class="hover-buttons left-buttons">
          <button type="submit" class="btn btn-danger btn-sm">Why Join?</button>
          <button type="submit" class="btn btn-danger btn-sm">How It Works</button>
        </div>
      </div>
    </div>
  </div>

And here is the styling:

    div {
    border: 1px dashed red;
}

.head-img {
    width:  400px;
    height: 287px;
}

#with-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.show-image {
    position: relative;
    float: left;
}

div.show-image:hover img{
    opacity:0.5;
}

div.show-image:hover .hover-buttons {
    display: inline-block;
}

.hover-buttons {
    position: absolute;
    display:none;
}

div.show-image .hover-buttons {
    top: 75%;
    left: 12%;
}

div.show-image .left-buttons {
    top: 75%;
    left: 19%;
}

danb · Accepted Answer · 2017-11-21T10:12:18.900

3

You could apply the following bootstrap helper class to the parent div:

text-center

Which should horizontally align the image for you. The full div class structure should look like the following:

<div class="col-lg-5 show-image text-center">

Further reading: https://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment

edited Nov 21 '17 at 10:12

answered Nov 21 '17 at 10:08

danb

346
2
7

would you be able to add any commentary as to why "text-center" works an d none of the others do? "center-block" for instance seems like an appropriate fix. I don't understand the distinction. – Ryan Skene Nov 21 '17 at 10:12
Could you tell me which bootstrap version you are using? – danb Nov 21 '17 at 10:17
1

oh boy ... im using 4 ... center-block no longer utilized in 4. – Ryan Skene Nov 21 '17 at 10:19
As you've found out, to center images in Bootstrap 4 - you either need to apply `text-center` to the parent, or apply `mx-auto d-block` to the image itself. https://getbootstrap.com/docs/4.0/content/images/ – danb Nov 21 '17 at 10:24

image in bootstrap column has space on right side

1 Answers1