How to remove bootstrap button outline?
May 18, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
In this tutorial, we will learn to create a bootstrap remove button outline.
Table of contents
- Includes bootstrap view
- Includes bootstrap library
- Define its class name
- Includes css in html page
This article will guide you to adding button block in Bootstrap with example.
To remove focus around the button outline:none property is used.
Syntax:
button {
// Remove focus around button
outline:none;
}Outline property: Outline is an element property which draws a line around element but outside the border. It does not take space from the width of an element like border.
Before button outline
Step 1: Includes bootstrap view
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Step 2: Includes bootstrap library
First of all, load the Bootstrap 4 framework CSS into the head tag of your webpage.
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> Step 3: Define its class name
<div>
<button type="submit"
style="margin:auto;display:block;">
click here
</button>
</div>Step 4: Includes css in html page
<style>
h1 {
text-align: center;
margin-top: 10%;
font-family: Arial;
color: #b40606;
}
button {
background-color: rgb(213, 216, 25);
font-size: xx-large;
cursor: pointer;
}
</style>Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html>
<head>
<title>
Bootstrap button outline
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<style>
h1 {
text-align: center;
margin-top: 10%;
font-family: Arial;
color: #b40606;
}
button {
background-color: rgb(213, 216, 25);
font-size: xx-large;
cursor: pointer;
}
</style>
</head>
<body>
<h1>
Bootstrap button outline
</h1>
<div>
<button type="submit"
style="margin:auto;display:block;">
click here
</button>
</div>
</body>
</html> Check the output of the above code example.
After button outline
Step 5: Includes css in html page
<style>
h1 {
text-align: center;
margin-top: 10%;
font-family: Arial;
color: #b40606;
}
button {
background-color: rgb(213, 216, 25);
font-size: xx-large;
border: none;
cursor: pointer;
outline: none;
}
</style>This example uses outline:none property to remove focus from button after clicking the button.
<!DOCTYPE html>
<html>
<head>
<title>
Remove bootstrap button outline
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<style>
h1 {
text-align: center;
margin-top: 10%;
font-family: Arial;
color: #b40606;
}
button {
background-color: rgb(213, 216, 25);
font-size: xx-large;
border: none;
cursor: pointer;
outline: none;
}
</style>
</head>
<body>
<h1>
Remove Bootstrap button outline
</h1>
<div>
<button type="submit" style="margin:auto; display:block;">
click here
</button>
</div>
</body>
</html>Check the output of the above code example.
All the best 👍
