Bootstrap 4 Buttons Tutorial With Example

In Bootstrap 4 Buttons Tutorial With Example, you will learn how to create and modify buttons with Bootstrap 4. A Bootstrap 4 button can be styled regarding its sizedisplay property, style and whether it is active. In Bootstrap 4, there are some changes in the button classes to improve the user experience

Bootstrap 4 Buttons Tutorial With Example

Button elements should include “.btn” class at the minimum to be identified as a button. The “.btn” class can added to HTML elements like  <a>,<button>, <input> and <label>.

#1: Bootstrap 4 Buttons Style

Various classes are available in Bootstrap for styling the buttons as well as to indicate the different states. The following list is the different buttons which are available in the Bootstrap 4.

  • Basic            –            This is a basic button.
  • Primary        –            This button provides extra visual weight to indicate the primary action button                                     in a set of buttons.
  • Secondary   –            This button is referred to as an alternate or secondary button.
  • Success        –           Indicates a successful or positive action.
  • Info                –           This button is used for showing information.
  • Warning         –          This button indicates caution should be taken with this action.
  • Danger          –           This button Indicates a dangerous or potentially negative action.
  • Dark              –            Button with a dark background.
  • Light              –           Button with light gray color.
  • Link               –           You can also create a link button without background.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Buttons Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Button Styles</h2>
  <button type="button" class="btn">Basic</button>
  <button type="button" class="btn btn-primary">Primary</button>
  <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-dark">Dark</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-link">Link</button>  
</div>
</body>
</html>

The output of the example looks like below image.

bootstrap 4 buttons tutorial

#2: Bootstrap 4 Button Element

The button classes can be used on a <a><button>, or <input> element. You can also apply the button styles to a <label> element when working with radio buttons and checkboxes.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Buttons Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Button Elements</h2>
  <a href="#" class="btn btn-primary" role="button">Link Button</a>
  <button type="button" class="btn btn-primary">Button</button>
  <input type="button" class="btn btn-primary" value="Input Button">
  <input type="submit" class="btn btn-primary" value="Submit Button">  
</div>
</body>
</html>

The output of the example looks like below image.

bootstrap 4 buttons example

#3: Bootstrap 4 Button Outline

A different thing you can do with Bootstrap 4 buttons in making them display outlined instead of being filled with a color. Use Bootstrap 4’s .btn-outline classes to apply the semantic color to the outline only.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Buttons Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Button Outline</h2>
  <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>
  <button type="button" class="btn btn-outline-dark">Dark</button>
  <button type="button" class="btn btn-outline-light text-dark">Light</button>
</div>
</body>
</html>

The output of the example looks like below image.

bootstrap 4 button outline example

#4: Bootstrap 4 Button Size

Bootstrap 4 provides different button sizes like large, default and small. The extra small option available in Bootstrap 3 was removed in Bootstrap 4.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Buttons Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Button Sizes</h2>
  <button type="button" class="btn btn-info btn-lg">Large</button>
  <button type="button" class="btn btn-info btn-md">Default</button>    
  <button type="button" class="btn btn-info btn-sm">Small</button>
</div>
</body>
</html>

The output of the example looks like below image.

bootstrap 4 button size example

#5: Bootstrap 4 Block Level Buttons

You can also create block level buttons by adding an extra class .btn-block. Buttons that covers a full width of the parent elements.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Buttons Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-block">Button 1</button>
  <button type="button" class="btn btn-block">Button 2</button>

  <h2>Large Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button>
  <button type="button" class="btn btn-lg btn-block">Button 2</button>

  <h2>Small Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button>
  <button type="button" class="btn btn-sm btn-block">Button 2</button>
</div>
</body>
</html>

The output of this example looks like below image.

bootstrap 4 block level button example

#6: Bootstrap 4 Active/Disabled Buttons

By default when a button is pressed, it will be changed to the darker color to indicate it is in an active state. A button can set to an active or a disabled state.

The  .active class makes a button appear pressed, and the disabled attribute makes a button unclickable.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Buttons Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Button States</h2>
  <button type="button" class="btn btn-info active">Active Primary</button>
  <button type="button" class="btn btn-info" disabled>Disabled Primary</button>
  <a href="#" class="btn btn-info disabled">Disabled Link</a>
</div>
</body>
</html>

The output of this example looks like below image.

bootstrap 4 button states example

Note that <a> elements do not support the disabled attribute and must, therefore, use the .disabled class to make it visually appear disabled.

#7: Toggle Checkboxes & Radio Buttons

You can apply the Bootstrap 4 button styles to checkboxes and radio buttons to provide a toggle feature. To do this, nest the radio buttons or checkboxes inside a <label> element that has the applicable button class applied. Also, nest the elements inside a .btn-group element that also has data-toggle="buttons" applied.

Checkboxes

Click some buttons to see the toggle effect.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Buttons Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Checkboxes</h2>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" name="options" id="option1" autocomplete="off" checked> India
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" name="options" id="option2" autocomplete="off"> USA
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" name="options" id="option3" autocomplete="off"> UK
  </label>
</div>
</div>
</body>
</html>

The output of this example looks like below image.

bootstrap 4 toggle checkbox example

Radio Buttons

Click some buttons to see the toggle effect.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Buttons Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Radio Buttons</h2>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> India
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> USA
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> UK
  </label>
</div>
</div>
</body>
</html>

The output of this example looks like below image.

bootstrap 4 toggle radiobutton example

At last, our Bootstrap 4 Buttons Tutorial With Example is over.

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.