how to align text at center using bootstrap

Question

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

Possible duplicate of [How do you get centered content using Twitter Bootstrap?](https://stackoverflow.com/questions/9184141/how-do-you-get-centered-content-using-twitter-bootstrap) — Daniel Beck, Dec 02 '17 at 15:58

Sergej · Answer 1 · 2017-12-22T05:09:50.053

0

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/

edited Dec 22 '17 at 05:09

answered Dec 02 '17 at 15:54

Sergej

1,082
11
27

thankyou for your reply. it does not work very well. – form contact Dec 02 '17 at 16:01
any examples,sorry still new. – form contact Dec 02 '17 at 16:14
sorry for the late reply. i have tested it.it works. but there is so much gap between 2 classes? – form contact Dec 04 '17 at 16:33
the bootstrap-classes `col-*-*` are responsive and will change width as your screen size changes, put both elements in one col and then control the spacing with margins. I changed the code above – Sergej Dec 22 '17 at 05:08

score -1 · Answer 2 · answered Dec 02 '17 at 15:57

-1

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>

answered Dec 02 '17 at 15:57

pitaridis

2,801
3
22
41

perfect copy :-) +1 – Sergej Dec 02 '17 at 15:58
thankyou for your reply. it does not work very well. – form contact Dec 02 '17 at 16:01
It should work. This is how I align my texts. You probably have asigned different css for your page. Try it in a clean page and you will see that it works. – pitaridis Dec 02 '17 at 16:02
I know what is your problem. you have used col-sm-2 which has not enough spaced. if you use more columns so that the contents will have more space to put the text, you will see that it is actually centered. you code just do not have enough space to see the difference – pitaridis Dec 02 '17 at 16:09

how to align text at center using bootstrap

2 Answers2