Basic Buttons

We took the time to restyle Bootstraps button options to match Raleway, you have every button you might need depending on the situation, simply choose what you need and paste the shortcode. We also added a couple of extra kicks and bangs.

Adjusting button sizes is very simple, and you can adjust the size of any button, or component that uses the btn class. Simply add the corresponding size class to the button you want to make larger or smaller.

Primary Large Primary Small Primary Extra Small Primary Large Primary Small Primary Extra Small

<a href="#" class="btn btn-rw btn-primary btn-lg">Primary Large</a>
<a href="#" class="btn btn-rw btn-primary btn-sm">Primary Small</a>
<a href="#" class="btn btn-rw btn-primary btn-xs">Primary Extra Small</a>

<a href="#" class="btn btn-primary btn-lg">Primary Large</a>
<a href="#" class="btn btn-primary btn-sm">Primary Small</a>
<a href="#" class="btn btn-primary btn-xs">Primary Extra Small</a>

Default Primary Success Info Warning Danger Royal Button

<a href="#" class="btn btn-rw btn-block btn-default">Default</a>
<a href="#" class="btn btn-rw btn-block btn-primary">Primary</a>
<a href="#" class="btn btn-rw btn-block btn-success">Success</a>
<a href="#" class="btn btn-rw btn-block btn-info">Info</a>
<a href="#" class="btn btn-rw btn-block btn-warning">Warning</a>
<a href="#" class="btn btn-rw btn-block btn-danger">Danger</a>
<button type="button" class="btn btn-rw btn-block btn-royal">Royal Button</button>

Default Primary Success Info Warning Danger Royal Button

<a href="#" class="btn btn-block btn-default">Default</a>
<a href="#" class="btn btn-block btn-primary">Primary</a>
<a href="#" class="btn btn-block btn-success">Success</a>
<a href="#" class="btn btn-block btn-info">Info</a>
<a href="#" class="btn btn-block btn-warning">Warning</a>
<a href="#" class="btn btn-block btn-danger">Danger</a>
<button type="button" class="btn btn-block btn-royal">Royal Button</button>

<a href="#" class="btn btn-primary">Link</a>
<button class="btn btn-primary">Button</button>
<button type="submit" class="btn btn-primary">Submit</button>

<a href="#" class="btn btn-rw btn-primary">Link</a>
<button class="btn btn-rw btn-primary">Button</button>
<button type="submit" class="btn btn-rw btn-primary">Submit</button>

<!--=== Content Dropdown ===-->
<div class="dropdown mb15">
	<button class="btn btn-rw btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
		Dropdown
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
	</ul>
</div>

<!--=== Content Dropdown w Buttons ===-->
<div class="btn-group">
	<button type="button" class="btn btn-rw btn-default">1</button>
	<button type="button" class="btn btn-rw btn-default">2</button>
	<button type="button" class="btn btn-rw btn-default">3</button>
	<button type="button" class="btn btn-rw btn-default">4</button>

	<div class="btn-group">
		<button type="button" class="btn btn-rw btn-default dropdown-toggle" data-toggle="dropdown">
			Dropdown
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">Dropdown link</a></li>
			<li><a href="#">Dropdown link</a></li>
		</ul>
	</div>
</div>

Wrap a series of buttons with .btn in .btn-group. Adjust sizes, or use any of the other button classes, to do what you need to do.

<div class="btn-group">
	<button type="button" class="btn btn-rw btn-default">Left</button>
	<button type="button" class="btn btn-rw btn-default">Middle</button>
	<button type="button" class="btn btn-rw btn-default">Right</button>
</div>

Button Toolbar:

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

<div class="btn-toolbar" role="toolbar">
	<div class="btn-group">
		<button type="button" class="btn btn-rw btn-info">1</button>
		<button type="button" class="btn btn-rw btn-info">2</button>
		<button type="button" class="btn btn-rw btn-info">3</button>
		<button type="button" class="btn btn-rw btn-info">4</button>
	</div>
	<div class="btn-group">
		<button type="button" class="btn btn-rw btn-info">5</button>
		<button type="button" class="btn btn-rw btn-info">6</button>
		<button type="button" class="btn btn-rw btn-info">7</button>
	</div>
	<div class="btn-group">
		<button type="button" class="btn btn-rw btn-info">8</button>
	</div>
</div>

Sizing:

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to the .btn-group.

<div class="btn-toolbar" role="toolbar">
	<div class="btn-group btn-group-lg">
		<button type="button" class="btn btn-rw btn-danger">Left</button>
		<button type="button" class="btn btn-rw btn-danger">Middle</button>
		<button type="button" class="btn btn-rw btn-danger">Right</button>
	</div>
</div>
<div class="btn-toolbar" role="toolbar">
	<div class="btn-group">
		<button type="button" class="btn btn-rw btn-warning">Left</button>
		<button type="button" class="btn btn-rw btn-warning">Middle</button>
		<button type="button" class="btn btn-rw btn-warning">Right</button>
	</div>
</div>
<div class="btn-toolbar" role="toolbar">
	<div class="btn-group btn-group-sm">
		<button type="button" class="btn btn-rw btn-success">Left</button>
		<button type="button" class="btn btn-rw btn-success">Middle</button>
		<button type="button" class="btn btn-rw btn-success">Right</button>
	</div>
</div>
<div class="btn-toolbar" role="toolbar">
	<div class="btn-group btn-group-xs">
		<button type="button" class="btn btn-rw btn-info">Left</button>
		<button type="button" class="btn btn-rw btn-info">Middle</button>
		<button type="button" class="btn btn-rw btn-info">Right</button>
	</div>
</div>