Standard Buttons



    

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-link">Link</button>

<div class="bg-primary p-3 mt-3">
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-outline-light">Outline Light</button>
    <button type="button" class="btn btn-link btn-light">Link Light</button>
</div>


    

Brand Color Buttons



    

<button type="button" class="btn btn-metallic-silver">Metallic Silver</button>
<button type="button" class="btn btn-roman-silver">Roman Silver</button>
<button type="button" class="btn btn-nickel">Nickel</button>
<button type="button" class="btn btn-dolphin-gray">Dolphin Gray</button>
<button type="button" class="btn btn-spirit-silk-dark">Spirit Silk Dark</button>
<button type="button" class="btn btn-isabelline">Isabelline</button>
<button type="button" class="btn btn-soft-nickel">Soft Nickel</button>
<button type="button" class="btn btn-sandstone">Sandstone</button>
<button type="button" class="btn btn-cinereous">Cinereous</button>
<button type="button" class="btn btn-spirit-silk-light">Spirit Silk Light</button>
<button type="button" class="btn btn-early-fawn">Early Fawn</button>
<button type="button" class="btn btn-misty-moss">Misty Moss</button>
<button type="button" class="btn btn-smoky-emerald">Smoky Emerald</button>
<button type="button" class="btn btn-cavern">Cavern</button>


    

Icon Buttons



    
<button type="button" class="btn btn-primary"><i class="fa fa-arrow-left"></i><span>Giving</span></button>

<button type="button" class="btn btn-default"><span>Giving</span><i class="fa fa-arrow-right"></i></button>

<div class="mt-3">

    <button type="button" class="btn btn-primary btn-lg btn-icon"><i class="fa fa-clock"></i></button>

    <button type="button" class="btn btn-default btn-lg btn-icon"><i class="fa fa-battery"></i></button>

</div>

<div class="mt-3">

    <button type="button" class="btn btn-primary btn-icon"><i class="fa fa-arrow-left"></i></button>

    <button type="button" class="btn btn-default btn-icon"><i class="fa fa-arrow-right"></i></button>

</div>

<div class="mt-3">

    <button type="button" class="btn btn-primary btn-sm btn-icon"><i class="fa fa-user"></i></button>

    <button type="button" class="btn btn-default btn-sm btn-icon"><i class="fa fa-search"></i></button>

</div>


    

Large Buttons



    
<button type="button" class="btn btn-lg btn-primary">Primary</button>
<button type="button" class="btn btn-lg btn-default">Default</button>
<button type="button" class="btn btn-lg btn-link">Link</button>

<div class="bg-primary p-3 mt-3">
    <button type="button" class="btn btn-lg btn-light">Light</button>
    <button type="button" class="btn btn-lg btn-outline-light">Outline Light</button>
    <button type="button" class="btn btn-lg btn-link btn-light">Link Light</button>
</div>

    

Small Buttons



    
<button type="button" class="btn btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-sm btn-default">Default</button>
<button type="button" class="btn btn-sm btn-link">Link</button>

<div class="bg-primary p-3 mt-3">
    <button type="button" class="btn btn-sm btn-light">Light</button>
    <button type="button" class="btn btn-sm btn-outline-light">Outline Light</button>
    <button type="button" class="btn btn-sm btn-link btn-light">Link Light</button>
</div>

    

No Grow Buttons

Add the .no-grow class to any button to keep it from growing to full width at mobile screen sizes. See an example of a use case for this button: Style Guide > Cards > Poster Cards



    
<button type="button" class="btn btn-sm btn-primary no-grow">Primary</button>