CODEWITHSUNDEEP
cssangulartwitter-bootstrap
Steven
Steven

Reputation: 75

Image Not Aligning to Center in Bootstrap Row

I used Bootstrap grid to centre the position of the 4 images in Angular. The images align perfectly to the centre in the row when I placed them within the same HTML sheet. However, if I placed them in a different HTML sheet, the 4 images are not exactly positioned in the centre, as I notice they are slightly off to the left.

To summarise, this works (./home.component.html):

<div class="container">

    <p class="h2-responsive itemsTitle">Items with free shipping</p>
    <hr>
    <div class="row">
        <div class="col-sm">
          <img class="itemCard" src="https://images.unsplash.com/photo-1505429155379-441cc7a574f7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0ddea5332a8ab2d09cf5eec6a57d3f9f&auto=format&fit=crop&w=334&q=80">
        </div>
        <div class="col-sm">
          <img class="itemCard" src="https://images.unsplash.com/photo-1505429155379-441cc7a574f7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0ddea5332a8ab2d09cf5eec6a57d3f9f&auto=format&fit=crop&w=334&q=80">
        </div>
        <div class="col-sm">
          <img class="itemCard" src="https://images.unsplash.com/photo-1505429155379-441cc7a574f7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0ddea5332a8ab2d09cf5eec6a57d3f9f&auto=format&fit=crop&w=334&q=80">
        </div>
        <div class="col-sm">
          <img class="itemCard" src="https://images.unsplash.com/photo-1505429155379-441cc7a574f7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0ddea5332a8ab2d09cf5eec6a57d3f9f&auto=format&fit=crop&w=334&q=80">
        </div>
    </div>

</div>

But this doesn't (./home.component.html):

<div class="container">

    <p class="h2-responsive itemsTitle">Items with free shipping</p>
    <hr>
    <div class="row">
        <app-home-item></app-home-item>
        <app-home-item></app-home-item>
        <app-home-item></app-home-item>
        <app-home-item></app-home-item>
    </div>

</div>

(./home-item.component.html):

<div class="col-sm">
    <img class="itemCard" src="https://images.unsplash.com/photo-1505429155379-441cc7a574f7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0ddea5332a8ab2d09cf5eec6a57d3f9f&auto=format&fit=crop&w=334&q=80">
</div>

Here's what happens. The circled part shows that the images are slightly off to the left, which doesn't happen when I use the first example code above.

enter image description here

I am not too sure where it goes wrong. All the components are imported and declared in app.module. The bootstrap link is placed in the index.html as well.

CSS (in styles.css):

.itemsTitle {
  margin-top: 16px;
}

.itemCard {
  width: 15rem;
}

Upvotes: 0

Views: 232

Answers (1)

Fecosos
Fecosos

Reputation: 974

The problem is with the width of col inside app-home-item so in that component add flex: 1; to the wrapper

Upvotes: 1

Related Questions