Bootstrap Button
Code
Output
Button Size
Bootstrap 4 introduces new class for buttons
Code
<!DOCTYPE html>
Output
Button Styles
Block Level Buttons
A block level button expands the entire width of the parent element.
Button Styles
Bootstrap have 7 classes to style a button.These are- .btn-default
- .btn-primary
- .btn-success
- .btn-info
- .btn-warning
- .btn-danger
- .btn-link
Code
<!DOCTYPE
html>
<html
lang
=
"en">
<head>
<meta
charset
=
"utf-8">
<meta
name
=
"viewport"
content
=
"width
= device-width, initial-scale = 1">
<title>
</title>
<link
href
=
"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"
rel
=
"stylesheet">
</head>
<body>
<div
class="container">
<h2></h2>
<button
type="button"
class="btn">Basic</button>
<button
type="button"
class="btn
btn-default">Default</button>
<button
type="button"
class="btn
btn-primary">Primary</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-info">Info</button>
<button
type="button"
class="btn
btn-warning">Warning</button>
<button
type="button"
class="btn
btn-link">Link</button>
</div>
</body>
</html>
Output
Bootstrap 4 introduces new class for buttons
- btn-secondary
- btn-dark
- btn-light
Code
<!DOCTYPE
html>
<html
lang
=
"en">
<head>
<meta
charset
=
"utf-8">
<meta
name
=
"viewport"
content
=
"width
= device-width, initial-scale = 1">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<body>
<div
class="container">
<h2>Button
Styles</h2>
<button
type="button"
class="btn
btn-secondary">Secondary</button>
<button
type="button"
class="btn
btn-dark">Dark</button>
<button
type="button"
class="btn
btn-light">Light</button>
</div>
</body>
</html>
Output :
Button Sizes
Bootstrap provides classes for define size of button
Code
- .btn-lg
- .btn-md
- .btn-sm
- .btn-xs
Code
<!DOCTYPE html>
<html
lang
=
"en">
<head>
<meta
charset
=
"utf-8">
<meta
name
=
"viewport"
content
=
"width
= device-width, initial-scale = 1">
<title>Button
Styles</title>
<link
href
=
"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"
rel
=
"stylesheet">
</head>
<body>
<div
class="container">
<h2>
</h2>
<button
type="button"
class="btn
btn-primary btn-lg">Large</button>
<button
type="button"
class="btn
btn-primary btn-md">Medium</button>
<button
type="button"
class="btn
btn-primary btn-sm">Small</button>
<button
type="button"
class="btn
btn-primary btn-xs">XSmall</button>
</div>
</body>
</html>
Block Level Buttons
A block level button expands the entire width of the parent element.
Code
<!DOCTYPE
html>
<html
lang
=
"en">
<head>
<meta
charset
=
"utf-8">
<meta
name
=
"viewport"
content
=
"width
= device-width, initial-scale = 1">
<title>Block
Level Buttons
</title>
<link
href
=
"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"
rel
=
"stylesheet">
</head>
<body>
<div
class="container">
<h2>Button
Sizes</h2>
<button
type="button"
class="btn
btn-primary btn-block">Block
Level Buttons</button>
</div>
</body>
</html>
Button Sizes
Bordered Buttons
Bootstrap 4 provides eight Bordered buttons
- btn-outline-primary
- btn-outline-secondary
- btn-outline-success
- btn-outline-info
- btn-outline-warning
- btn-outline-danger
- btn-outline-dark
- btn-outline-light
Code
<div
style="width:300px;">
<!DOCTYPE
html>
<html
lang
=
"en">
<head>
<meta
charset
=
"utf-8">
<meta
name
=
"viewport"
content
=
"width
= device-width, initial-scale = 1">
<title>
</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
<div
class="container">
<h2></h2>
<button
type="button"
class="btn
btn-outline-primary">Primary</button>
<button
type="button"
class="btn
btn-outline-secondary">Secondary</button>
<button
type="button"
class="btn
btn-outline-success">Success</button>
<button
type="button"
class="btn
btn-outline-info">Info</button>
<button
type="button"
class="btn
btn-outline-warning">Warning</button>
<button
type="button"
class="btn
btn-outline-danger">Danger</button>
<button
type="button"
class="btn
btn-outline-dark">Dark</button>
<button
type="button"
class="btn
btn-outline-light ">Light
Dark</button>
</div>
</body>
</html>
</div>
Button Classes with Different HTML Elements
<div
style="width:300px;">
<!DOCTYPE
html>
<html
lang
=
"en">
<head>
<meta
charset
=
"utf-8">
<meta
name
=
"viewport"
content
=
"width
= device-width, initial-scale = 1">
<title>Button
Classes with Different HTML Elements
</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
<div
class="container">
<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>
</div>
Button State
Bootstrap allow to set state of Button.
.active css is added for this purpose.
Button State
.disabled disable the button
