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

Html – Center <p> in Bootstrap 5

I have some problem to center p inside a div.
I need some help!

Thank you very much!

Here is my code:

<div class="navbar d-flex flex-grow-1 justify-content-end align-items-end mb-3 d-none d-sm-flex">
  <div class="d-flex align-items-center justify-content-center text-white me-2 fw-bold">
    <p>THIS NEEDS TO BE CENTERED</p>
  </div>
  <a type="button" class="btn btn-gold" href="">Booking!</a>
</div>
Tags:

2

Answers


  1. 0

    You can center a p tag using multiple methods in bootstrap.

    This is how you can center it with text-center according to the Documentation

    <p class="text-center">Center aligned text on all viewport sizes.</p>

    Also if you want to center the paragraph vertically, you can use the d-flex and align-items-center classes. Here is an example:

    <div class="container d-flex align-items-center" style="height: 100vh;">
  <p class="text-center mx-auto">This paragraph will be centered vertically.</p>
</div>
    Login or Signup to reply.
  2. 0

    You can use the text-center class for its parent div. if you only need to center <p> place text-center class inside it.

    <div class="navbar d-flex flex-grow-1 justify-content-end align-items-end mb-3 d-none d-sm-flex">
  <div class="d-flex align-items-center justify-content-center text-white me-2 fw-bold text-center">
    <p>THIS NEEDS TO BE CENTERED</p>
  </div>
  <a type="button" class="btn btn-gold" href="">Booking!</a>
</div>

    Read more:
    https://getbootstrap.com/docs/5.0/utilities/text/

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

Back To Top
Search