English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Buttons are part of the composition of websites and applications. They are used for various purposes, such as submitting or resetting HTML forms, executing interactive operations, such as clicking a button to display or hide certain content on a web page, redirecting users to another page, and so on. Bootstrap provides a quick and easy way to create and customize buttons.
Bootstrap 4 Buttons of different styles are provided.
!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js">/script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script> </head> <body> <div class="container"> <h2>Button styles</h2> <button type="button" class="btn">Basic button</button> <button type="button" class="btn btn-primary">Main Button</button> <button type="button" class="btn btn-secondary">Secondary button</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Information</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Dangerous</button> <button type="button" class="btn btn-dark">Black</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-link">Link</button> </div> </body> </html>Test and See ‹/›
Button classes can be used for <a>, <button>, or On the <input> element:
!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js">/script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script> </head> <body> <div class="container"> <h2>Button element</h2> <a href="#" class="btn btn-info" role="button">Link button</a> <button type="button" class="btn btn-info">Button</button> <input type="button" class="btn btn-info" value="Input button"> <input type="submit" class="btn btn-info" value="Submit button"> </div> </body> </html>Test and See ‹/›
!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js">/script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script> </head> <body> <div class="container"> <h2>Button border setting</h2> <button type="button" class="btn btn-outline-primary">Main Button</button> <button type="button" class="btn btn-outline-secondary">Secondary button</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-info">Information</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-danger">Dangerous</button> <button type="button" class="btn btn-outline-dark">Black</button> <button type="button" class="btn btn-outline-light text-dark">Light</button> </div> </body> </html>Test and See ‹/›
Bootstrap 4 You can set the size of the button:
!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js">/script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script> </head> <body> <div class="container"> <h2>Buttons of different sizes</h2> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-primary">Default button</button> <button type="button" class="btn btn-primary btn-sm">Small button</button> </div> </body> </html>Test and See ‹/›
By adding .btn-The block class can set block-level buttons:
!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js">/script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script> </head> <body> <div class="container"> <h2>Block-level button</h2> <button type="button" class="btn btn-primary btn-block">Button 1</button> <button type="button" class="btn btn-default btn-block">Button 2</button> <h2>Large block-level button</h2> <button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button> <button type="button" class="btn btn-default btn-lg btn-block">Button 2</button> <h2>Small block-level button</h2> <button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button> <button type="button" class="btn btn-default btn-sm btn-block">Button 2</button> </div> </body> </html>Test and See ‹/›
Buttons can be set to an active or non-clickable state.
.active class can set the button as available, and the disabled attribute can set the button as non-clickable. Note that the <a> element does not support disabled You can disable the click of the link by adding the .disabled class.
!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js">/script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script> </head> <body> <div class="container"> <h2>Button States</h2> <button type="button" class="btn btn-primary">Main Button</button> <button type="button" class="btn btn-primary active">Button Clicked</button> <button type="button" class="btn btn-primary disabled">Button Not Clickable</button> <a href="#" class="btn btn-primary disabled">Link Not Clickable</a> </div> </body> </html>Test and See ‹/›