Bloggers often use a plugin for showing buttons in their posts or pages. Buttons are the essential component of website’s appearance or blog because it is used to highlight important links of the web page. On the other hand, people are likely to click on buttons rather than clicking on a plain link. So the topic for today is How to use Bootstrap buttons.
Different colors, styles, and icons represent the button type and functions. For example, I use buttons for showing the demo of the themes and plugins in my blog posts. It helps my users to easily locate the demo links.
But sometimes we choose a wrong code or plugin for displaying buttons which not only affects the site speed but also conflicts with the mobile layout of the site. I saw many plugins and scripts for showing buttons on my site but nothing satisfied me.
Then I came to know about Bootstrap which is absolutely free to download and use. I saw the examples of the buttons provided by the Bootstrap and found it a very good alternative for others. Because the buttons made in Bootstrap framework are fully minified, SEO optimized and mobile friendly. I’m sure you all will also like it.
Introduction to Bootstrap Buttons.
These are six different classes or types of Bootstrap buttons.
NOTE – .btn-default is replaced by .btn-secondary in Bootstrap 4.
Each button uses a single line of code with changing classes. The buttons mentioned above can be represented by writing the code given below.
<!-- How to use Bootstrap Buttons -->
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
How to use Bootstrap Buttons ?
Bootstrap is free and easy. Anyone can use Bootstrap by just including the Bootstrap source files in the head section of the site.
If you’re an HTML user you have to include Bootstrap files in your header by placing this code (given below) just after your <head> tag.
(Your website’s <head> tag surely be in your index file.)
<!-- How to use Bootstrap Buttons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css">
NOTE- Button is one of the Bootstrap components.
There are other methods too but this is the easiest and fastest method to use Bootstrap. You can also give it a goal by downloading the latest Bootstrap files and then uploading it to your site replacing the script source in the code.
If you are a WordPress user and wants to use this feature on your site,
Understanding Bootstrap Buttons Sizing.
Bootstrap has much more exciting things with Buttons. Well, customization is the need and Bootstrap is indeed customizable.
You can edit the button sizes and colors according to your purpose. Bootstrap has made it easy to edit button’s colors and styles according to the user’s needs.
You can change or set the sizes of the Bootstrap buttons by simply adding the size class in the button snippet. By default, there are four different classes for changing the button’s sizes.
Button classes are as follows.
- .btn-lg : For showing large buttons.
- .btn-md : For showing medium sized buttons.
- .btn-sm : For showing small sized buttons.
- .btn-xs : For showing extra-small buttons.
The code snippets for the large, medium, small and extra-small buttons are given as follows.
<!-- How to use Bootstrap Buttons -->
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
The size of the buttons can also be changed by declaring the font-size style property in the Button code snippet. This is useful when you want to add custom sizes to your buttons.
Suppose we want to create two different buttons with custom sizes, 32 pixels and 20pixels then we will modify the code as follows.
<button type="button" class="btn btn-secondary" style="font-size: 32px;">Custom Size 1</button>
<button type="button" class="btn btn-secondary" style="font-size: 20px;">Custom Size 2</button>
The above example results in this,
Like sizes Bootstrap also allows us to change the button’s color. So let’s hop-up to our next topic of Button colors.
Understanding Bootstrap Button Colors (Types).
Do you know why I’ve written the “types” in the above title ? That’s because, by default, Bootstrap offers 6 different types of Buttons and the only difference between them is their colors.
Whether you can say them types or colors, it works the same way. As we have already discussed the types above, we know that,
- .btn-default : Shows default white color button.
- .btn-primary : Shows primary with Blue color button.
- .btn-success : Shows success notification with a green color button.
- .btn-info : Shows information sky-blue color button.
- .btn-warning : Shows warning button with yellow color.
- .btn-danger : Shows danger with the red color button.
The example code for this is already mentioned above.
I know what you’re thinking. What if you want to use other than these six colors ? Don’t worry, it’s pretty simple.
We had used a font-size style to customize button size, similarly, here we will use the background-color property to change the button’s color, Okay ?
Suppose, if we want an Orange colored Bootstrap button, then we have to modify the button code snippet as follows.
<button type="button" class="btn btn-default" style="background-color: orange;">Orange Button</button>
<button type="button" class="btn btn-default" style="background-color: #43c6db;">Blue Button</button>
<button type="button" class="btn btn-default" style="background-color: #25383c;">Grey Button</button>
The above code results as follows.
In this way, you can manually change the color of the Bootstrap buttons in your projects.
This color property is valid for all the types of Bootstrap buttons. If you’ll focus on the code, you will come to see that I’ve used the default button class. You are free to use primary or any other classes. Bootstrap is so easy, isn’t it ?
Furthermore, Bootstrap also allows you to frame a block level buttons.
Understanding the Block level buttons.
Block level buttons are full-width buttons. Or simply a button which occupies the container width. This means that the width of the button depends on the parent element’s width. Here is the example.
These buttons will occupy full width the parent container.
The example code for the above buttons is given as follows.
<button class="btn btn-primary btn-block" type="button">Block level 1</button>
<button class="btn btn-secondary btn-block" type="button">Block level 2</button>
Thus, Bootstrap uses the .btn-block class to display Block-level buttons.
Understanding Active & Disabled state buttons.
Sometimes users often want to disable the buttons. Like if the content is expired or not appropriate to use, you can use “disabled state” feature. This will not let the users click on the buttons. On the other hand, it will show a disabled symbol on hovering the button.
Active buttons are represented as a current state or active state.
Thus, the example for the Active/ disabled buttons goes here.
For the active state, you have to use the active class. For the disabled state, you have to use the disabled class. Thus, the code can be modified as follows.
<button type="button" class="btn btn-primary active">Active State</button>
<button type="button" class="btn btn-primary disabled">Disabled State</button>
The above example shows the result as follows.
As you can see that in the active state it looks like the button is already clicked or active. And, in the disabled state you are not able to click on it.
These are some of the exciting features of Bootstrap buttons. Unlike others, Bootstrap buttons don’t mess up with your theme or script. It remains unique and different from others for desired user interface.
Understanding the Outline Buttons.
Furthermore, Bootstrap has shown more uniqueness in Bootstrap 4, the latest version of Bootstrap. The new types of buttons are added in Bootstrap 4 also known as Outline Buttons. Trust me it looks really awesome on mobile as well as PC.
The outline buttons has different classes than the normal Bootstrap buttons. For Example : the .bnt-primary class is replaced by .btn-outline-primary class. Let me show you the example code for outline buttons.
It is little bit similar to the normal Bootstrap buttons. Take a look.
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
The above code runs as given below. As you can see that there are outlines rather than a background color in the example below.
Including buttons, Bootstrap has also shown advancements in other components too. I will be sharing more about Bootstrap 4 in the upcoming topics.
Points to remember.
- These codes will not work if you will not include the Bootstrap files.
- Bootstrap 3 and Bootstrap 4 has different files. Make sure you are including any one version (Latest Recommended).
- Before making any changes to your theme, Back it up.
- Changing the default size and color will require <style> attribute in the snippet. Don’t forget that.
- Classes are the most important element. Always use the proper class.
- Bootstrap is free to download and use. Create something “fabulous” using it.
If you liked this post (How to use Bootstrap buttons) do share it with your friends on Facebook and Twitter. Have any queries in your mind ? Make the use of comment block. Hope this posts will help you lot. Okay guys. See you next time. bye.