Home >>Bootstrap Tutorial >Bootstrap Buttons

Bootstrap Buttons

Bootstrap buttons uses different classes with different tags for better appearance. For apply custom styles to button, you can use tags, like <button>, <input>, <a>. By using bootstrap buttons you can sizing the buttons, outline the button and also you can active the state buttons. And, also provides effects on buttons like toggle, radio and checkbox buttons.

Let's take an example of bootstrap buttons:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Buttons</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</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-secondary">Secondary</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</body>
</html>

Output:

Button Sizes

Bootstrap buttons also provide the class to make the buttons larger and smaller. For this, you can class .btn-lg and .btn-sm for additional size.

Let's take an example of sizing the buttons:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Buttons</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<button type="button" class="btn btn-secondary btn-sm">Small</button>
<button type="button" class="btn btn-secondary">Default</button>
<button type="button" class="btn btn-secondary btn-lg">Large</button>
</div>
</body>
</html>

Output:

You can also create block level buttons by adding the class .btn-block. It can provide button width 100% of the parent element.

Let’s take an example of block level button:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Buttons</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<button type="button" class="btn btn-success btn-block">Block Level Button</button>
</div>
</body>
</html>

Output:

Outline Button

Outline button provides you class to styling a button. By using outline button you should add class .btn-outline-* to <button> tag. It provide you outline around the button and removes the background of button, but when hovering on button you can see the background color.

Note: * (select color as per your need)

Let's take an example of Outline button:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Buttons</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<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-primary">Primary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-link">Link</button>
</div>
</body>
</html>

Output:

Active/Disabled Button

By using this, you can active or disabled the button as per your needs. Sometimes, you want that when user clicks the button it’s not working (means unlikable). Disable buttons are visible but you cannot use it and active buttons are clickable you can use it.

Let's take an example of active or disabled button:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Buttons</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<a href="#" class="btn btn-success btn-lg active" role="button" aria-pressed="true">Primary link</a>
<button type="button" class="btn btn-lg btn-success" disabled>Primary button</button>
<a href="#" class="btn btn-danger btn-lg active" role="button" aria-pressed="true">Link</a>
<button type="button" class="btn btn-danger btn-lg" disabled>Button</button>
</div>
</body>
</html>

Output:

Primary link Link

« Previous Next »

Bootstrap Tutorial Bootstrap Introduction Bootstrap Example Bootstrap Container Bootstrap Jumbotron Bootstrap Grid System Bootstrap Alerts Bootstrap Typography Bootstrap Table Bootstrap Colors Bootstrap Forms Bootstrap Images Bootstrap Buttons Bootstrap Button Group Bootstrap Progress Bars Bootstrap Badges Bootstrap Pagination Bootstrap Cards Bootstrap Navs Bootstrap Fixed Navigation Bar Bootstrap Navigation Bar Bootstrap Collapse Bootstrap Carousel Bootstrap Modal Bootstrap Input Groups Bootstrap List Groups Bootstrap Tooltip Bootstrap Popover Bootstrap Flex Bootstrap Utilities Bootstrap Media Objects

Bootstrap Interview Questions

No Sidebar ads