How to make bootstrap button transparent ?
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 = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 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 --> < script src = "https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity = "sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin = "anonymous" ></ script > < script src = "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity = "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin = "anonymous" ></ script > < script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" 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