Bootstrap Button: Tutorial & Examples

Bootstrap Button class is one of the most usable and important elements for web designing. You can easily create a button with the Bootstrap button’s classes. Not only that, but you also create the buttons with some specific sizes and colors. You can also create a button group with some classes. And these buttons and buttons groups will be responsive. So you don’t need to write any kind of code to make it mobile-friendly.

Firstly, we make the Bootstrap environment. If You don’t know to use Bootstrap in HTML then visit our previous blog How to use Bootstrap with HTML.

Table of Content

• Create Simple Bootstrap Button
• Bootstrap Button Colors
• Create Out-Line Bootstrap Button
• Add Link to Button
• Add Icon to Button
• Bootstrap Button’s Sizes
• Bootstrap Block-level Button

How to Create a Simple Bootstrap Button

We can create a simple button with the class .btn . Firstly, we make a button tag. Then we add the button class .btn . Here we used .btn-primary for styling. Basically, this class gives the button background color. Later we’ll learn about it in this blog.

Button Code:

<button type="button" class="btn btn-primary">Primary</button>

You must notice that this button has a hover effect. But we don’t write the code for it. By the way, you can see we made a simple Jumbotron. We also published a blog about the Jumbotron.

Bootstrap Button Colors

We can create these buttons and gives them some specific colors-: Primary, Secondary , Success, Danger, Warning, Info, Light , Dark. So we can easily add a button of these colors with Bootstrap classes.

Create Outline Bootstrap Buttons

We’ve already learned how to make solid colored buttons. But we can also make an outline button. Basically, these buttons have no background color. But it has an outline and a text. On your website, these buttons are also given an eye-catching and different look.

Out-Line Button code :

<button type="button" class="btn btn-outline-primary">Primary</button>

These buttons have a pre-defined hover effect. When you put your cursor on the button, it brings a solid background color. Basically, it is filled with which color that your outline button has.

How to Add Link to the Bootstrap Button

After making a button, we can add a link. We just add the href tag and add the link into the double quotation. If you want to know about it then visit Bootstrap’s official website getbootstrap.com.

Here’s the code :

<a class="btn btn-primary" href="#" role="button">Link</a>

Add Icon to the Bootstrap Button

We can easily add an icon to the bootstrap buttons. This little step must help you to give extra attention to your website. We can add icons as we need. There are lots of button icons. Here we add an icon library. Then we add the code of the icon.

Icon Library :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Button Code :

<button type="button" class="btn btn-success"><i class="fa fa-home"></i> Button</button>

Here we bring an icon with the help of some codes. Basically, the class .fa-fa-home is used to bring the home icon.

In this same manner, we can add lots of icons. If you want to know many other icon codes, then click here.

Bootstrap Button’s Sizes

We can also make different sizes of buttons. For this, We’ll learn some classes. So Bootstrap has 3 classes for making different sizes of buttons. We can create small-sized buttons, Large-sized buttons, and Block level button.

The class of small button is .btn-sm . And the class of large button is .btn-lg .

Large Button’s Code:

Now we try to create a green button with large-shaped. We just need .btn-success and .btn-lg classes.

 <button type="button" class="btn btn-success btn-lg">Large button</button>

Small Button’s Code:

Similarly, we can create a small button. We use .btn-sm class which gives it a small shape. And we add .btn-danger a class for making it the red-colored button.

<button type="button" class="btn btn-danger btn-sm">Small button</button>  

You clearly notice that this red button is smaller than the green button, we showed in previous picture.

Block-Level Bootstrap Button:

We can also create a block-level button. These buttons just span the full width of the parent. Sometimes we need this type of button with occupied full width to serve a fresh look of our website. The class of Block-level button is .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button with btn-lg class</button>

<button type="button" class="btn btn-success  btn-block">Block level button </button>

<button type="button" class="btn btn-danger  btn-sm btn-block">Block level button with btn-sm class</button>

Here we can also use .btn-sm or .btn-lg for giving it different size.

Here we create three block-level buttons. Firstly, we make a large block-level button in blue color. We use the .btn-lg class to give it a large shape and use .btn-block the class to make it a block-level button. We also use .btn-primary the class to make it blue.

Then we make a simple block-level button in green color with the help of .btn-block.We use the .btn-success class to give it a green color.

And At the last, we make a red button with .btn-block and .btn-danger class. We also add .btn-sm classes to make it smaller.

Hope you learn to create different types of buttons. If you have some queries then comment to us. We’ll learn how to make tables with Bootstrap.

F.A.Q