Html – Button styles in Twitter Bootstrap

csshtmltwitter-bootstrap

I am just starting out with Bootstrap and I am stuck at the very initial stage. I am trying to modify the marketing-narrow.html (default example from docs/examples) to make the display button smaller.

I changed 

 <a class="btn btn-large btn-success" href="#">Sign up today</a>

to

 <a class="btn btn-small btn-success" href="#">Sign up today</a>

and there was visually no change at all! What am I doing wrong?

Best Answer

They override some attributes with this rule:

.jumbotron .btn {
     font-size: 21px;
     padding: 14px 24px;
}

the underline affect is that btn-small and btn-large are the same in .jumbotron context.

remove jumbotron class so the btn-small will work as expected:

<div>
        <h1>Super awesome marketing speak!</h1>
        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <a class="btn btn-small btn-success" href="#">Sign up today</a>
</div>
Related Topic