Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs and more with support for multiple sizes, states and more.
Button Styles
Bootstrap offers many button styles. Within our Brighter World brand we use the button classes: primary, secondary, info and link.
<div class="row">
<div class="col-md-3 col-sm-6">
<p><a class="btn btn-primary" href="#" role="button">Primary Link</a></p>
<p><button class="btn btn-primary" type="button">Primary Button</button></p>
<p><a class="btn btn-primary btn-arrow" href="#" role="button">Primary Arrow</a></p>
</div>
<div class="col-md-3 col-sm-6">
<p><a class="btn btn-secondary" href="#" role="button">Secondary Link</a></p>
<p><button class="btn btn-secondary" type="button">Secondary Button</button></p>
<p><a class="btn btn-secondary btn-arrow" href="#" role="button">Secondary Arrow</a></p>
</div>
<div class="col-md-3 col-sm-6">
<p><a class="btn btn-info" href="#" role="button">Info Link</a></p>
<p><button class="btn btn-info" type="button">Info Button</button></p>
<p><a class="btn btn-info btn-arrow" href="#" role="button">Info Arrow</a></p>
</div>
<div class="col-md-3 col-sm-6">
<p><a class="btn btn-link" href="#" role="button">Link Link</a></p>
<p><button class="btn btn-link" type="button">Link Button</button></p>
<p><a class="btn btn-link btn-arrow" href="#" role="button">Link Arrow</a></p>
</div>
</div>Button Sizes
Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.
<div class="row">
<div class="col-md-3 col-sm-6">
<p><a class="btn btn-primary btn-sm" href="#" role="button">Small Primary</a></p>
<p><a class="btn btn-primary" href="#" role="button">Regular Primary</a></p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Large Primary</a></p>
</div>
<div class="col-md-3 col-sm-6">
<p><a class="btn btn-secondary btn-sm" href="#" role="button">Small Secondary</a></p>
<p><a class="btn btn-secondary" href="#" role="button">Regular Secondary</a></p>
<p><a class="btn btn-secondary btn-lg" href="#" role="button">Large Secondary</a></p>
</div>
<div class="col-md-3 col-sm-6">
<p><a class="btn btn-info btn-sm" href="#" role="button">Small Info</a></p>
<p><a class="btn btn-info" href="#" role="button">Regular Info</a></p>
<p><a class="btn btn-info btn-lg" href="#" role="button">Large Info</a></p>
</div>
<div class="col-md-3 col-sm-6">
<p><a class="btn btn-link btn-sm" href="#" role="button">Small Link</a></p>
<p><a class="btn btn-link" href="#" role="button">Regular Link</a></p>
<p><a class="btn btn-link btn-lg" href="#" role="button">Large Link</a></p>
</div>
</div>Dropdown Buttons
Dropdown buttons are available in the various styles.
<div class="row">
<div class="col-md-6">
<div class="dropdown mb-3">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Primary Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="dropdown mb-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Secondary Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="dropdown mb-3">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Info Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</div>
Button Groups
Group a series of buttons together on a single line with the button group by wrapping a series of buttons with .btn in .btn-group.
<div class="row">
<div class="col-md-6">
<div class="btn-group mb-3" role="group" aria-label="Primary group example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<div class="btn-group mb-3" role="group" aria-label="Secondary group example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
<div class="btn-group mb-3" role="group" aria-label="Info group example">
<button type="button" class="btn btn-info">Left</button>
<button type="button" class="btn btn-info">Middle</button>
<button type="button" class="btn btn-info">Right</button>
</div>
</div>
</div>Button Outlines
You can also use button outlines for a great effect on dark backgrounds
<div class="row dark-grey p-4">
<div class="col-md-6">
<p><a class="btn btn-outline" href="#" role="button">Outline Button</a></p>
<p><a class="btn btn-outline btn-arrow" href="#" role="button">Outline Arrow</a></p>
<p><a class="btn btn-info btn-outline btn-arrow" href="#" role="button">Outline Info Arrow</a></p>
<div class="btn-group" role="group" aria-label="Outline group example">
<button type="button" class="btn btn-outline">Left</button>
<button type="button" class="btn btn-outline">Middle</button>
<button type="button" class="btn btn-outline">Right</button>
</div>
</div>
</div>