Set less important stuff with grey outlined Bootstrap 4 Button

To set less important stuff in Bootstrap, use the btn-outline-secondary class.

The outline is applied on a button and a green color is applied using the same class −

<button type="button" class="btn btn-outline-secondary">
  Tools (Secondary Outline)
</button>

Above, I have set the btn-outline-secondary class as any normal class set on any element, which is button here.

You can try to run the following code to learn how to set grey outline Bootstrap Button −

Example

Live Demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  </head>
<body>
  <h2>Web Tools</h2>
  <p>The following are the Tools:</p>
  <ul class = "list-group">
    <li class = "list-group-item">JSON Editor</li>
    <li class = "list-group-item">XML Editor</li>
  </ul>
  <p>For more, click below:</p>
  <button type="button" class="btn btn-outline-secondary"> Tools (Secondary Outline)</button>

</body>
</html>

Alex Onsman

Published on 09-Jul-2018 19:49:58

Previous Page Print Page