Showing posts with label Bootstrap Button. Show all posts
Showing posts with label Bootstrap Button. Show all posts

Monday 20 September 2021

Bootstrap Buttons

Bootstrap Button's provides several predefined button styles, each serving its own purpose. The button classes can be used on <a>, <button>, or <input> elements. Differect custom button styles include btn, btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, btn-dark, btn-link etc. To avoid text to wrap, use the .text-nowrap class to the bootstrap button. 

Code :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Button's - Button Styles</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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

    <div class="container">
        <div class="card">
            <div class="card-header">
                <h2>Bootstrap Button's - Button Styles</h2>
            </div>
            <div class="card-body">
                <button type="button" class="btn">Basic</button>
                <button type="button" class="btn btn-primary">Primary</button>
                <button type="button" class="btn btn-secondary">Secondary</button>
                <button type="button" class="btn btn-dark">Dark</button>
                <button type="button" class="btn btn-success">Success</button>
                <button type="button" class="btn btn-info">Info</button>
                <button type="button" class="btn btn-warning">Warning</button>
                <button type="button" class="btn btn-danger">Danger</button>
                <button type="button" class="btn btn-light">Light</button>
                <button type="button" class="btn btn-link">Link</button>
            </div>
        </div>
    </div>

</body>
</html>

Output :


Bootstrap Button's

Bootstrap Outline Button's

Bootstrap provides outline/bordered buttons with an additional "hover" effect. Bootstrap Outline Button's use classes btn-outline-primary, btn-outline-secondary, btn-outline-success, btn-outline-danger, btn-outline-warning, btn-outline-info, btn-outline-light, btn-outline-dark etc.

Code :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Outline Button's - Button Styles</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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h2>Bootstrap Outline Button's - Button Styles</h2>
            </div>
            <div class="card-body">
                <button type="button" class="btn btn-outline-primary">Primary</button>
                <button type="button" class="btn btn-outline-secondary">Secondary</button>
                <button type="button" class="btn btn-outline-dark">Dark</button>
                <button type="button" class="btn btn-outline-success">Success</button>
                <button type="button" class="btn btn-outline-info">Info</button>
                <button type="button" class="btn btn-outline-warning">Warning</button>
                <button type="button" class="btn btn-outline-light">Light</button>
                <button type="button" class="btn btn-outline-danger">Danger</button>
    
            </div>
        </div>
    </div>

</body>
</html>

Output :


Bootstrap Outline Button's

Bootstrap Button Tags

Bootstrap Button style classes can be used with <button> element, <a> element or <input> element. When using bootstrap button  classes with <a> element for triggering page functionality rather than linking to new page mension button tag role="button" to convey there message to screen readers.

Code :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Button's - Button Tag</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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
   
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h2>Bootstrap Button's - Button Tag</h2>
            </div>
            <div class="card-body">
                <a class="btn btn-info" href="#" role="button">Link</a>
                <button class="btn btn-info" type="submit">Button</button>
                <input class="btn btn-info" type="button" value="Input">
                <input class="btn btn-info" type="submit" value="Submit">
                <input class="btn btn-info" type="reset" value="Reset">

            </div>
        </div>
    </div>

</body>
</html>


Output :


Bootstrap Button's - Button Tag