Bootstrap 4 | Buttons - GeeksforGeeks

28 Apr, 2022
Bootstrap provides different classes that can be used with different tags, such as <button>, <a>, <input>, and <label> to apply custom button styles. Bootstrap also provides classes that can be used for changing the state and size of buttons. Also, it provides classes for applying toggle, checkbox and radio buttons like effects.Bootstrap contains many classes to set the style of the button element. The list of button classes are given below:
.btn
.btn-primary
.btn-secondary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-dark
.btn-light
.btn-link
   
Example:
html
<!DOCTYPE html><html lang="en"><head>    <title>Bootstrap Buttons</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.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head><body style="text-align:center;">    <div class="container mt-3">        <h1 style="color:green;">            GeeksforGeeks        </h1>        <h2>Buttons</h2>        <button type="button" class="btn btn-primary">            Primary</button>        <button type="button" class="btn btn-secondary">            Secondary</button>        <button type="button" class="btn btn-success">            Success</button>        <button type="button" class="btn btn-warning">            Warning</button>        <button type="button" class="btn btn-danger">            Danger</button>    </div></body></html>               
Note: The <a>, <button> and <input> elements are used to hold the button classes.
Example:
html
<!DOCTYPE html><html lang="en"><head>    <title>Bootstrap Buttons</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.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head><body style="text-align:center;">    <div class="container mt-3">        <h1 style="color:green;">            GeeksforGeeks        </h1>        <h2>Button Elements</h2>        <input class="btn btn-success"             type="button" value="Input Button">        <input class="btn btn-success"             type="submit" value="Submit Button">        <input class="btn btn-success"             type="reset" value="Reset Button">        <button class="btn btn-success" type="button">            Button</button>        <a href="#" class="btn btn-success" role="button">            Link Button</a>    </div></body></html>              
Button Outlines: Bootstrap provides a series of classes that can be used when we need to use outline styled buttons in our project, i.e. button without background color. The outline button classes remove any background color or background image style applied to the buttons. These classes are listed below:
.btn-outline-primary
.btn-outline-secondary
.btn-outline-success
.btn-outline-info
.btn-outline-warning
.btn-outline-danger
.btn-outline-dark
.btn-outline-light
.btn-outline-link
   
Example:
html
<!DOCTYPE html><html lang="en"><head>    <title>Bootstrap Buttons</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.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head><body style="text-align:center;">    <div class="container mt-3">        <h1 style="color:green;">            GeeksforGeeks        </h1>        <h2>Button Outline</h2>        <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-success">            Success        </button>        <button type="button" class="btn btn-outline-danger">            Danger        </button>        <button type="button" class="btn btn-outline-warning">            Warning        </button>        <button type="button" class="btn btn-outline-info">            Info        </button>        <button type="button" class="btn btn-outline-light">            Light        </button>        <button type="button" class="btn btn-outline-dark">            Dark        </button>    </div></body></html>            
Button Sizes: Bootstrap provides different classes that allow to changing the size of the button. The .btn-lg and .btn-sm classes are used for large and small buttons.
Example:
html
<!DOCTYPE html><html lang="en"><head>    <title>Bootstrap Buttons</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.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head><body style="text-align:center;">    <div class="container mt-3">        <h1 style="color:green;">            GeeksforGeeks        </h1>        <h2>Button Sizes</h2>        <button type="button"             class="btn btn-success btn-sm">            Small Button        </button>        <button type="button"             class="btn btn-success">            Default Button        </button>        <button type="button"             class="btn btn-success btn-lg">            Large Button        </button>    </div></body></html>                 
Active State Buttons: The .active class is used to make button and link to active state.
Example:
html
<!DOCTYPE html><html lang="en"><head>    <title>Bootstrap Buttons</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.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head><body style="text-align:center;">    <div class="container mt-3">        <h1 style="color:green;">            GeeksforGeeks        </h1>        <h2>Button Active State</h2>        <button type="button"             class="btn btn-success">            Default Button        </button>        <button type="button"             class="btn btn-success active">            Active Button        </button>    </div></body></html>                   
Disabled State Buttons: The disabled attribute is used with <button> element to set the disabled state of button.
Example:
html
<!DOCTYPE html><html lang="en"><head>    <title>Bootstrap Buttons</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.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head><body style="text-align:center;">    <div class="container mt-3">        <h1 style="color:green;">            GeeksforGeeks        </h1>        <h2>Button Disabled State</h2>        <button type="button"             class="btn btn-primary" disabled>            Disabled Button        </button>        <button type="button"             class="btn btn-success" disabled>            Disabled Button        </button>    </div></body></html>                  
Block Level Buttons: The .btn-block class is used to create block-level button which takes all width of parent element.
Example:
html
<!DOCTYPE html><html lang="en"><head>    <title>Bootstrap Buttons</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.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head><body style="text-align:center;">    <div class="container mt-3">        <h1 style="color:green;">            GeeksforGeeks        </h1>        <h2>Block Level Buttons</h2>        <button type="button"             class="btn btn-block btn-primary">            Block Level Button        </button>        <button type="button"             class="btn btn-block btn-success">            Block Level Button        </button>    </div></body></html>                   
Spinner Buttons: The spinner-* classes are used to add spinner to the button.
html
<!DOCTYPE html><html lang="en"><head>    <title>Bootstrap Buttons</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.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head><body style="text-align:center;">    <div class="container mt-3">        <h1 style="color:green;">            GeeksforGeeks        </h1>        <h2>Spinner Buttons</h2>        <button type="button" class="btn btn-primary">            <span class="spinner-border spinner-border-sm"></span>            Spinner Button        </button>        <button type="button" class="btn btn-success">            <span class="spinner-grow spinner-grow-sm"></span>            Spinner Button        </button>    </div></body></html>                   
Supported Browser:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
ysachin2314
Bootstrap-4
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to align navbar items to the right in Bootstrap 4 ?
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills