Bootstrap 5 Buttons Button tags
Bootstrap 5 Buttons Button tags are used to create buttons using <a>, <button>, and <input> elements. To design the button tags, we will use .btn class. After applying the .btn class on <a>, <button>, and <input> elements, browsers can render the elements in slightly different styles.
Button tags used Class:
- .btn: This class is used to display the button tag after applying on <a>, <button>, and <input> elements.
Syntax:
<a class="btn btn-*" href="#" role="button"> Button </a> <button class="btn btn-*" type="submit"> Button </button> <input class="btn btn-*" type="button" value="Button">
Example 1: In this example, we will create button tags after applying .btn class on <a>, <button>, and <input> elements.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap 5 Buttons Button tags</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body style = "text-align:center;" > < div class = "container mt-3" > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Bootstrap 5 Buttons Button tags</ h2 > < a href = "#" class = "btn btn-success" role = "button" > w3wiki </ a > < button class = "btn btn-success" type = "submit" > HTML </ button > < input class = "btn btn-success" type = "button" value = "CSS" > < input class = "btn btn-success" type = "submit" value = "JavaScript" > < input class = "btn btn-success" type = "reset" value = "Bootstrap" > </ div > </ body > </ html > |
Output:
Example 2: In this example, we will create outline button tags after applying .btn class on <a>, <button>, and <input> elements.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap 5 Buttons Button tags</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body style = "text-align:center;" > < div class = "container mt-3" > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Bootstrap 5 Buttons Button tags</ h2 > < a href = "#" class = "btn btn-outline-success" role = "button" > w3wiki </ a > < button class = "btn btn-outline-success" type = "submit" > HTML </ button > < input class = "btn btn-outline-success" type = "button" value = "CSS" > < input class = "btn btn-outline-success" type = "submit" value = "JavaScript" > < input class = "btn btn-outline-success" type = "reset" value = "Bootstrap" > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/buttons/#button-tags
Contact Us