Text is not aligning center horizontally on Bootstrap v5.0-Twitter bootstrap

MunnaTripathi
May 9, 2021
279 views
2 votes
4 Answers

I am learning Bootstrap v5.0. I am trying to make a webpage for practicing Bootstrap. I am having an issue with it. Text is not aligning center horizontally. I have used align-items-center for centering but it is not working.

My Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
    <link rel="stylesheet" href="./styles.css">
    <title>FairBizz</title>
</head>
<body>
    <!-- ============================== Header 01 ============================== -->
    <div class="container-fluid" style="background: #f7f7fd;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <p>More then 25 years of experience in business! <a href="#" style="color: #08237e; font-weight: 500;">Privacy & Security</a> </p>
                </div>
                <div class="col-md-4 text-end">
                    <i class="fab fa-facebook-f mx-2"></i>
                    <i class="fab fa-twitter mx-2"></i>
                    <i class="fab fa-instagram mx-2"></i>
                    <i class="fab fa-google-plus-g mx-2"></i>
                    <i class="fab fa-behance mx-2"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- ============================== JavaScript ============================== -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>

Here is a image:

Here the text is seems pretty top side not center.

How can I do that? Help me please.

Thank you.

Answers

- TJ
- May 9, 2021 at 10:32 am
- 0 votes
0
Use the utility class called text-center:
```
<div class="col-md-8 text-center">
```
This will make the text centred within col-md-8
Login or Signup to reply.

Their docs said use text-center.

Edit: I thought you wanted both to center. I changed it back to col-md-8 and col-md-4 for both the columns and moved text-center to the first column.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
  <link rel="stylesheet" href="./styles.css">
  <title>FairBizz</title>
</head>

<body>
  <!-- ============================== Header 01 ============================== -->
  <div class="container-fluid" style="background: #f7f7fd;">
    <div class="container">
      <div class="row">
        <div class="col-md-8  text-center">
          <p>More then 25 years of experience in business! <a href="#" style="color: #08237e; font-weight: 500;">Privacy & Security</a> </p>
        </div>
        <div class="col-md-4 text-end">
          <i class="fab fa-facebook-f mx-2"></i>
          <i class="fab fa-twitter mx-2"></i>
          <i class="fab fa-instagram mx-2"></i>
          <i class="fab fa-google-plus-g mx-2"></i>
          <i class="fab fa-behance mx-2"></i>
        </div>
      </div>
    </div>
  </div>

  <!-- ============================== JavaScript ============================== -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>

</html>

It is because <p> tags have margin-bottom: 1rem; in bootstrap. Either remove the margin or remove the <p> tag. then add some padding to the row if you want some space.

<div class="row py-4 align-items-center">
    <div class="col-md-8">
        <p class="mb-0">
            More then 25 years of experience in business!
            <a href="#" style="color: #08237e; font-weight: 500"
                >Privacy & Security</a
            >
        </p>
    </div>
    <div class="col-md-4 text-end">
        <i class="fab fa-facebook-f mx-2"></i>
        <i class="fab fa-twitter mx-2"></i>
        <i class="fab fa-instagram mx-2"></i>
        <i class="fab fa-google-plus-g mx-2"></i>
        <i class="fab fa-behance mx-2"></i>
    </div>
</div>

<div class="row py-4 align-items-center">
    <div class="col-md-8">
        More then 25 years of experience in business!
        <a href="#" style="color: #08237e; font-weight: 500"
            >Privacy & Security</a
        >
    </div>
    <div class="col-md-4 text-end">
        <i class="fab fa-facebook-f mx-2"></i>
        <i class="fab fa-twitter mx-2"></i>
        <i class="fab fa-instagram mx-2"></i>
        <i class="fab fa-google-plus-g mx-2"></i>
        <i class="fab fa-behance mx-2"></i>
    </div>
</div>

I made these changes in your code..

Added class d-flex, text-center. Added margin-bottom:0 !important; to the <p> Tag..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
    <link rel="stylesheet" href="./styles.css">
    <title>FairBizz</title>
</head>
<body>
    <!-- ============================== Header 01 ============================== -->
    <div class="container-fluid" style="background: #f7f7fd;">
        <div class="container">
            <div class="row d-flex align-items-center text-center">
                <div class="col-md-8">
                    <p style="margin-bottom:0 !important;">More then 25 years of experience in business! <a href="#" style="color: #08237e; font-weight: 500;">Privacy & Security</a> </p>
                </div>
                <div class="col-md-4 text-end">
                    <i class="fab fa-facebook-f mx-2"></i>
                    <i class="fab fa-twitter mx-2"></i>
                    <i class="fab fa-instagram mx-2"></i>
                    <i class="fab fa-google-plus-g mx-2"></i>
                    <i class="fab fa-behance mx-2"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- ============================== JavaScript ============================== -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.