Question 226988 in Html Question posted in
Some basic documentation can be found here.

Html – Positioning text center with bootstrap 5 flex

In these divs:

<div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
            <a href="#" title="Falazóhabarcs" class="main_category d-flex justify-content-between align-items-center radius p-3">
                <div>
                    <i class="fa fa-th-list me-2"></i>Gépi alapvakolat
                </div>
                <div>
                    <i class="fa fa-chevron-right"></i>
                </div>
            </a>
        </div>

How can i align the text correctly center, when the screen is small? I mean it like on my photo below.

Or i should use 3 div in the hyperlink, and put the text into the 2nd div?

On the picture, the 3rd photo is mine, with a red X.

Click here for image

Tags:

3

Answers


  1. 0

    To align the text correctly in the center when the screen is small, you can use Flexbox or Bootstrap’s utility classes. In this case, using Bootstrap’s utility classes would be simpler and more consistent with your existing code. You can add text-center class to the outer to center-align the text inside the hyperlink. Additionally, if you want to center-align the icon, you can add d-flex justify-content-center classes to the first inner .

    <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="#" title="Falazóhabarcs" class="main_category d-flex justify-content-between align-items-center radius p-3">
        <div class="d-flex justify-content-center align-items-center">
            <i class="fa fa-th-list me-2"></i>Gépi alapvakolat
        </div>
        <div>
            <i class="fa fa-chevron-right"></i>
        </div>
    </a>
</div>
    Login or Signup to reply.
  2. 0

    Add "d-flex align-items-center" classes at the parent tag of the icon & text(Left side)

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
            <a href="#" title="Falazóhabarcs" class="main_category text-dark border text-decoration-none rounded-2 d-flex justify-content-between align-items-center radius p-3">
                <div class="d-flex align-items-center">
                    <i class="fa fa-3x fa-th-list me-2"></i>Gépi alapvakolat
                </div>
                <div>
                    <i class="fa fa-chevron-right"></i>
                </div>
            </a>
        </div>
    Login or Signup to reply.
  3. 0 
    @media only screen and (max-width: 600px) {
  .text-font {font-size: 10px;}
}
    <div class ="text-font">
      <i class="fa fa-th-list me-2"></i>Gépi alapvakolat
</div>

    reduce fonts size of Gépi alapvakolat when mobile view by above media query

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search