CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Burak Fırçasıgüzel
Burak Fırçasıgüzel

Reputation: 45

how can i show this picture in center in bootstrap?

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

enter image description here

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

Upvotes: 1

Views: 52

Answers (3)

Rayees AC
Rayees AC

Reputation: 4659

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.sstatic.net/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.sstatic.net/w0R2W.png" class="img-fluid" alt="oppo">
    </div>
<div>

Upvotes: 1

Anis R.
Anis R.

Reputation: 6922

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>

Upvotes: 0

KamilCz
KamilCz

Reputation: 93

Maybe try. It's good for centering content.

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

Upvotes: 1

Related Questions