Home > Article > Web Front-end > Add dimensions to Bootstrap buttons
Add dimensions to Bootstrap buttons
- PHPzforward
- 2023-08-20 16:29:141032browse
In order to add size to buttons in Bootstrap, you can try the following classes:
| Classes | Description |
|---|---|
| .btn-lg | This will Make the button larger. |
| .btn-sm | This will make the button smaller. |
| .btn-xs | This will make the button extremely small. |
| .btn-block | This creates a block-level button, which takes up the entire width of the parent element. |
Example
You can try running the following code to create a small button−
Demo
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<button type = "button" class = "btn btn-default btn-sm">
Small button
</button>
</body>
</html>The above is the detailed content of Add dimensions to Bootstrap buttons. For more information, please follow other related articles on the PHP Chinese website!
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：HTML DOM Input Reset disabled attribute
HTML DOM Input Reset disabled attribute is used to set or get whether the reset button is disabledNext article：HTML DOM Input Reset disabled attribute
HTML DOM Input Reset disabled attribute is used to set or get whether the reset button is disabled