My Blog

Bootstrap Buttons

—

by

Awais Farooq
in

There are seven styles to add a button in Bootstrap. Use the following classes to achieve the different button styles:

  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link

Bootstrap Button Example: specifying seven styles

<!DOCTYPE html>  

<html lang="en">  

  <head>  

     <title>Job</title>  

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  

  </head>  

  <body>  

    <h1>Button Example!</h1>  

  

<button class="btn btn-default">default</button>  

<button class="btn btn-primary">primary</button>  

<button class="btn btn-danger">danger</button>  

<button class="btn btn-success">success</button>  

<button class="btn btn-info">info</button>  

<button class="btn btn-warning">warning</button>  

<button class="btn btn-link">Link</button>  

  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  

  </body>  

</html> 

There are 3 types of new buttons added in Bootstrap 4 along with 7 buttons given in Bootstrap 3.

These 3 buttons are:

  • Secondary
  • Dark
  • Light

The following classes are used to specify them respectively:

<button type="button" class="btn btn-secondary">Secondary</button>  

<button type="button" class="btn btn-dark">Dark</button>  

<button type="button" class="btn btn-light">Light</button> 

    Example:

    Let’s see all buttons supported in Bootstrap 4.

    <!DOCTYPE html>  

<html lang="en">  

<head>  

  <title>Bootstrap 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-beta.2/css/bootstrap.min.css">  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></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> 

    Bootstrap Button Size

    In Bootstrap, you can choose a button according to your requirement. It provides four button sizes.

    The following classes define the different sizes:

    • .btn-lg
    • .btn-md
    • .btn-sm
    • .btn-xs

    Example:

    <!DOCTYPE html>  

<html lang="en">  

<head>  

  <title>Bootstrap 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/3.3.6/css/bootstrap.min.css">  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

</head>  

<body>  

  

<div class="container">  

  <h2>Button Sizes</h2>  

  <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>  

</div>  

  

</body>  

</html> 

    Bootstrap Enable/Disable Buttons

    You can set a button disable or unclickable state.

    The .active class is used to make a button appear pressed, and the class .disabled makes a button unclickable:

    Example:

    <!DOCTYPE html>  

<html lang="en">  

<head>  

  <title>Bootstrap 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/3.3.6/css/bootstrap.min.css">  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

</head>  

<body>  

  

<div class="container">  

  <h2>Button States</h2>  

  <button type="button" class="btn btn-primary">Primary Button</button>  

  <button type="button" class="btn btn-primary active">Active Primary</button>  

  <button type="button" class="btn btn-primary disabled">Disabled Primary</button>  

</div>  

  

</body>  

</html> 

    Bootstrap Block level buttons

    The block level button covers the entire width of the parent element.

    The .btn-block class is used to create a block level button:

    Example:

    <!DOCTYPE html>  

<html lang="en">  

<head>  

  <title>Bootstrap 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/3.3.6/css/bootstrap.min.css">  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></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-default 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-default 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-default btn-sm btn-block">Button 2</button>  

</div>  

  

</body>  

</html> 

    Button Classes with other elements

    You can use button classes with other tags i.e. <a>, <button>, or <input> element etc.

    Example:

    <!DOCTYPE html>  

<html lang="en">  

<head>  

  <title>Bootstrap 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-beta.2/css/bootstrap.min.css">  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  

</head>  

<body>  

  

<div class="container">  

  <h2>Button Classes with other Elements</h2>  

  <a href="#" class="btn btn-info" role="button">Link Button</a>  

  <button type="button" class="btn btn-info">Button</button>  

  <input type="button" class="btn btn-info" value="Input Button">  

  <input type="submit" class="btn btn-info" value="Submit Button">  

</div>  

  

</body>  

</html> 

    Button Outline/ Bordered buttons

    Bootstrap 4 provides eight outline/bordered buttons:

    Example

    <!DOCTYPE html>  

<html lang="en">  

<head>  

  <title>Bootstrap 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-beta.2/css/bootstrap.min.css">  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  

</head>  

<body>  

  

<div class="container">  

  <h2>Button Outline/ Bordered Buttons</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> 

      Comments

      Leave a Reply

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