How to remove bootstrap button outline?

Hi 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.

Bootstrap, Button, Outline

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.

Bootstrap, Remove, Outline, Button

All the best 👍