Full width buttons
Full width buttons can span the full width of a parent container.
Add class .btn-block to create a full width button.
<button class='btn btn-default btn-block'>Button</button>
<button class='btn btn-primary btn-block'>Button</button>
Extra Small
/* Extra small button */
.btn-xs {
padding: 1px 4px;
}
Implementation example of extra small button
<button class='btn btn-default btn-xs'>Button</button>
<button class='btn btn-primary btn-xs'>Button</button>
<button class='btn btn-default btn-xs'>
<i class='material-icons md-18'>autorenew</i>Button
</button>
<button class='btn btn-primary btn-xs'>
<i class='material-icons md-18'>autorenew</i>Button
</button>
<button class='btn btn-default btn-xs'>
<i class='material-icons md-18'>add</i>
</button>
<button class='btn btn-primary btn-xs'>
<i class='material-icons md-18'>create</i>
</button>
Small
/* Small button */
.btn-sm {
padding: 4px 8px;
}
Implementation example of small button
<button class='btn btn-default btn-sm'>Button</button>
<button class='btn btn-primary btn-sm'>Button</button>
<button class='btn btn-default btn-sm'>
<i class='material-icons md-18'>autorenew</i>Button
</button>
<button class='btn btn-primary btn-sm'>
<i class='material-icons md-18'>autorenew</i>Button
</button>
<button class='btn btn-default btn-sm'>
<i class='material-icons md-18'>add</i>
</button>
<button class='btn btn-primary btn-sm'>
<i class='material-icons md-18'>create</i>
</button>
Large
/* Large button */
.btn-lg {
line-height: 24px;
padding: 8px 16px;
}
Implementation example of large button
<button class='btn btn-default btn-lg'>Button</button>
<button class='btn btn-primary btn-lg'>Button</button>
<button class='btn btn-default btn-lg'>
<i class='material-icons md-24'>autorenew</i>Button
</button>
<button class='btn btn-primary btn-lg'>
<i class='material-icons md-24'>autorenew</i>Button
</button>
<button class='btn btn-default btn-lg'>
<i class='material-icons md-24'>add</i>
</button>
<button class='btn btn-primary btn-lg'>
<i class='material-icons md-24'>create</i>
</button>