How to create beautiful Bootstrap Buttons with examples

How to create beautiful Bootstrap Buttons with examples

Buttons in Bootstrap

The Bootstrap framework enables you to create buttons in your web pages beautifully and easily; by simply using available classes. This tutorial shows how to create Bootstrap buttons with different CSS classes. Also, you will see button dropdown – acting as the menu example at the end of this chapter.

A few quick button examples

buttons example with different styles

Creating button as a link example

Small and large size button example

Active button example

Disabled button example

Creating a simple button with Bootstrap

The following example shows how to create a simple button in your web page using Bootstrap button class. The class available for buttons is “btn” and then you can add button style’s predefined classes. Following example uses the btn-default class.

Experience this online

As you can see, a button is created by <button> tag and a Bootstrap CSS class is added, which is: btn btn-default.

Bootstrap buttons example with other btn classes

Following example is using other btn classes to create more buttons. The following classes are used with the main btn class to create buttons:

  • btn-primary
  • btn btn-success
  • btn btn-info
  • btn btn-warning
  • btn btn-danger

Bootstrap buttons

Experience this online

Creating button as a link example

You can create a button as a link by using the btn-link class with the btn class. Following example creates a button as a link. Note that the link still acts like a button. Only its appearance is like a link.

Experience this online

Button sizes

You can set button sizes by using available classes in the Bootstrap. Use following classes to set button sizes:

  1. btn-lg – for the large size button
  2. btn-sm – for the small size button
  3. btn-xs – for the extra small size button

See the following example for different sizes of buttons.

Bootstrap button sizes

Experience this online

Bootstrap Active button example

You can use the active class in button to make it look as the active state which is darker background, darker border and inset shadow.

See the following example with the active state of buttons that we used in the above example.

Experience this online

You can see the difference in the example. The first row showed the buttons without active class while next row showed the buttons using the active class.

Bootstrap Disabled button example

Following example uses the disabled attribute of button tag to make the text button look disabled. To understand the difference, the first row of the buttons are shown as normal while the second row contains disabled buttons.

Bootstrap button disabled

Experience this online

Button dropdown example

You can also create button dropdown quite easily by using the wrapping button in btn-group class. See the following example:

Bootstrap button dropdown

Experience this online

To learn more about button dropdown in the menu and to create a Split button dropdown, go to the Bootstrap dropdown chapter.

Useful links: Twitter Bootstrap Tutorial | Bootstrap Table | Bootstrap CSS | Bootstrap Form