how can i show this picture in center in bootstrap?

Question

how can i show this picture in center in bootstrap? i'm new to bootstrap. thanks.

<div class="form-row">
      <div class="form-group col-md-8 mx-auto"  id="fotodiv">
        <img src="img/lgo.png" class="img-fluid" >
      </div>

I think you can add the classes "d-block" and "mx-auto" to the img element. — Dexter0015, Sep 03 '20 at 13:56
Follow this ans https://stackoverflow.com/questions/10879955/how-to-align-an-image-dead-center-with-bootstrap. Happy Coding! — CodeHub, Sep 03 '20 at 14:05

score 1 · Answer 1 · answered Sep 03 '20 at 14:00

1

Maybe try. It's good for centering content.

.form-group {
    display: grid;
    place-items: center;
  }

answered Sep 03 '20 at 14:00

KamilCz

93
7

Rayees AC · Accepted Answer · 2020-09-03T14:14:16.957

Horizontal alignment

Simply add text-center

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-row">
    <div class="form-group col-md-8 mx-auto text-center"  id="fotodiv">
      <img src="https://i.stack.imgur.com/w0R2W.png" class="img-fluid" alt="oppo">
    </div>
<div>

Both vertical alignment and horizontal alignment

d-flex align-items-center justify-content-center

#fotodiv{
  height:250px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-row">
    <div class="form-group col-md-8 d-flex align-items-center justify-content-center"  id="fotodiv">
      <img src="https://i.stack.imgur.com/w0R2W.png" class="img-fluid" alt="oppo">
    </div>
<div>

If i'm not mistaken, OP is asking for vertical alignment – Anis R. Sep 03 '20 at 14:05 — Anis R., Sep 03 '20 at 14:05

score 0 · Answer 3 · answered Sep 03 '20 at 14:04

You can use your containing div as a flexbox, with flex-direction: column and justify-content: center for vertical alignment:

#fotodiv {
  display: flex;
  height: 100vh; /*or 100% of your outer container*/
  flex-direction: column;
  align-items: center; /* horizontal alignment */
  justify-content: center; /* vertical alignment */
}

img {
  /* just to see the image's borders */
  border: 1px solid red;
}

<div class="form-row">
    <div class="form-group col-md-8 mx-auto"  id="fotodiv">
    <img src="img/lgo.png" class="img-fluid" >
</div>

how can i show this picture in center in bootstrap?

3 Answers3