Bootstrap 4 Button
What is Bootstrap 4 Button
- In Bootstrap 4, users have the ability to add various types of buttons to their web pages.
- These buttons come in different styles, allowing for a wide range of customization and design options.
Common Bootstrap 4 Button Classes:
Basic Button Styles:
.btn-primary– Blue button, typically used for the main action..btn-secondary– Gray button, used for secondary actions..btn-success– Green button, often used for success actions..btn-danger– Red button, typically for destructive actions..btn-warning– Yellow button, used to indicate caution..btn-info– Light blue button, used for informational messages..btn-light– Light-colored button for less emphasis..btn-dark– Dark-colored button for strong emphasis.
Button Sizes:
.btn-lg– Large button..btn-sm– Small button.- Default size is medium.
Block Buttons:
.btn-block– Makes the button full-width and spans the entire horizontal width of its parent element.
Button States:
.disabled– Disables the button (can be applied directly to<button>elements or links styled as buttons).
Button Links:
- Buttons can also be made using the
<a>tag with the.btnclass, turning links into button -like elements
- Buttons can also be made using the
Example:
<button type="button" class="btn btn-primary">Primary Button</button>
<a href="#" class="btn btn-secondary">Secondary Link Button</a>
The following buttons are list- Basic Button
- Primary Button
- Secondary Button
- Information Button
- Warning Button
- Danger Button
- Dark Buuton
- Light Button
- Link Button
Code: <!DOCTYPE html> <html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Button Styles Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>The Different Types of Button Styles in Bootstrap 4</h1>
<button type="button" class="btn">Basic Button</button>
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-dark">Dark Button</button>
<button type="button" class="btn btn-light">Light Button</button>
<button type="button" class="btn btn-link">Link Button</button>
</div>
</body>
</html>Output:The different Types of Button Styles observed in Bootstrap 4
[ Basic Button ] [ Primary Button ] [ Secondary Button ] [ Success Button ] [ Info Button ] [ Warning Button ] [ Danger Button ] [ Dark Button ] [ Light Button ] [ Link Button ]
Buttons with Elements
Additionally, these buttons can also be applied to elements like <a> for links, <input> for form buttons, and other similar elements.Example:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Button Example</title>
<!-- Optional: Add Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Different Button Elements in Bootstrap 4</h1> <!-- Link styled as a button -->
<a href="#" class="btn btn-info" role="button">Link Button</a><!-- Standard button element -->
<button type="button" class="btn btn-info">Button</button><!-- Input button styled as a button -->
<input type="button" class="btn btn-info" value="Input Button"><!-- Submit button styled as a button -->
<input type="submit" class="btn btn-info" value="Submit Button">
</div>
</body>
</html>
Output:Different Button Elements in Bootstrap 4
[ Link Button ] [ Button ] [ Input Button ] [ Submit Button ]
Buttons with Outlines
- In Bootstrap 4, users can apply outline styles to buttons.
- There are a total of 8 different outline button styles available. When hovering over these buttons, the outline's color will fill the inside of the button, creating a highlighted effect.
The difference types of outline buttons - Primary outline Button
- Secondary outline Button
- Sucess outline Button
- information outline Button
- Warning outline Button
- Danger outline Button
- Dark outline Button
- Light outline Button
Example:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Button Outline Example</title>
<!-- Optional: Add Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Different Button Outline Styles in Bootstrap 4</h1>
<button type="button" class="btn btn-outline-primary">Primary Button</button>
<button type="button" class="btn btn-outline-secondary">Secondary Button</button>
<button type="button" class="btn btn-outline-success">Success Button</button>
<button type="button" class="btn btn-outline-info">Info Button</button>
<button type="button" class="btn btn-outline-warning">Warning Button</button>
<button type="button" class="btn btn-outline-danger">Danger Button</button>
<button type="button" class="btn btn-outline-dark">Dark Button</button>
<button type="button" class="btn btn-outline-light text-dark">Light Button</button>
</div>
</body>
</html>
Different Size of Buttons.
- A user can resize buttons by applying specific classes: use the
.btn-large class
to enlarge the button size and the .btn-sm class to reduce it.
Example:<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<h1>The different sizes of Button in Bootstrap 4</h1>
<button type="button" class="btn btn-primary btn-lg">Large Button</button>
<button type="button" class="btn btn-primary btn-md">Default Button</button>
<button type="button" class="btn btn-primary btn-sm">Small Button</button>
</div>
</body>
</html>Active Button or Disabled Buttons:
In Bootstrap 4, buttons can be displayed in an active (appears pressed) or disabled (appears unclickable) state.
- To make a button appear pressed, the
.active class is used. - To make a button unclickable, the
disabled attribute is applied. - For
<a> elements, since they don't support the disabled attribute, the .disabled class is used to visually disable them.
Example:<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<h1>The Active or Disable Button States in Bootstrap 4</h1>
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-primary active">Active Primary Button</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary Button</button>
<a href="#" class="btn btn-primary disabled">Disabled Link Button</a>
</div>
</body>
</html> Spinners Buttons:
- In Bootstrap 4, users can add spinners to buttons for indicating a loading state.
Example:<!DOCTYPE html> <html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<h1>Spinner Buttons in Bootstrap 4</h1>
<p>This can be used to add spinners to buttons:</p>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
</div>
</body>
</html> 