No doubt, Bootstrap has changed the designing era of Websites. A Responsive and Mobile First Framework which was commenced years ago by the Twitter Inc. in now empowering millions of websites. For Beginners who are new to Bootstrap, It is a free and open-source front-end website structure which is used to design sites and web applications. In this post, I’m going to guide you about Bootstrap Buttons & different methods to use Bootstrap Buttons on your website.
How to use Basic 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.
<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 Integrate 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.)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"></script>
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 colours according to your purpose. Bootstrap has made it easy to edit button’s colours 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.
<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 colour. So let’s hop-up to our next topic of Button colours.
Understanding Bootstrap Button Colours (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 colours.
Whether you can say them types or colours, it works the same way. As we have already discussed the types above, we know that
- .btn-default: Shows default white colour button.
- .btn-primary: Shows primary with the Blue colour button.
- .btn-success: Shows success notification with a green colour button.
- .btn-info: Shows information sky-blue colour button.
- .btn-warning: Shows warning button with yellow colour.
- .btn-danger: Shows danger with the red colour 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 colours? Don’t worry, it’s pretty simple.
We had used a font-size style to customise button size, similarly, here we will use the background-color property to change the button’s colour, Okay?
Suppose, if we want an Orange coloured 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 colour of the Bootstrap buttons in your projects.
This colour 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 Bootstrap 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 Bootstrap 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 have 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 pretty 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 colour 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 colour 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.
Related Posts for you:
If you liked this post do share it with your friends on Facebook and Twitter. Have any queries in your mind? Make the use of comment box.