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:
Buttons Outline types in Bootstrap4Example 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>
Output:
Bootstrap outline buttons with different size and icons in Bootstrap.
Similar Reads
How to Create "Add to cart" Button in Bootstrap?
Creating an "Add to Cart" button in Bootstrap is simple and helps improve the shopping experience on your website. Bootstrap has ready-made styles that make it easy to create buttons that look good and work well on all devices.Approach to creating an "Add to cart" Button in BootstrapUse a Bootstrap
2 min read
How to create block level buttons in Bootstrap ?
In many websites, we notice that there are big block level buttons used to perform some work when the user clicks on them. This is used to trigger some functions or redirect the user to a different link. Block buttons are the responsive stack of buttons of full width. We will use the below approach
2 min read
How to create a basic button group in Bootstrap ?
Button: The .btn classes are used with the <button> element to create the basic button using Bootstrap. The buttons in bootstrap are used in forms, dialogs, etc. Button Groups in Bootstrap: In Bootstrap, button groups has group of buttons together on a single line. Button group is created usin
2 min read
Create Button Like a Link with Bootstrap 5
Bootstrap 5 has various classes that can be used to create different elements with highly customizable styling. By using Bootstrap Classes, we can create a button that looks similar to the link. In this article, we will create a button that looks like a link with Bootstrap 5 classes. We will explore
2 min read
How to Create Outline Button in HTML?
The Outline buttons give a clean visual appearance. The clear and visible border ensures the clear separation from the background and other elements and enhances readability. We can achieve the outline buttons effect using CSS Outline Property and CSS Border Property. Use the below approaches to Cre
2 min read
How to Remove Outline from Accordion Buttons in Bootstrap?
Bootstrap 5 provides a convenient way to create collapsible accordion elements. However, by default, accordion buttons receive an outline when focused for accessibility reasons. In some cases, you might want to remove this outline for aesthetic purposes, while ensuring that your website remains acce
3 min read
How to Customize Button Styles in Bootstrap ?
Customizing button styles in Bootstrap involves modifying predefined classes or creating custom CSS rules. This allows alignment with brand identity, and differentiation, and ensures design consistency across projects. We can customize button styles in Bootstrap using different approaches as listed
3 min read
How to get circular buttons in bootstrap 4 ?
It is an open source toolkit for developing with the HTML, CSS, and JS. It includes several types of buttons, styles, fonts each of them serving its own semantic purpose which is predefined, with a few extras thrown for more control. You can use Bootstrap custom button styles to create your buttons
2 min read
How to add Icons to Buttons in Bootstrap 5 ?
Adding Icons to the buttons enhances the overall look of the web page. Buttons are the components provided to create various buttons. Bootstrap 5 includes several predefined button styles, each serving its purpose. We can add icons to the buttons in several ways including Font Awesome Icons and Icon
2 min read
How do we create large button groups in Bootstrap ?
Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. It is one of the most popular front-end frameworks which has really a nice set of predefined CSS codes. It uses different types of classes to make responsi
5 min read