The horizontal center alignment of text is not working properly in Bootstrap v5.0

I'm currently learning Bootstrap v5.0 and working on creating a practice webpage with it. However, I've encountered an issue where the text is not aligning center horizontally. Despite using align-items-center, the centering is not working as intended.

Here's the code snippet:

<!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/bootstrap/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>
    <div class="container-fluid" style="background: #f7f7fd;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <p>More than 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>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>

Attached is an image for reference: https://i.sstatic.net/GGUuL.png.

The text appears to be aligned towards the top rather than the center. Any guidance on how to fix this would be greatly appreciated.

Thank you!

htmlcsstwitter-bootstrapweb-frontendbootstrap-5

Answer №1

The reason for this is that <p> tags in Bootstrap have a margin-bottom: 1rem;. You can either eliminate the margin or get rid of the <p> tag and then include some padding to create space within the row.

<div class="row py-4 align-items-center">
    <div class="col-md-8">
        <p class="mb-0">
            With over 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>

or

<div class="row py-4 align-items-center">
    <div class="col-md-8">
        With over 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>

Answer №2

To achieve text centering, apply the utility class known as text-center:

<div class="col-md-8 text-center">

By adding this class to col-md-8, the text will be centered within that element.

Answer №3

According to their documentation, the instruction was to use text-center.

Update: I assumed you wanted both columns centered. I reverted it back to using col-md-8 and col-md-4 for each column, with text-center now applied only 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17757878636463657667572239273927">[email protected]</a>/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 than 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4f4242595e595f4c5d6d18031d031d">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>

</html>

Answer №4

Your code has been updated with the following modifications:

Two new classes, d-flex and text-center, have been added. Additionally, margin-bottom:0 !important; has been applied 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0a2afafb4b3b4b2a1b080f5eef0eef0">[email protected]</a>/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 than 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b7babaa1a6a1a7b4a595e0fbe5fbe5">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to locate tab link elements with Selenium using different approaches

I am encountering difficulties with Selenium in locating a specific set of tab link elements by their IDs or link text. During my usage of Selenium, I am attempting to click through each of the tabs ("DESCRIPTION AND PRICE", "FINISH", and "NOTES") and extr ...

pythonhtmlseleniumbeautifulsoup

Is there a way to remove most HTML tags while retaining certain ones?

Looking for a solution to filter out all HTML codes from a PHP string except for: <p> <em> <small> The strip_tags() function is helpful, but it removes all HTML tags. Is there a way to specify that only the listed tags should be removed ...

phpregexstringhtml

Using the device's width and height with material-ui

Currently, I am attempting to specify the width and height for only the (Iphone 7 Plus) within my project using withStyles. import { withStyles } from "@material-ui/core"; I have tested the following code: "@media (width: 414px) and (height ...

cssreactjsiphonematerial-ui

Tips for saving JavaScript results to a form

Hey there! I'm looking to figure out how to save a JavaScript calculation within a form instead of just displaying an alert or outputting it on another page. Below is the JavaScript code I have for calculating prices. <script type="text/javascript ...

javascripthtmlforms

Trouble Arising from Regional Settings in my Hybrid App Developed with CapacitorJS and Vue.js

Issue with capacitor app input Correct input in chrome app I'm facing a problem related to regional settings in my mobile application, developed using CapacitorJS and Vue.js 2. The datetime-local control is appearing in a language that isn't the ...

htmlvuejs2capacitor

Unsuccessful PHP conversion of numbers to words

Kindly take note that the PHP code provided below is used to convert a numerical amount into words. It functions properly for integers like 5250, however, when it encounters a decimal number, it produces inaccurate results. Example: for 450 = four hundred ...

phphtml

Ways to verify if a specific extjs panel has finished loading

