<div class="container-fluid">
  <div class="row">
    <div class="col-4">
      <img src="images/5.png" class="img-fluid">
    </div>
    <div class="col-8 bg-primary text-white text-center">
      <div class="mx-auto">
        <h1>AMAZING DANCE</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> Corrupti perferendis cumque a provident? Ipsam, architecto?</p>
        <a href="#" class="btn btn-dark btn-lg">READ MORE</a>
      </div>
    </div>
  </div>
</div>

So I am trying to center the text inside vertically and horizontally and also I wanna remove the spacing. What am I doing wrong?

It looks like this:

CodePudding user response：

mx-auto utility class is shortcut for margin: 0 auto which by design centers content only horizontally. Simplest way to center content is by using d-flex with combination of justify-content-center and align-items-center. Since flex displays its ascendants as inline, you have to additionally wrap them in an another container:

<div class="container-fluid">
  <div class="row">
    <div class="col-4">test</div>
    <div class="col-8 bg-primary text-white text-center">
      <div class="d-flex justify-content-center align-items-center h-100">
        <div>
          <h1>AMAZING DANCE</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
            Corrupti perferendis cumque a provident? Ipsam, architecto?
          </p>
          <a href="#" class="btn btn-dark btn-lg">READ MORE</a>
        </div>
      </div>
    </div>
  </div>
</div>

h-100 is there only to strech container to all available height.