Handling glyphicon Bootstrap

Asked

Viewed 262 times

0

DuvidaI am using Bootstrap version 3, and I would like suggestions as I could customize this Glyph, I tried several ways to align this to the text, but he insists on staying a little above the line of text.

I’m wearing a jumbotron with an alert, and I’d like to attach this glyphicon to the message. But using the pre-defined Bootstrap classes, this icon loses alignment, as you could manipulate css to solve?

The link to the bootstrap documentation: https://getbootstrap.com/docs/3.3/components/#alerts

html css bootstrap

  • I don’t understand what your problem is and what its relationship to programming is. It could be more specific?

  • Sorry, I need to manipulate the css to align the glyphicon because it is misaligned with the text, I would like help in CSS development to be able to align it. In this forum I can only post JS and PHP?

  • of course you can post CSS, alignment, style, UX etc. Only you need to make it clear what was your difficulty and your attempts. For example, there is no code in the question, neither HTML, nor JS, nor PHP, nor CSS. There’s only one image, which from what I understand indicates the current status of your code and discontent with the outcome

  • My editing in your question was an attempt to format the doubt so that it is more attractive to the next reader. I also removed irrelevant details (such as greetings and the phrase "need help"), making it cleaner. Take this issue as a suggestion, you can reverse the state of the question if you think I exaggerated or changed the meaning of the question

  • 1

    Got it, thanks for your attention from now on.= ) I did not attach the classes used because they are the Bootstrap classes.

  • @Higorvieira I always go through this when I’m using a font smaller or larger than the one suggested by bootstrap

Show 1 more comment

1 answer

0


I think the ideal is you create a css to fix this, because I think the boostrap itself does not have this correction that you seek.

Try something like this for your CSS:

.vertical-align {
display: flex;
align-items: center;
flex-direction: row;
}

And then use it in your code:

   <h2 class="alert alert-danger vertical-align" role="alert">
    <span class="glyphicon glyphicon-info-sign"></span> Informações Importantes:
  </h2>

Browser other questions tagged html css bootstrap

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