CODEWITHSUNDEEP
csstwitter-bootstrap
JQuery Mobile
JQuery Mobile

Reputation: 6301

Center Column Content In Bootstrap

I'm working on a project using Bootstrap 4. I have a row that consists of three columns. My code looks like this:

<div class="row">
  <div class="col-md-4 center-block">
    <div>
      <i class="glyphicon glyphicon-time center-text"></i><br />
      <h3>On Time</h3>
      <h4>Just for you</h4>                      
    </div>
  </div>

  <div class="col-md-4 center-block">
    <i class="glyphicon glyphicon-star center-text"></i><br />
    <h3>Excellent Service</h3>
    <h4>When you need it</h4>
  </div>

  <div class="col-md-4 center-block">
    <i class="glyphicon glyphicon-heart center-text"></i><br />
    <h3>We want to be your favorite</h3>
    <h4>Why not?</h4>
  </div>
</div>

I need to center the content within each column. However, all of the content is left-aligned and I do not know why. As the code shows, I'm using the center-block and center-text classes. Yet, they do not seem to be working. What am I doing wrong?

Upvotes: 3

Views: 269

Answers (1)

m4n0
m4n0

Reputation: 32355

You need to use text-center instead of center-block.

There is no default Bootstrap class such as center-text and the class needs to be used for the parent container, not along with any child element.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-4 text-center">
    <div>
      <i class="glyphicon glyphicon-time"></i><br />
      <h3>On Time</h3>
      <h4>Just for you</h4>                      
    </div>
  </div>

  <div class="col-md-4 text-center">
    <i class="glyphicon glyphicon-star"></i><br />
    <h3>Excellent Service</h3>
    <h4>When you need it</h4>
  </div>

  <div class="col-md-4 text-center">
    <i class="glyphicon glyphicon-heart"></i><br />
    <h3>We want to be your favorite</h3>
    <h4>Why not?</h4>
  </div>
</div>

Upvotes: 4

Related Questions