How to center a title in the header using class attributes?

Asked

Viewed 2,236 times

0

I started to study Bootstrap now and I’m having trouble understanding and modifying the codes in CSS of the folder I downloaded on their website, so it would be easier to edit on the HTML

I need to center the text REGISTER, but I’m not getting it at all and in the files of CSS, several quotations are made about the class and it seems that it is overwritten several times, so if I mess with one, I need to change the others as well.

Site usando bootstrap

<header class="masthead clearfix navbar navbar-dark bg-dark">
    <div class="logo">
        <img src="images/drawing2.png" width="9%"/>
    </div>

    <div class="inner">
        <div class="nav justify-content-center m-auto">
            <h3 class="masthead-brand"> CADASTRE-SE </h3>
        </div>
    </div>
</header>
  • What version of Bootstrap you are using ?

  • I am using the version "bootstrap-4.0.0-beta".

1 answer

0


You can center text using the class text-center just inform her in the attribute class tag H3 and in the attribute class tag img inform img-fluid and take out the attribute width, also create the Stylesheet:

<style>
img {
    max-width: 100%; /* largura máxima de 100% */
}
</style>

img {
  max-width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
<header class="masthead clearfix navbar navbar-dark bg-dark">
    <div class="col-xs-12 col-md-2 logo">
        <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" class="img-fluid" />
    </div>

    <div class="col-xs-12 col-md-8 inner">
        <div class="nav justify-content-center m-auto">
            <h3 class="masthead-brand text-center"> CADASTRE-SE </h3>
        </div>
    </div>
</header>

Click on Página toda for better viewing.

References

  • Still, it didn’t work. Does having the image in the upper left corner interfere with something?

  • Edith your question and put the CSS that you created, not from Bootstrap.

  • So I didn’t create CSS none.

  • Yes, now I tested here, the image interferes, the correct is you create columns

  • See now how my answer turned out.

  • Thanks, I definitely don’t know how to use text formatting from here.

  • Do the Tour, can also access the Help Center.

  • There is a problem, when moving the <img> tag to try to resize the logo, the form icons also have their size changed.

  • You can remove the attribute class image and place width="9% or use Font Awesome for icons, it is preferable to use Font Awesome.

Show 4 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.