Open In App

How to make bootstrap button transparent ?

Improve
Improve
Like Article
Like
Save
Share
Report

Buttons can be made transparent in Bootstrap by using the built-in class property:

Syntax:

<button class="btn bg-transparent">
    Transparent button
</button>

Description:

  • The <button> tag is used to specify the button element in HTML, which gets executed on pressed.
  • Generally, the properties of bootstrap must be mentioned in class. Example: class=” “
  • Inside the class=” ”
    btn – On mentioning the btn property, specifies that its a bootstrap button.
    bg – Specifies the background color of the button.
    transparent – Makes the button transparent.

How to use it:
Make sure, you have included the bootstrap code (Starter Template) in your code.

Example:




<!doctype html>
<html lang="en">
  
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1
                   shrink-to-fit=no">
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href=
          integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
          crossorigin="anonymous">
  
    <title>Hello, world!</title>
</head>
  
<body>
  
    <button class="btn bg-transparent">
  
        Transparent button
    </button>
  
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
            integrity=
"sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
            crossorigin="anonymous"></script>
    <script src=
            integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
            crossorigin="anonymous"></script>
    <script src=
            integrity=
"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" 
            crossorigin="anonymous"></script>
</body>
  
</html>


Output:
Before Pressing:

After pressing:

The documentation of Bootstrap is well-structured and easy to understand.
Reference: Official Documentation



Last Updated : 22 Apr, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads