Bootstrap 4 Buttons Tutorial
Buttons are one of basic elements of any UI framework. In our earlier article we have seen many examples of Bootstrap 3 buttons. In Bootstrap 4, there are minor changes in the button classes to improve user experience. For example, the default button class ".btn-dafault" is being changed to a secondary button with the class ".btn-secondary" and the extra small button class ".btn-xs" is being dropped. In this tutorial, let us explore more on creating different types of buttons with Bootstrap 4.
Basics of Bootstrap 4 Buttons
Before creating buttons do remember the following points:
- All button elements should include “.btn” class at the minimum to be identified as a button.
- Additional classes will only determine further styling of the button in addition to “.btn” class.
- The “.btn” class can be added to HTML elements like <button>, <a>, <input> and <label>.
- Script files are required only for the “Bootstrap Plugins” section to create toggle effect. All other buttons are covered under the CSS file. You can refer the starter template for more details.
Basic Default Buttons
You can create different colors of buttons using background utility classes to ".btn" class.
- Primary – this is the primary or main button used with blue color .
- Secondary – the white color button is referred as alternate or secondary button.
- Success – green button used for positive actions.
- Info – Light blue button used for showing information.
- Warning – yellow button used for warning actions.
- Danger – Red button used for error actions.
- Light – Button with lightgray color.
- Dark – Button with dark background.
- Link – In addition to background colors, you can also create a link button without background.
The primary button code should look like
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap 4 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <!-- Start of Button --> <button type="button" class="btn btn-primary">Primary</button> <!-- End of Button --> <!-- Bootstrap 4 Scripts --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html> |
As explained, ".btn" class identifies the element as a button and ".btn-primary" class is used to create the button with primary (blue) color. Similarly other button codes are given below:
1 2 3 4 5 6 7 8 | <button type="button" class="btn btn-secondary">Secondary</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-light">Light Button</button> <button type="button" class="btn btn-dark">Dark Button</button> <button type="button" class="btn btn-link">Link</button> |
The last item is a link button which will look like a text link on display but act like a button when clicked on or hovered over. The default buttons will look like below on the browser:
Button Tags - Using Button Classes with Different Tags
Button classes are supported in <button>, <a> and <input> elements. Below are the code examples for using Bootstrap button classes with different HTML tags:
1 2 3 4 5 | <a class="btn btn-primary" href="#" role="button" style="color:white;">Anchor Tag</a> <button class="btn btn-primary" type="submit">Button</button> <input class="btn btn-primary" type="button" value="Input tag with type button"> <input class="btn btn-primary" type="submit" value="Input tag with type submit"> <input class="btn btn-primary" type="reset" value="Input tag with type reset"> |
Though the elements and attributes are different, the look will be decided based on the CSS classes used. In the above example, we have used "btn-primary", hence all the buttons will be created with primary blue color.
Outline Buttons
Bootstrap 4 also has a new variation for creating outlined buttons instead of the regular buttons with filled colors. You need to add the outline class like below in order to create outlined buttons with different colors:
1 2 3 4 5 6 7 8 | <button type="button" class="btn btn-outline-primary">Primary Outline</button> <button type="button" class="btn btn-outline-secondary">Secondary Outline</button> <button type="button" class="btn btn-outline-success">Success Outline</button> <button type="button" class="btn btn-outline-info">Info Outline</button> <button type="button" class="btn btn-outline-warning">Warning Outline</button> <button type="button" class="btn btn-outline-danger">Danger Outline</button> <button type="button" class="btn btn-outline-light text-dark">Light Outline</button> <button type="button" class="btn btn-outline-dark">Dark Outline</button> |
The outlined buttons will look like below and will show the corresponding colors on hover:
Remember to include additional text utility class ".text-dark" with button with light outline. Otherwise the text may not be visible clearly.
Different Sizes
Bootstrap 4 allows you to create three button sizes - large, default and small. The extra small option available in Bootstrap 3 was removed in Bootstrap 4. The different sizes are shown below with warning style:
Here is the code creating button with different sizes:
1 2 3 | <button type="button" class="btn btn-warning btn-lg">Large button</button> <button type="button" class="btn btn-warning">Default button</button> <button type="button" class="btn btn-warning btn-sm">Small button</button> |
The ".btn-lg" and".btn-sm" classes are used for larger size and smaller sizes.
Full Width Block Buttons
All the above examples create buttons of size based on text length, padding and margins. There is also an option to create a block button which will inherit the width from the parent element. This is useful to create full width buttons by wrapping the button code inside any parent element (like <div> tag) of 100% width.
Just add the ".btn-block" class to create block buttons and the code for block button should look like below:
1 2 3 4 | <div> <button type="button" class="btn btn-success btn-block">Full Width Success Block Button</button> <button type="button" class="btn btn-secondary btn-block">Full width Secondary Block Button</button> </div> |
Active and Disabled Buttons
By default when a button is pressed, it will be changed to a darker color to indicate it is in a active state. You can also manually force the active state of a button when it is loaded by adding ".active" class along with aria-pressed="true" attribute. . Similarly you can disable the button clicks by adding ".disabled" class.
1 2 | <a href="#" class="btn btn-info active" role="button" aria-pressed="true" style="color:white;">Active Link Info Button</a> <button type="button" class="btn btn-success" disabled aria-disabled="true">Disabled Success Button</button> |
Below is how it will looks on the browser. When you hover over the disabled button, the cursor will be changed like a stop symbol with no option to click.
1. Note the ".disabled" element is not supported with <a> tag. Though the button looks like disabled with dim color, the hyperlink will continue to work like normal when clicked on.
2. The ".disabled" class uses "pointer-events:none;" to disable the mouse clicks. But the element can still be focused and pressed using keyboard keys.
3. The ".disabled" class is not part of the base ".btn" class, it should be added outside the button classes.
Buttons Plugin
As of now what we have discussed are the buttons styled with "bootstrap.min.css". In next sections you will see creating toggle effects with JavaScript included in "bootstrap.min.js" file.
Button Toggle with Click
Simply add data-toggle="button" in order to toggle the button to active state on click.
1 2 3 | <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> Click the button to see the toggle effect </button> |
If you want to load the button with active state toggled then you need to manually add ".active" class as explained before for creating active buttons. Also add aria-pressed="true" to inform screen readers that the button is loaded in active state. You can view the demo of all Bootstrap 4 buttons here.
Button Toggle with Checkbox
Similar to individual button toggle, you can also use the toggle function on button groups with checkboxes and radio buttons. Checkbox option allows you to select or toggle more than one button using <label> tags like below.
1 2 3 4 5 6 7 8 9 10 11 | <div class="btn-group" data-toggle="buttons"> <label class="btn btn-secondary active"> <input type="checkbox" checked autocomplete="off"> Option 1 (selected) </label> <label class="btn btn-secondary"> <input type="checkbox" autocomplete="off"> Option 2 </label> <label class="btn btn-secondary"> <input type="checkbox" autocomplete="off"> Option 3 </label> </div> |
In this example, the first button is loaded in active status using ".active" class with "checked" parameter for <input> tag. And the below picture shows the state after clicking on the second button (both first and second buttons are selected like checkbox).
Button Toggle with Radio Buttons
The radio buttons option is used to toggle one button at a time similar to choosing regular radio buttons.
Below is the code for creating button groups with radio buttons toggle.
1 2 3 4 5 6 7 8 9 10 11 | <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="options" id="option1" autocomplete="off" checked> Option 1 (selected) </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2" autocomplete="off"> Option 2 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3" autocomplete="off"> Option 3 </label> </div> |