Button
Bootstrap offers versatile button styles, sizes, and states. Use them for calls to action, form submissions, or toggling functionality. Bootstrap also provides classes that can be used for changing the state and size of buttons, and also, provides classes for applying toggle,checkbox, and radio buttons-like effects.
Button type | Description | Syntax |
---|---|---|
Solid | Used to create solid button styles. | .btn-* |
Outlined | Creates outlined buttons. | .btn-outline-* |
Changing Size | Changes the size of button. | .btn-lg|sm|block |
Toggle | Toggles the state of the button | <button data-toggle=”button”> |
Radio | Creates radio styled buttons | <input type=”checkbox”> |
Checkbox | Creates checkbox styled buttons | <input type= “radio”> |
Example Code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
rossorigin="anonymous">
<title>Button Example</title>
<!-- Custom CSS -->
<style>
h1 {
color: green;
text-align: center;
}
div.one {
margin-top: 40px;
text-align: center;
}
a,
button {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>w3wiki</h1>
<!-- Bootstrap Button Classes -->
<div class="one">
<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-danger">
Danger</button>
<button type="button" class="btn btn-warning">
Warning</button>
<button type="button" class="btn btn-info">
Info</button>
<button type="button" class="btn btn-light">
Light</button>
<button type="button" class="btn btn-dark">
Dark</button>
<button type="button" class="btn btn-link">
Link</button>
</div>
<div class="one">
<button type="button" class="btn btn-outline-primary">
outline</button>
<button type="button" class="btn btn-secondary btn-lg">
Large</button>
<button type="button" class="btn btn-success btn-sm">
Small</button>
<a href="#" class="btn btn-danger active" role="button" aria-pressed="true">
Active</a>
<a href="#" class="btn btn-warning disabled" role="button" aria-disabled="true" tabindex="-1">
Disabled</a>
<button type="button" class="btn btn-info" data-toggle="button"
aria-pressed="false" autocomplete="off">
Toggle
</button>
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-light active">
<input type="checkbox" checked autocomplete="off">
Checked</label>
<label class="btn btn-dark">
<input type="radio" name="options" id="option1" autocomplete="off">
Radio</label>
</div>
</div>
</div>
</body>
</html>
Bootstrap Cheat Sheet – A Basic Guide to Bootstrap
Bootstrap is a free, open-source, potent CSS framework and toolkit used to create modern and responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, websites are perfect for all browsers and all sizes of screens.
Contact Us