How to create an outline button in Bootstrap 4 ?
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= integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <script src= integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"> </script> <script src= 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= <script src= </script> <script src= </script> <script src= </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:
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= integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src= </script> <script src= </script> integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <link rel="stylesheet" href=</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> |
Output:
Bootstrap outline buttons with different size and icons in Bootstrap.
Please Login to comment...