How to increase font size in bootstrap

Question

I need to increase following telephone number font size.

<div class="topbar">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p class="pull-left hidden-xs"><i class="fa fa-clock-o"></i><span>Mon - Sat 8.30AM - 5.00PM. Sunday CLOSED</span></p>
                <p class="pull-right"><i class="fa fa-phone"></i>Tel No. (+77) 853 740 966</p>
            </div>
        </div>
    </div>
</div>

Answer 1

Wrap it in span and add css to it:

.text-large {
  font-size: 150%;
}

<div class="topbar">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <p class="pull-left hidden-xs"><i class="fa fa-clock-o"></i><span>Mon - Sat 8.30AM - 5.00PM. Sunday CLOSED</span></p>
        <p class="pull-right text-large"><i class="fa fa-phone"></i><span>Tel No. (+77) 853 740 966</span></p>
      </div>
    </div>
  </div>
</div>

Answer 2

Update: <big> is supposed to be deprecated in HTML5, so CSS is the only way. Using a relative size works best no matter what the current font size is.

.font-size-lg { font-size: 1.2rem; }

---

I haven't found an easy way with Bootstrap, so I use <big>.

<p class="pull-right">
  <big><i class="fa fa-phone"></i>Tel No. (+77) 853 740 966</big>
</p>

I wish there was a Bootstrap class so I don't have to use an extra line in HAML.

%p
  %big This is bigger.

Answer 3

<span style="font-size:30px">Tel No. (+77) 853 740 966</span>

Or

.large-fontsize{
font-size: 30px !important;
}  

<span class="large-fontsize">Tel No. (+77) 853 740 966</span>