Use the following classes to create a styled button.
All buttons must have the .btn class. Change the color by adding .btn-primary or .btn-default to the link tag.
<a class="btn btn-primary" href="https://niu.edu">Basic Red Button</a><a class="btn btn-default" href="https://niu.edu">Black Button</a>Add .btn-lg or .btn-sm for additional sizes.
Default Button Size Default Button Size
<p>
<a class="btn btn-primary btn-lg" href="#">Large Button</a>
<a class="btn btn-default btn-lg" href="#">Large Button</a>
</p>
<p>
<a class="btn btn-primary" href="#">Default Button</a>
<a class="btn btn-default" href="#">Default Button</a>
</p>
<p>
<a class="btn btn-primary btn-sm" href="#">Small Button</a>
<a class="btn btn-default btn-sm" href="#">Small Button</a>
</p>Use text alignment classes on the button's parent container to control alignment of the button.
<p class="text-left">
<a class="btn btn-primary" href="#">Aligned Left</a>
</p>
<p class="text-center">
<a class="btn btn-primary" href="#">Centered Button</a>
</p>
<p class="text-right">
<a class="btn btn-primary" href="#">Aligned Right</a>
</p> Make a button span the full width of its parent container by adding .btn-block.
<a class="btn btn-primary btn-block" href="#">Full Width Button</a> To make a button that's wider than the text that it contains, but not one that appears to fill the full width of its parent container, put the button in a narrower, centered column within a .row and use .btn-block to fill the width of that column.
Tip: To center a column, use .col-*-x and .col-offset-*-y, where x is an even number and 4 ≤ x ≤ 10, y is ([12 - x] / 2), and * is a size prefix like xs, sm, md, or lg. See Bootstrap's documentation on offsetting columns.
This demo only works on the sm screen size and up. You're on xs right now.
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>
<a class="btn btn-primary btn-block" href="#">Not Quite Full Width</a>
</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<p>
<a class="btn btn-default btn-sm btn-block" href="#">Little Bit Softer Now</a>
</p>
</div>
</div> Buttons can contain icons. There are many icons available for you to utilize, but use them with discretion. Icons should be used only if they serve a purpose beyond aesthetic appeal.
<p>
<a class="btn btn-primary" href="#"><i class="fa-solid fa-question"></i> Frequently Asked Questions</a>
</p>
<p>
<a class="btn btn-primary" href="#">Apply Today<i class="fa-solid fa-chevron-right"></i></span></a>
</p>
If a button is used in a container that might become narrower than that button's natural width, by default, text will not wrap in the button. Use .btn-wrap to ensure that the button's text wraps properly in those cases.
<div class="card">
<p>
<strong>A Parent Container</strong>
</p>
<p>
<a class="btn btn-primary" href="#">This button without <code>.btn-wrap</code> escapes its parent element</a>
</p>
<p>
<a class="btn btn-primary btn-wrap" href="#">This button uses <code>.btn-wrap</code> to wrap when parent element narrows</a>
</p>
</div>Web and Internal Communications
Holly Nicholson
Assistant Director of Web Communications
hnicholson@niu.edu