Open In App

Bootstrap 5 Button Outline

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 provides a series of classes that can be used to create outline buttons in our project, i.e. buttons without background color. The outline button classes remove any background color or background image style applied to the buttons. We will use .btn-outline-* class to create the outline button, where * is replaced with the color name.

Button Outline Classes:

  • .btn-outline-primary
  • .btn-outline-secondary
  • .btn-outline-success
  • .btn-outline-danger
  • .btn-outline-warning
  • .btn-outline-info
  • .btn-outline-light
  • .btn-outline-dark

Syntax:

<button type="button" class="btn btn-outline-*">
    *
</button>

 

Example 1: In this example, we will use button outline classes to create the outline buttons.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap 5 Button Outline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        rel="stylesheet" integrity=
        "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
        integrity=
        "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
      
</head>
  
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Button Outline</h2>
  
        <button type="button" class="btn btn-outline-primary">
            Primary Outline Button
        </button>
        <button type="button" class="btn btn-outline-secondary">
            Secondary Outline Button
        </button>
        <button type="button" class="btn btn-outline-success">
            Success Outline Button
        </button>
        <button type="button" class="btn btn-outline-danger">
            Danger Outline Button
        </button>
        <br><br>
  
        <button type="button" class="btn btn-outline-warning">
            Warning Outline Button
        </button>
        <button type="button" class="btn btn-outline-info">
            Info Outline Button
        </button>
        <button type="button" class="btn btn-outline-light">
            Light Outline Button
        </button>
        <button type="button" class="btn btn-outline-dark">
            Dark Outline Button
        </button>
    </div>
</body>
  
</html>


Output:

 

Example 2: In this example, we will use button outline classes to create the outline buttons with font awesome icons.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap 5 Button Outline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        rel="stylesheet" integrity=
        "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
        integrity=
        "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
  
    <link rel="stylesheet" href=
</head>
  
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Button Outline</h2>
  
        <button type="button" class="btn btn-lg btn-outline-primary">
            <i class="fa fa-home"></i>
        </button>
        <button type="button" class="btn btn-lg btn-outline-secondary">
            <i class="fa fa-code"></i>
        </button>
        <button type="button" class="btn btn-lg btn-outline-success">
            <i class="fa fa-folder"></i>
        </button>
        <button type="button" class="btn btn-lg btn-outline-danger">
            <i class="fa fa-file"></i>
        </button>
        <button type="button" class="btn btn-lg btn-outline-warning">
            <i class="fa fa-filter"></i>
        </button>
        <button type="button" class="btn btn-lg btn-outline-info">
            <i class="fa fa-barcode"></i>
        </button>
        <button type="button" class="btn btn-lg btn-outline-light">
            <i class="fa fa-bug"></i>
        </button>
        <button type="button" class="btn btn-lg btn-outline-dark">
            <i class="fa fa-gears"></i>
        </button>
    </div>
</body>
  
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/components/buttons/#outline-buttons



Last Updated : 06 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads