-<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
- <button type="button" class="btn btn-primary">Primary</button>
- <div class="btn-group" role="group">
- <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
- <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
- <a class="dropdown-item" href="#">Dropdown link</a>
- <a class="dropdown-item" href="#">Dropdown link</a>
- </div>
- </div>
-</div>
-
-<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
- <button type="button" class="btn btn-success">Success</button>
- <div class="btn-group" role="group">
- <button id="btnGroupDrop2" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
- <div class="dropdown-menu" aria-labelledby="btnGroupDrop2">
- <a class="dropdown-item" href="#">Dropdown link</a>
- <a class="dropdown-item" href="#">Dropdown link</a>
- </div>
- </div>
-</div>
-
-<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
- <button type="button" class="btn btn-info">Info</button>
- <div class="btn-group" role="group">
- <button id="btnGroupDrop3" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
- <div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
- <a class="dropdown-item" href="#">Dropdown link</a>
- <a class="dropdown-item" href="#">Dropdown link</a>
- </div>
- </div>
-</div>
-
-<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
- <button type="button" class="btn btn-danger">Danger</button>
- <div class="btn-group" role="group">
- <button id="btnGroupDrop4" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
- <div class="dropdown-menu" aria-labelledby="btnGroupDrop4">
- <a class="dropdown-item" href="#">Dropdown link</a>
- <a class="dropdown-item" href="#">Dropdown link</a>
- </div>
+<div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Primary card title</h4>
+ <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 text-white bg-secondary mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Secondary card title</h4>
+ <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 text-white bg-success mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Success card title</h4>
+ <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 text-white bg-danger mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Danger card title</h4>
+ <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 text-white bg-warning mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Warning card title</h4>
+ <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 text-white bg-info mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Info card title</h4>
+ <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 mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Light card title</h4>
+ <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 text-white bg-dark mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Dark card title</h4>
+ <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>