Customize text size in bootstrap button

Question

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%;
    color:#fff;
    font-family: Century Gothic, sans-serif;
    font-size: 2.2em;
    line-height: 1.5em;  
}
.fixed-hero .hero-button {
    padding-top: 60px;
    width: 65%;
}

.btn.btn-large.btn-danger{
    border-style:solid;
    border-width:1px;
    border-color:#fff;
    background-image: linear-gradient(to bottom, rgb(204, 81, 81), #990000);
    text-align: left;
}

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

I appreciate the feedback and expertise.

But 'Download from the' and 'App Store' are the same text node. You can't mix styles like that. You need to break them up into to separate nodes to have two separate styles. — Joseph Marikle, Jul 10 '13 at 19:45
you can Wrap Button Text Word using twitter bootstrap http://stackoverflow.com/questions/18996202/twitter-bootstrap-button-text-word-wrap — Sabin Sharma, Apr 04 '17 at 05:20

score 23 · Accepted Answer · answered Jul 10 '13 at 19:46

23

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
        </a>
</div>

answered Jul 10 '13 at 19:46

tmcc

1,010
8
12

`font-size` MDN docs has all the options: [https://developer.mozilla.org/en-US/docs/Web/CSS/font-size] – Jeff Spicoli Sep 15 '22 at 02:05

score 1 · Answer 2 · answered Jul 10 '13 at 19:59

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 {
  font-size:40px
}

.btn div:first-line {
    font-size:20px
}

http://jsbin.com/oxivoz/2/
http://jsbin.com/oxivoz/2/edit

score 0 · Answer 3 · answered Sep 02 '23 at 02:07

0

This worked for me in Bootstrap 5.3:

<style>
.custom-btn-size {
    font-size: 18px;  
}
</style>

<button class="btn btn-primary custom-btn-size">My Button</button>

answered Sep 02 '23 at 02:07

stevec

41,291
27
223
311

Customize text size in bootstrap button

3 Answers3

Linked