How to increase font size in bootstrap

Viewed 57331

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>
5 Answers

If you are using SCSS of similar to generate your CSS, you can add your own global class that slightly increases (+25%) the font size.

In the _variables.scss found in the Bootstrap bundle there is a variable already defined $font-size-lg. Use it to define a class in your own style.scss (or similar) in your project.

.font-size-lg {
  font-size: $font-size-lg;
}

Use it in HTML

<span class="font-size-lg">Text to enlarge</span>

You can always bypass bootstrap and edit the font size at the source in-line:

style="font-size:x-large;"
Related