how to align text at center using bootstrap-Twitter bootstrap

formcontact
December 2, 2017
142 views
0 votes
2 Answers

I have used Twitter Bootstrap to align text and image side by side. Can you please give an idea how to align text in the center.

<div class="row">
    <div class="col-sm-1">
        <a href="ghfhg"><i class="fa fa-calendar" style="color: rgb(72, 168, 237); font-size: 32px; box-sizing: content-box; line-height: 80px; text-align: center; width: 80px; height: 80px; display: inline-block; overflow: hidden; border-radius: 50%; background-color: rgb(224, 231, 237);"></i></a>
    </div>
    <div class="col-sm-2">
        sdsad
    </div>
</div>

I have already tested text-center it does not work very well:
enter image description here

Answers

You can achive your result with the Bootstrap 4 classes d-flex justify-content-center align-items-center:

<div class="container">
  <div class="row">
    <div class="col-xs-12 d-flex justify-content-center align-items-center" style="height:80px">
      <a href="ghfhg"><i class="fa fa-calendar" style="color: rgb(72, 168, 237); font-size: 32px; line-height: 80px; text-align: center; width: 80px; height: 80px; display: inline-block; overflow: hidden; border-radius: 50%; background-color: rgb(224, 231, 237); margin-right: 5px;"></i></a>
      sdsad
    </div>
  </div>
</div>

Working example is here: http://jsfiddle.net/4rLj200m/9/

Just add the text-center class to the parent element.

<div class="row">
    <div class="col-sm-1">
        <a href="ghfhg"><i class="fa fa-calendar" style="color: rgb(72, 168, 237); font-size: 32px; box-sizing: content-box; line-height: 80px; text-align: center; width: 80px; height: 80px; display: inline-block; overflow: hidden; border-radius: 50%; background-color: rgb(224, 231, 237);"></i></a>
    </div>
    <div class="col-sm-2 text-center">
        sdsad
    </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.