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...
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.
2 Answers
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>
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
}
David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.
