How to center the object with lightbox using bootsrap?

Question

I use Polo - Responsive Multi-Purpose HTML5 Template. I can't center my object

I did try many solutions, and nothing work for me still on left side.

See screenshot

<!--Single image lightbox -->
<div class="hr-title hr-long center"><abbr>Single image lightbox</abbr> </div>
<div class="row col-no-margin">


  <div class="col-md-4">
    <div class="grid-item">
      <div class="grid-item-wrap">
        <div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/300x200" /> </div>
        <div class="grid-description">
          <a title="Paper Pouch!" data-lightbox="image" href="https://via.placeholder.com/300x200" class="btn btn-light btn-rounded">Zoom</a>
        </div>
      </div>
    </div>
  </div>
  <!--Single image lightbox -->
  <hr class="space">
</div>

Possible duplicate of [How can I center an image in Bootstrap?](https://stackoverflow.com/questions/43226511/how-can-i-center-an-image-in-bootstrap) — codingbbq, Feb 13 '19 at 03:24
**DO NOT post images of code, data, error messages, etc.** - copy or type the text into the question. [ask] — Rob, Mar 15 '20 at 11:48

score 0 · Answer 1 · edited Feb 14 '19 at 16:39

0

Add below CSS to center align the image

img {
  margin-left: 50%;
  transform: translateX(-50%);
}

<!--Single image lightbox -->
<div class="hr-title hr-long center"><abbr>Single image lightbox</abbr> </div>
<div class="row col-no-margin">


  <div class="col-md-4">
    <div class="grid-item">
      <div class="grid-item-wrap">
        <div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/600x400" /> </div>
        <div class="grid-description">
          <a title="Paper Pouch!" data-lightbox="image" href="images/mockup/1.jpg" class="btn btn-light btn-rounded">Zoom</a>
        </div>
      </div>
    </div>
  </div>
</div>
<!--Single image lightbox -->
<hr class="space">

edited Feb 14 '19 at 16:39

Daut

2,537
1
19
32

answered Feb 13 '19 at 04:59

Xenio Gracias

2,728
1
9
16

That would center the image in the `div` but it would not solve the issue that the whole div is on the left. – Daut Feb 13 '19 at 08:17
@ Daut he never mentioned that he wants the whole div on the center. before down voting you should read the question 1st. He only said `object` and object could me anything. so please make it 0. – Xenio Gracias Feb 14 '19 at 04:53
Edit your answer to say that, if you give a particular solution explain it :) – Daut Feb 14 '19 at 08:02

Amogh Hegde · Answer 2 · 2019-02-13T07:59:20.097

-1

Instead of <div class="col-md-4">

Do the following:

<div class="col-md-12 text-center">

.text-center is the bootstrap class which will center the image with respect to the column

.col-md-12 will imply there is only 1 column in the entire row

edited Feb 13 '19 at 07:59

answered Feb 13 '19 at 05:44

Amogh Hegde

392
3
10

could you provide a JS fiddle with your problem and give more data instead of just down voting an answer!? – Amogh Hegde Feb 13 '19 at 08:11
I dont think that making the div full width makes any difference especially since it contains only 1 column which he wants to be centered. Atleast with my solution you dont need to add additional classes unlike your own to support mobile screens. Much more readable and understandable too! – Amogh Hegde Feb 13 '19 at 08:59

Daut · Accepted Answer · 2019-02-14T09:02:24.927

This is not the only solution, this is a suggestion :)

You can just use class offset-md-4 combined with text-center and it should work.

Also think about mobile. I have added offset-2 and col-8 to make sure it looks good on small screen too.

img {
  max-width: 100%;
  margin: auto;
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="hr-title hr-long center">
  <abbr>Single image lightbox</abbr>
</div>
<div class="container">
  <div class="row col-no-margin">
    <div class="offset-2 col-8 offset-md-4 col-md-4 text-center">
      <div class="grid-item">
        <div class="grid-item-wrap">
          <div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/300x200" /></div>
          <div class="grid-description">
            <a title="Paper Pouch!" data-lightbox="image" href="https://via.placeholder.com/300x200" class="btn btn-light btn-rounded">Zoom</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--Single image lightbox -->
<hr class="space">

How to center the object with lightbox using bootsrap?

3 Answers3