# 1. Badges

<span class="badge text-bg-primary">primary</span>  

<span class="badge text-bg-secondary">secondary</span>  

<span class="badge text-bg-success">success</span>  

<span class="badge text-bg-danger">danger</span>  

<span class="badge text-bg-warning">warning</span>  

<span class="badge text-bg-info">info</span>  

<span class="badge text-bg-light">light</span>  

<span class="badge text-bg-dark">dark</span>  


# 2. Alerts

<div class="alert alert-primary" role="alert">
  This is a primary alert.
</div>

<div class="alert alert-secondary" role="alert">
  This is a secondary alert.
</div>

<div class="alert alert-success" role="alert">
  This is a success alert.
</div>

<div class="alert alert-danger" role="alert">
  This is a danger alert.
</div>

<div class="alert alert-warning" role="alert">
  This is a warning alert.
</div>

<div class="alert alert-info" role="alert">
  This is a info alert.
</div>

<div class="alert alert-light" role="alert">
  This is a light alert.
</div>

<div class="alert alert-dark" role="alert">
  This is a dark alert.
</div>


# 3. Cards

<div class="card text-bg-primary mb-3" style="max-width: 50rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <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 text-bg-secondary mb-3" style="max-width: 45rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <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 text-bg-success mb-3" style="max-width: 40rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <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 text-bg-danger mb-3" style="max-width: 35rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <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 text-bg-warning mb-3" style="max-width: 30rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <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 text-bg-info mb-3" style="max-width: 25rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <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 text-bg-light mb-3" style="max-width: 20rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <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 text-bg-dark mb-3" style="max-width: 15rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <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>


# 4. Colors
## Contextual colors
<p class="text-primary">Look, I'm in a well!</p>
<p class="text-warning">Look, I'm in a well!</p>
<p class="text-danger">Look, I'm in a well!</p>

## Contextual backgrounds
<p class="text-danger bg-primary">Look, I'm in a well!</p>
<p class="text-primary bg-warning">Look, I'm in a well!</p>
<p class="text-warning bg-danger">Look, I'm in a well!</p>


# 5. Collapse
## Displaying content
<a class="btn btn-primary text-white" data-bs-toggle="collapse" href="#collapse-1">
  Show content
</a>

<div class="collapse" id="collapse-1">
  <div class="card card-body">

- Content you want to display
  - Content you want to display
      
  </div>
</div>

## Hiding content
<a class="btn btn-secondary text-white" data-bs-toggle="collapse" href="#collapse-2">
  Hide content
</a>

<div class="collapse show" id="collapse-2">
  <div class="card card-body">

- Content you want to hide
  - Content you want to hide

  </div>
</div>


# Official docs
- [Click here for Badges details](https://getbootstrap.jp/docs/5.3/components/badge/)
- [Click here for Alerts details](https://getbootstrap.jp/docs/5.3/components/alerts/)
- [Click here for Cards details](https://getbootstrap.jp/docs/5.3/components/card/)
- [Click here for Colors details](https://getbootstrap.jp/docs/5.3/utilities/colors/)
- [Click here for Collapse details](https://getbootstrap.jp/docs/5.3/components/collapse/)