-1

I'm not really sure how I center the h2, it's my first time using bootsrap 4 after I've used Bootstrap 3 so maybe there's a difference? I'm not sure, but any help would be... helpful. Thanks!

<nav class="container navbar navbar-expand-md justify-content-end">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Gallery</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact Us</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
    </ul>
</nav>
<br>

<div class="container row introduction justify-content-center">
    <div class="col-md-6">
        <h2>Made to order DIY projects<br>for all your home decor<br>needs!</h2>
    </div>

</div>

enter image description here

As you see, the text is not centered at all and I don't know how to fix it... Maybe I'm using the wrong bootstrap? I'm not sure

ssethzz
  • 43
  • 5

4 Answers4

1

using a div as row it works very well

<nav class="container navbar navbar-expand-md justify-content-end">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Gallery</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact Us</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
    </ul>
</nav>
<br>

<div class="container introduction ">
  <div class="row">
    
    <div class="col-md-12 text-center">
        <h2>Made to order DIY projects<br>for all your home decor<br>needs!</h2>
    </div>
  </div>

</div>

All the best

ale
  • 10,012
  • 5
  • 40
  • 49
1

You are using grid system the col-md-6 is half of the one row so the text is centerd within left column

if want to center a text in the row remove the col-md-6 and add the text in container like below

<div class="container row introduction">
    <h2 class="text-center">Made to order DIY projects<br>for all your home decor<br>needs!</h2>
</div>
Dinesh s
  • 313
  • 4
  • 19
1

This worked for me Bootstrap 4.3.1

<div class="container h-100">
      <div class="row h-100 justify-content-center align-items-center">
        <form class="col-12">
          <div class="form-group">
            <label for="formGroupExampleInput">Example label</label>
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
          </div>
          <div class="form-group">
            <label for="formGroupExampleInput2">Another label</label>
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
          </div>
        </form>   
      </div>
    </div>
Pri Nce
  • 576
  • 6
  • 18
0

Some previous answer do work, that made me think you are using bootstrap 5 instead. regardless, this should work for both 4 and 5

<div class="container">
    <div class="row row-cols-1 justify-content-center">
      <div class="col text-center w-auto">
        <h2>Made to order DIY projects<br>for all your home decor<br>needs!</h2>
      </div>
    </div>
</div>
Charles C.
  • 3,725
  • 4
  • 28
  • 50