|
|
@@ -6,92 +6,181 @@
|
|
|
<span class="badge badge-info">Info</span>
|
|
|
<span class="badge badge-warning">Warning</span>
|
|
|
<span class="badge badge-danger">Danger</span>
|
|
|
-<span class="badge badge-light">Light</span>
|
|
|
+<span class="badge badge-light text-dark">Light</span>
|
|
|
<span class="badge badge-dark">Dark</span>
|
|
|
|
|
|
+<span class="badge badge-blue">Blue</span>
|
|
|
+<span class="badge badge-indigo">Indigo</span>
|
|
|
+<span class="badge badge-purple">Purple</span>
|
|
|
+<span class="badge badge-pink">Pink</span>
|
|
|
+<span class="badge badge-red">Red</span>
|
|
|
+<span class="badge badge-orange">Orange</span>
|
|
|
+<span class="badge badge-yellow">Yellow</span>
|
|
|
+<span class="badge badge-green">Green</span>
|
|
|
+<span class="badge badge-teal">Teal</span>
|
|
|
+<span class="badge badge-cyan">Cyan</span>
|
|
|
+
|
|
|
+
|
|
|
# Alerts
|
|
|
|
|
|
-<div class="alert alert-success" role="alert"><b>Well done!</b> You successfully read this important alert message. </div>
|
|
|
-<div class="alert alert-info" role="alert"><b>Heads up!</b> This alert needs your attention, but it's not super important. </div>
|
|
|
-<div class="alert alert-warning" role="alert"><b>Warning!</b> Better check yourself, you're not looking too good. </div>
|
|
|
-<div class="alert alert-danger" role="alert"><b>Oh snap!</b> Change a few things up and try submitting again. </div>
|
|
|
+<div class="alert alert-primary" role="alert">
|
|
|
+ This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
|
|
+</div>
|
|
|
+<div class="alert alert-secondary" role="alert">
|
|
|
+ This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
|
|
+</div>
|
|
|
+<div class="alert alert-success" role="alert">
|
|
|
+ This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
|
|
+</div>
|
|
|
+<div class="alert alert-danger" role="alert">
|
|
|
+ This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
|
|
+</div>
|
|
|
+<div class="alert alert-warning" role="alert">
|
|
|
+ This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
|
|
+</div>
|
|
|
+<div class="alert alert-info" role="alert">
|
|
|
+ This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
|
|
+</div>
|
|
|
+<div class="alert alert-light text-dark" role="alert">
|
|
|
+ This is a light alert with <a href="#" class="alert-link text-dark">an example link</a>. Give it a click if you like.
|
|
|
+</div>
|
|
|
+<div class="alert alert-dark" role="alert">
|
|
|
+ This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
|
|
+</div>
|
|
|
|
|
|
# Cards
|
|
|
|
|
|
-<div class="card">
|
|
|
- <div class="card-header">Card header without title</div>
|
|
|
+<div class="d-flex">
|
|
|
+
|
|
|
+<div class="mr-3">
|
|
|
+<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
|
|
|
+ <div class="card-header">Header</div>
|
|
|
<div class="card-body">
|
|
|
- Card body content
|
|
|
+ <h5 class="card-title">Primary card title</h5>
|
|
|
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
-<div class="card bg-light">
|
|
|
- <div class="card-header">Card header without title</div>
|
|
|
+<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
|
|
|
+ <div class="card-header">Header</div>
|
|
|
<div class="card-body">
|
|
|
- Card body content
|
|
|
+ <h5 class="card-title">Secondary card title</h5>
|
|
|
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
-<div class="card bg-secondary text-white">
|
|
|
- <div class="card-header">Card header without title</div>
|
|
|
+<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
|
|
|
+ <div class="card-header">Header</div>
|
|
|
<div class="card-body">
|
|
|
- Card body content
|
|
|
+ <h5 class="card-title">Success card title</h5>
|
|
|
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
-<div class="card bg-dark text-white">
|
|
|
- <div class="card-header">Card header without title</div>
|
|
|
+<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
|
|
|
+ <div class="card-header">Header</div>
|
|
|
<div class="card-body">
|
|
|
- Card body content
|
|
|
+ <h5 class="card-title">Danger card title</h5>
|
|
|
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
-<div class="card bg-primary text-white">
|
|
|
- <div class="card-header">Card header without title</div>
|
|
|
+<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
|
|
|
+ <div class="card-header">Header</div>
|
|
|
<div class="card-body">
|
|
|
- Card body content
|
|
|
+ <h5 class="card-title">Warning card title</h5>
|
|
|
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
-<div class="card bg-success text-white">
|
|
|
- <div class="card-header">Card header without title</div>
|
|
|
+<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
|
|
|
+ <div class="card-header">Header</div>
|
|
|
<div class="card-body">
|
|
|
- Card body content
|
|
|
+ <h5 class="card-title">Info card title</h5>
|
|
|
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
-<div class="card bg-info text-white">
|
|
|
- <div class="card-header">Card header without title</div>
|
|
|
+<div class="card bg-light mb-3" style="max-width: 18rem;">
|
|
|
+ <div class="card-header">Header</div>
|
|
|
<div class="card-body">
|
|
|
- Card body content
|
|
|
+ <h5 class="card-title">Light card title</h5>
|
|
|
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
-<div class="card bg-warning text-white">
|
|
|
- <div class="card-header">Card header without title</div>
|
|
|
+<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
|
|
|
+ <div class="card-header">Header</div>
|
|
|
<div class="card-body">
|
|
|
- Card body content
|
|
|
+ <h5 class="card-title">Dark card title</h5>
|
|
|
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
+</div>
|
|
|
|
|
|
-<div class="card bg-danger text-white">
|
|
|
- <div class="card-header">Card header without title</div>
|
|
|
+<div>
|
|
|
+<div class="card border-primary mb-3" style="max-width: 18rem;">
|
|
|
+ <div class="card-header">Header</div>
|
|
|
+ <div class="card-body text-primary">
|
|
|
+ <h5 class="card-title">Primary card title</h5>
|
|
|
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<div class="card border-secondary mb-3" style="max-width: 18rem;">
|
|
|
+ <div class="card-header">Header</div>
|
|
|
+ <div class="card-body text-secondary">
|
|
|
+ <h5 class="card-title">Secondary card title</h5>
|
|
|
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<div class="card border-success mb-3" style="max-width: 18rem;">
|
|
|
+ <div class="card-header">Header</div>
|
|
|
+ <div class="card-body text-success">
|
|
|
+ <h5 class="card-title">Success card title</h5>
|
|
|
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<div class="card border-danger mb-3" style="max-width: 18rem;">
|
|
|
+ <div class="card-header">Header</div>
|
|
|
+ <div class="card-body text-danger">
|
|
|
+ <h5 class="card-title">Danger card title</h5>
|
|
|
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<div class="card border-warning mb-3" style="max-width: 18rem;">
|
|
|
+ <div class="card-header">Header</div>
|
|
|
+ <div class="card-body text-warning">
|
|
|
+ <h5 class="card-title">Warning card title</h5>
|
|
|
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<div class="card border-info mb-3" style="max-width: 18rem;">
|
|
|
+ <div class="card-header">Header</div>
|
|
|
+ <div class="card-body text-info">
|
|
|
+ <h5 class="card-title">Info card title</h5>
|
|
|
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<div class="card border-light mb-3" style="max-width: 18rem;">
|
|
|
+ <div class="card-header">Header</div>
|
|
|
<div class="card-body">
|
|
|
- Card body content
|
|
|
+ <h5 class="card-title">Light card title</h5>
|
|
|
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<div class="card border-dark mb-3" style="max-width: 18rem;">
|
|
|
+ <div class="card-header">Header</div>
|
|
|
+ <div class="card-body text-dark">
|
|
|
+ <h5 class="card-title">Dark card title</h5>
|
|
|
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
+</div>
|
|
|
+
|
|
|
+</div>
|
|
|
|
|
|
# Wells
|
|
|
|
|
|
## Default well
|
|
|
|
|
|
-<div class="card card-body bg-light">Look, I'm in a well! </div>
|
|
|
+<div class="card card-body">Look, I'm in a well! </div>
|
|
|
|
|
|
## Optional classes
|
|
|
|
|
|
-<div class="card card-body bg-light p-5">Look, I'm in a well! </div>
|
|
|
-
|
|
|
-<div class="card card-body bg-light p-2">Look, I'm in a well! </div>
|
|
|
+<div class="card card-body bg-primary text-light p-2">Look, I'm in a well! </div>
|
|
|
|
|
|
# Typography
|
|
|
|
Yuki Takei