Customize text size in bootstrap button

Customize text size in bootstrap button

I am trying to a create a “Download from the App Store” button using twitter bootstrap.
The issue I am having is trying to make the “App Store” text larger than the “Download from the” text above it.
Here is HTML and CSS that I am using.
.fixed-hero .hero-text {
padding-top: 90px;
width: 65%;
font-family: Century Gothic, sans-serif;
font-size: 2.2em;
line-height: 1.5em;
.fixed-hero .hero-button {
padding-top: 60px;
width: 65%;

background-image: linear-gradient(to bottom, rgb(204, 81, 81), #990000);
text-align: left;

I appreciate the feedback and expertise.


Solution 1:

wrap the text and shrink it with font-size:smaller or whatever size you like.

<div class="hero-button text-center">
        <a href="#" class="btn btn-large btn-danger">
            <i class="icon-apple icon-3x pull-left"></i>
                <span style="font-size:smaller;">Download from the</span>
            App Store

Solution 2:

Actually come to think of it you can arbitrarily do this provided one of two conditions are met. 1) the button is consistent in size to have the break at just the right spot (using fixed width of the button or making it relative in size to a fixed width container) or 2) applying a <br> tag at the desired spot. Then it’s just a matter of adding a :first-line pseudo-class

.btn div {

.btn div:first-line {

Related:  Bootstrap Tooltip Not Showing Up