After a specific panel has finished loading, I need to insert a JavaScript code (using the panel's ID). What is the best way to ensure that the panel has been fully rendered so that I can access its ID using document.getElementById? Thank you. ...

javascripthtmlextjs

Utilizing regular expressions in Powershell to modify a CSS file

Snippet from my current theme.css file: .actionBlock[selected] { color: var(--gray11); background-color: var(--gray11); } I am trying to modify color: var(--gray11); to color: #FFF; /* UPDATED : var(--gray11) */ After attempting in Po ...

cssregexpowershell

Exploring the power of AngularJS through nested directives

Index.html: <nav-wrapper title="Email Test"> <nav-elem value="first"></nav-elem> <nav-elem value="second"></nav-elem> </nav-wrapper> app.js: app.directive('navWrapper', function() { return { ...

javascripthtmlangularjsnesteddirective

Issue with Bootstrap carousel controls malfunctioning and delayed transition to the next slide

I am facing some difficulties with my carousel. The transition to the next slide is taking longer than usual, and even when I try using the controls, they do not respond no matter how many times I click on them. I have followed all the instructions in the ...

htmlbootstrap-5

Place the input field and submit button side by side horizontally

How can I align my submit button next to the input text in a single row, with the submit button on the right side of the input text? This is my code: <div class="mt-12"> <input id="grid-text" ...

javascripthtmlcssbootstrap-4

Having trouble viewing a dynamically adjusting Angular NVD3 graph embedded in bootstrap

I have been utilizing the NVD3 library along with bootstrap 3.0 for my project. I have two divs with the classes "col-md-6 col-sm-12" positioned side by side. My goal is to showcase charts in both of these divs. To ensure that the charts are displayed corr ...

javascripthtmlcssangularjstwitter-bootstrap

What is causing the action button in my MUI snackbar to occupy an additional line?

I'm currently learning how to use MUI and I'm struggling with a specific issue. The close button in my code is appearing on a separate line, but I want it to be on the same line as the word "again". I've tried experimenting with absolute pos ...

cssreactjsmaterial-uijsxsnackbar

Is it possible for a table data cell to be nested within another table

Is it possible for a <td> to be a direct child of another <td>? For example: <td class="parent"> <td class="child"> <!-- Some content --> </td> </td> Or is it necessary to always create a new < ...

htmlhtml-tablew3cw3c-validation

Is there something I'm overlooking in my image navigation? It doesn't seem to be interactive

Looking for assistance regarding the issue below. I can't seem to make my image clickable, and I'm not sure what's causing this problem. <img src= "makeup.html.jpg" alt= "Make up by Lauren Evans logo" title= "Make ...

htmlimagenavigationpixel

The progress bar seems to be malfunctioning

Need help with my progress bar, it's not working properly. Can someone assist me? var x = document.getElementById("p_bar"); for(var i = 0; i < 100; i++) { var wid; wid=1; if(wid == 800) break; else wid+=8; x.style.width=wid+" ...

javascripthtmlcss

directive scope is not functioning

Looking to incorporate an input element into my Google Map, I've written the code below: app.directive('GooglePlaceAutoComplete', function() { return { restrict:'AEC', replace: true, scope: { myMap:&ap ...

htmlangularjsangularjs-ng-repeat

Incorporate visual elements such as images that resemble checkboxes

I'm searching for an innovative approach to replace the traditional checkbox, incorporating images instead. My idea is to have users click on an image, which will then fade out and reveal a tick box overlay. My inspiration comes from Recaptcha 2, whe ...

javascriptjquerycsshtml

"Ensuring Your SVG Icon is Perfectly Centered: A Step

My SVG icon is currently aligned to the left, but I want to center it. I tried using the following code, but it doesn't seem to be working: .parent{ display: flex; align-items: center; font-size: 13px; } span{ margin-right:10px } https://i.sstatic.ne ...

htmlcssreactjsflexbox

Restrict the amount of decimal places allowed in input text

Another question on Stack Overflow addresses limiting the number of characters allowed in a form input field. I am specifically looking to restrict the number of digits that can come after the decimal point to 2 digits. <input type="text" maxlength="2 ...

htmlformsinput