<button class="btn btn-primary">Primary</button>
In this example, the .btn
class is used to apply the default button styling, and the .btn-primary
class is used to give the button a primary color. Bootstrap includes several other button classes, such as:
.btn-secondary
.btn-success
.btn-danger
.btn-warning
.btn-info
.btn-light
.btn-dark
.btn-link
You can also use the .btn-*
to change the button's color, and the .btn-outline-*
to apply an outline style to the button.
Additionally, you can use different sizes for your buttons by using the classes .btn-lg
, .btn-sm
, .btn-block
and .btn-group-*
to create a group of buttons
Here's an example:
<button class="btn btn-primary btn-lg">Large Primary</button> <button class="btn btn-secondary btn-sm">Small Secondary</button> <button class="btn btn-danger btn-block">Block Danger</button> <div class="btn-group" role="group"> <button class="btn btn-primary">Button 1</button> <button class="btn btn-secondary">Button 2</button> <button class="btn btn-danger">Button 3</button> </div>
.active
, .disabled
and .focus
classes to create different states for the button.
Please note that the above is just a small example of what you can do with Bootstrap's button classes, and you can customize and style your buttons even further using custom CSS or SASS variables.
Social Plugin