How to create an outline button in Bootstrap 4 ?

12 Dec, 2021
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” 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>
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:
Buttons Outline types in  Bootstrap4
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>
Bootstrap Spinner within a button
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>
  
Bootstrap outline buttons with different size and icons in Bootstrap.
 
varshagumber28
Bootstrap-Questions
HTML-Questions
Picked
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.