简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

Add dimensions to Bootstrap buttons

PHPz
Release： 2023-08-20 16:29:14
forward
988 people have browsed it

Add dimensions to Bootstrap buttons

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>
Copy after login

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!

Related labels：
bootstrap button size
source：tutorialspoint.com
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 disabled Next article：How to set cell padding in HTML?
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Compare Imagick, Adobe Photoshop and Windows - Detect resolution (pixels per centimeter or pixels per inch) This is not a question but an attempt to improve my understanding of how DPI is stored in ...
From 2024-04-06 16:01:27
0
1
397
Parent's padding ignored by sticky positioned child How to prevent sticky elements from going behind the header? The current code snippet uses...
From 2024-04-06 11:42:51
0
1
338
How do I tune these cards to respond with Boostrap 4? How can I make each row display 4 cards, and of course make them stack if the screen size ...
From 2024-04-05 10:48:45
0
1
4072
CSS and HTML methods for moving paragraphs to the left on mobile sized screens It looks perfect on a normal 16:9 computer screen, with text on the left and images on the...
From 2024-04-04 20:25:22
0
1
330
Rewritten title: Center a fixed HTML square or circle element horizontally and vertically when resized How to center a square or circle fixed html element of varying sizes horizontally and vert...
From 2024-04-04 12:31:51
0
1
322
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！