How to adjust font size ord font alignment in col-md bootstrap

Issue

I am a beginner but usually I somehow find a solution to my problem. But not this time.
I managed to code a box: Centered in the box there is the text "#01 Grunderna". This box looks nice.

#01 GRUNDERNA

However, when the text in the middle of the box is longer like "#02 Profil & Scensamlingar" then the text is overwrapping the box. Moreover, the text is not centered vertically.

#02 PROFIL & SCENSAMLING

Is there a way to be able to adjust this? I tried with font-size but it is still overwrapping the box, it is still not adjusted to the middle and the space between the lines stands the same.

Sorry for my lack of knowledge. Would be awesome to get some help.

By the way: Here you can see the mess

enter image description here

Solution

Remove the css rule padding: 1rem 1rem; from .home-service a. And add below css rule:

.home-service {
  display: flex;
  align-items: center;
  justify-content: center;
}

Links in those boxes will be justified vertically and horizontally.

If you are using bootstrap, you may make use of the classes it provides. Check this page: https://getbootstrap.com/docs/5.0/utilities/flex/ especially "Justify content" and "Align items" sections. If you want to dig deeper about how flex in css works, check this link https://css-tricks.com/snippets/css/a-guide-to-flexbox/ then bookmark it for future use:)

Answered By – burkay

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published