CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Diego Mengue
Diego Mengue

Reputation: 69

Centering an image using bootstrap

I'm trying to center an image using boostrap's fluid-container, img-responsive and center-block (and margin: 0 auto; CSS) but I haven't been succesful so far.

The code I'm trying to implement is as follows:

<div class='container-fluid'>
 <div class='row'>
  <img src="https://www.cartacapital.com.br/mais-admiradas/o-colecionador-de-
  empresas-5838.html/paulo-lemann/@@images/4dd0c0a1-9ae4-4fd2-8724-
  e59867bb14c1.jpeg" alt="Jorge Paulo Lemann" class="img-responsive center-block">
 </div>
</div>

But it doesn't center the image. Any help?

Thanks!

EDIT: I'm using codepen: https://codepen.io/diegomengue/pen/WOwJYP. Is there a possibility codepen is messing something up?

Upvotes: 1

Views: 137

Answers (2)

Johannes
Johannes

Reputation: 67778

Since row has display: flex here, you can add

.row {
  justify-content: center;
}

to center the image

https://codepen.io/anon/pen/EXgxgo

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53709

You loaded bootstrap 4 in the pen, and .center-block is a bootstrap 3 feature. Add bootstrap 3 to the pen instead. https://codepen.io/mcoker/pen/qjaBNK

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
 <div class='container-fluid'>
  
  <div class='row'>
  
  <img src="https://www.cartacapital.com.br/mais-admiradas/o-colecionador-de-empresas-5838.html/paulo-lemann/@@images/4dd0c0a1-9ae4-4fd2-8724-e59867bb14c1.jpeg" alt="Jorge Paulo Lemann" class="img-responsive center-block" >
   </div>
 </div>
</body>

Upvotes: 1

Related Questions