Bootstrap 4 Not Centering Correctly

Question

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>

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

Your introduction container is not occupying the full width of the viewport. — Subhajit Maji, Mar 17 '21 at 06:40
try this - `
Made to order DIY projects
for all your home decor
needs!
` — s.kuznetsov, Mar 17 '21 at 06:43

ale · Answer 1 · 2021-03-17T07:00:02.337

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

edited Mar 17 '21 at 07:00

answered Mar 17 '21 at 06:46

ale

10,012
5
40
49

This code made it so one word was on a different row, as if it was in a single column – ssethzz Mar 17 '21 at 06:53
@ssethzz ok, now its better, bye ;) – ale Mar 17 '21 at 07:00
obviously it can works also using container and row at the same level, mixing classes, but bootstap layouts is designed to use container, rows and columns, regards – ale Mar 17 '21 at 07:03
It keeps doing the same thing ;'( – ssethzz Mar 17 '21 at 07:03

score 1 · Answer 2 · answered Mar 17 '21 at 06:47

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>

answered Mar 17 '21 at 06:47

Dinesh s

313
4
19

This code made it move to the left still – ssethzz Mar 17 '21 at 06:54

score 1 · Answer 3 · answered Mar 17 '21 at 06:49

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>

Charles C. · Answer 4 · 2021-03-17T07:40:45.777

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>

edited Mar 17 '21 at 07:40

answered Mar 17 '21 at 07:28

Charles C.

3,725
4
28
50

Bootstrap 4 Not Centering Correctly

Made to order DIY projectsfor all your home decorneeds!

4 Answers4

Made to order DIY projects
for all your home decor
needs!