HTML Bootstrap Center Image

Code Feedback
1

I’m doing my tribute project here and I need to format my paragraphs.

When I created de div class container, my content was stuck on the left side, so I follow this answer and I managed to fix de title and the text.

But I need the image to be centered under the title.

How can I do this? What is the best way?

2

Maybe try adding the class img-fluid to your image element. Since your experimenting bootstrap maybe you’ll want some responsiveness.

<img class="text-center img-fluid" src="https://raw.githubusercontent.com/nanquim/freeCodeCampNanquim/master/pauloFreire1.png" alt="Paulo Freire">
1 Like
3

You can give the image the class.

class="col-sm-12"

It should fill and match the content of your page, I’ve made tests and it went full screen and bigger, you can always use css to adjust the size of the image as your liking :slight_smile:

1 Like
4

hey, thanks

This centers the image because makes her larger… Is there a way I can keep the normal size?

5

Thanks

It looks like “text-center” was doing nothing… And img-fluid doesn’t work wither, can you tell me why?

<!--Imagem -->
<div class="span12">
   <h1 class="text-center">Tribute for Paulo Freire</h1>
  <img class="img-fluid" src="https://raw.githubusercontent.com/nanquim/freeCodeCampNanquim/master/pauloFreire1.png" alt="Paulo Freire">

</div>
<!--Texto-->
<div class="span12">
  <!--Inserir outra citação aqui-->
6

You could do this, it is going to transform the image into a block then center it

<img style="display:block; margin-left:auto; margin-right:auto;" src="https://raw.githubusercontent.com/nanquim/freeCodeCampNanquim/master/pauloFreire1.png" alt="Paulo Freire">

1 Like
7

I’ve tried these 3 ways, it makes no difference… Nothing changes:

<img class="text-center img-fluid" src="https://raw.githubusercontent.com/nanquim/freeCodeCampNanquim/master/pauloFreire1.png" alt="Paulo Freire">

<img class="img-fluid" src="https://raw.githubusercontent.com/nanquim/freeCodeCampNanquim/master/pauloFreire1.png" alt="Paulo Freire">

<img class="text-center" src="https://raw.githubusercontent.com/nanquim/freeCodeCampNanquim/master/pauloFreire1.png" alt="Paulo Freire">

8

You could try wrapping you img element in div :

<div class="text-center">
    <img..... 
</div>
1 Like
9

Thank yout

I rewritten everything, I shouldn’t be using span… new code (working):

<div class="row">
    <!-- Título -->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h1 class="text-center">Tribute to Paulo Freire</h1></div>
    <!-- Imagem -->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <img class="img-responsive img-rounded img-top-style" src="https://raw.githubusercontent.com/nanquim/freeCodeCampNanquim/master/pauloFreire1.png" alt="Paulo Freire">
    </div>
    
    <!-- Texto -->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
1 Like