Error
<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>
<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>
<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>
<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>
<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>
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
.no-grow
<button type="button" class="btn btn-sm btn-primary no-grow">Primary</button>