How to create an outline button in Bootstrap 4 ?

Last Updated : 24 Jul, 2024

Before performing with outline classes of bootstrap just know about a little bit of button outline. An outline on buttons means to give an outline around the buttons. This '.btn-outline' class removes all background colors or styles from the button for giving the Effective, lighter, and highlighter look to the button outside. Basically, the outline button is responsible for drawn a highlighted border around the button.

Outline of buttons are used for many purposes such as -

To give an effective look at buttons.
To Indicate an action beyond the current working mechanism.
To draw highlight outlines around buttons to give different look than normal buttons.
To make a button "Stand-Out".
To give different styles for actions in forms and dialogs.

Approach: In Bootstrap 4 has the default contextual classes or predefined class with the ".btn-outline" class, There are some built-in colored buttons that outline classes in bootstrap 4 which is used for a different purpose.

The button outline classes are:

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

Include Bootstrap4 and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>

Example 1: In this example, we can see all the types of button outline contextual classes in bootstrap and know how it is used along within a webpage.

HTML

<!DOCTYPE html>
<html>

<head>
    <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://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>
</head>

<body>
    <div class="container">
        <h1>Bootstrap Buttons Outline Examples</h1>
        <h5>There are some examples of buttons:-</h5>
        <br>

        <p>
            This is show Simple Button Outline<span>
                <button type="button" class="btn btn-outline-primary">
                    Primary
                </button>
            </span>
        </p>


        <br>

        <p>
            This is show Secondary Button Outline<span>
                <button type="button" class="btn btn-outline-secondary">
                    Secondary
                </button>
            </span>
        </p>


        <br>

        <p>
            This is show Success Button Outline<span>
                <button type="button" class="btn btn-outline-success">
                    Success
                </button>
            </span>
        </p>


        <br>

        <p>
            This is show Danger Button Outline<span>
                <button type="button" class="btn btn-outline-danger">
                    Danger
                </button>
            </span>
        </p>


        <br>

        <p>
            This is show Warning Button Outline<span>
                <button type="button" class="btn btn-outline-warning">
                    Warning
                </button>
            </span>
        </p>


        <br>


        <p>
            This is show Information Button Outline<span>
                <button type="button" class="btn btn-outline-info">
                    Info
                </button>
            </span>
        </p>

        <br>


        <p>
            This is show Light Button Outline<span>
                <button type="button" class="btn btn-outline-light">
                    Light
                </button>
            </span>
        </p>

        <br>


        <p>
            This is show Dark Button Outline<span>
                <button type="button" class="btn btn-outline-dark">
                    Dark
                </button>
            </span>
        </p>

        <br>
    </div>
</body>

</html>

Output:

Example 2: In this example, we use a spinner within the outline button in which the buttons are indicating an action is currently processing or taking place.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content
        ="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.2/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container">
        <h1>
            Bootstrap Spinner Button Examples in Bootstrap
        </h1>
        
        

<p>There are some examples of Spinner Button </p>


        
        <button type="button" class="btn btn-lg btn-outline">
            <div class="spinner-border">
            </div>
        </button>
        <br><br>
        <button type="button" class="btn btn-lg btn-outline-primary">
            <div class="spinner-border">
            </div>
        </button>
        <button type="button" class="btn btn-lg btn-outline-success">
            <div class="spinner-border">
            </div>
        </button>
        <button type="button" class="btn btn-lg btn-outline-warning">
            <div class="spinner-border">
            </div>
        </button>
        <button type="button" class="btn btn-lg btn-outline-danger">
            <div class="spinner-border">
            </div>
        </button>
        <button type="button" class="btn btn-lg btn-outline-info">
            <div class="spinner-border">
            </div>
        </button>
        <button type="button" class="btn btn-lg btn-outline-dark">
            <div class="spinner-border">
            </div>
        </button>
        <button type="button" class="btn btn-lg btn-outline-success">
            <div class="spinner-border">
            </div>
        </button>
    </div>
</body>

</html>

Output:

Example 3: In this example, we can see button outline contextual classes with different glyphicons and sizes.

HTML

<!DOCTYPE html>
<html>

<head>
    <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://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>

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

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous">
    </script>
    
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <div class="container">
        <h1>
            Bootstrap Buttons Outline 
            Examples in Different size 
        </h1>
        
        
<p>
            There are some examples of buttons 
            outline with different icons and 
            different size:-
        </p>


        
        <button type="button" class
            ="btn btn-sm btn-outline-primary">
            <i class="fa fa-home"></i>
        </button>
        
        <button type="button" class
            ="btn btn-md btn-outline-primary">
            <i class="fa fa-home"></i>
        </button>
        
        <button type="button" class=
            "btn btn-lg btn-outline-primary">
            <i class="fa fa-home"></i>
        </button><br><br>
        
        <button type="button" class=
            "btn btn-sm btn-outline-success"> 
            Home
        </button>
        
        <button type="button" class=
            "btn btn-md btn-outline-success"> 
            Home
        </button>
        
        <button type="button" class=
            "btn btn-lg btn-outline-success"> 
            Home
        </button>
        <br><br>
        
        <button type="button" class=
            "btn btn-sm btn-outline-danger">
            <i class="fa fa-home"></i> 
            Home
        </button>
        
        <button type="button" class=
            "btn btn-md btn-outline-danger">
            <i class="fa fa-home"></i> 
            Home
        </button>
        
        <button type="button" class=
            "btn btn-lg btn-outline-danger">
            <i class="fa fa-home"></i> 
            Home
        </button><br><br>
        
        <button type="button" class=
            "btn btn-lg btn-outline-primary">
            <i class="fa fa-asterisk"></i>
        </button>
        
        <button type="button" class=
            "btn btn-lg btn-outline-success">
            <i class="fa fa-circle"></i>
        </button>
        
        <button type="button" class=
            "btn btn-lg btn-outline-warning">
            <i class="fa fa-square"></i>
        </button>
        
        <button type="button" class=
            "btn btn-lg btn-outline-danger">
            <i class="fa fa-heart"></i>
        </button>
        
        <button type="button" class=
            "btn btn-lg btn-outline-info">
            <i class="fa fa-battery"></i>
        </button>
        
        <button type="button" class=    
            "btn btn-lg btn-outline-dark">
            <i class="fa fa-bell"></i>
        </button>
    </div>
</body>

</html>