###### Bootstrap Version 5.0

### Elements

### Slides Only

    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
                                <div class="carousel-inner">
                                  <div class="carousel-item active">
                                    <img src="..." class="d-block w-100" alt="...">
                                  </div>
                                  <div class="carousel-item">
                                    <img src="..." class="d-block w-100" alt="...">
                                  </div>
                                  <div class="carousel-item">
                                    <img src="..." class="d-block w-100" alt="...">
                                  </div>
                                </div>
                                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                  <span class="visually-hidden">Previous</span>
                                </button>
                                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                  <span class="visually-hidden">Next</span>
                                </button>
                              </div>

### Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

    <h1>h1. Bootstrap heading</h1>
                    <h2>h2. Bootstrap heading</h2>
                    <h3>h3. Bootstrap heading</h3>
                    <h4>h4. Bootstrap heading</h4>
                    <h5>h5. Bootstrap heading</h5>
                    <h6>h6. Bootstrap heading</h6>

### Grids

Column
Column
Column

    <div class="container">
                                <div class="row">
                                  <div class="col">
                                    Column
                                  </div>
                                  <div class="col">
                                    Column
                                  </div>
                                  <div class="col">
                                    Column
                                  </div>
                                </div>
                              </div>

### Abbreviations

attr

HTML

    <p><abbr title="attribute">attr</abbr></p>
                    <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

### Breadcrumb

    <nav aria-label="breadcrumb">
                                                    <ol class="breadcrumb">
                                                      <li class="breadcrumb-item active" aria-current="page">Home</li>
                                                    </ol>
                                                  </nav>

                                                  <nav aria-label="breadcrumb">
                                                    <ol class="breadcrumb">
                                                      <li class="breadcrumb-item"><a href="#">Home</a></li>
                                                      <li class="breadcrumb-item active" aria-current="page">Library</li>
                                                    </ol>
                                                  </nav>

                                                  <nav aria-label="breadcrumb">
                                                    <ol class="breadcrumb">
                                                      <li class="breadcrumb-item"><a href="#">Home</a></li>
                                                      <li class="breadcrumb-item"><a href="#">Library</a></li>
                                                      <li class="breadcrumb-item active" aria-current="page">Data</li>
                                                    </ol>
                                                  </nav>

    <blockquote class="blockquote">
                                <p>A well-known quote, contained in a blockquote element.</p>
                              </blockquote>

### Buttons

    <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>

### Using grid markup

##### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

##### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

    <div class="row">
                                <div class="col-sm-6">
                                  <div class="card">
                                    <div class="card-body">
                                      <h5 class="card-title">Special title treatment</h5>
                                      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                      <a href="#" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                  </div>
                                </div>
                                <div class="col-sm-6">
                                  <div class="card">
                                    <div class="card-body">
                                      <h5 class="card-title">Special title treatment</h5>
                                      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                      <a href="#" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                  </div>
                                </div>
                              </div>

### Modal Popup

##### Modal title

...

    <!-- Button trigger modal -->
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                                  Launch demo modal
                                </button>

                                <!-- Modal -->
                                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                  <div class="modal-dialog">
                                    <div class="modal-content">
                                      <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                      </div>
                                      <div class="modal-body">
                                        ...
                                      </div>
                                      <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                        <button type="button" class="btn btn-primary">Save changes</button>
                                      </div>
                                    </div>
                                  </div>
                                </div>

### Progress

    <div class="progress">
                                <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                              <div class="progress">
                                <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                              <div class="progress">
                                <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                              <div class="progress">
                                <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>

### Form Controls

Email address
Example textarea

    <div class="mb-3">
                                <label for="exampleFormControlInput1" class="form-label">Email address</label>
                                <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
                              </div>
                              <div class="mb-3">
                                <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                              </div>

### Form Validation

First name
Looks good!
Last name
Looks good!
Username
@
Please choose a username.
City
Please provide a valid city.
State
Please select a valid state.
Zip
Please provide a valid zip.
Agree to terms and conditions
You must agree before submitting.

    <form class="row g-3 needs-validation" novalidate>
                                                    <div class="col-md-4">
                                                      <label for="validationCustom01" class="form-label">First name</label>
                                                      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
                                                      <div class="valid-feedback">
                                                        Looks good!
                                                      </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                      <label for="validationCustom02" class="form-label">Last name</label>
                                                      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
                                                      <div class="valid-feedback">
                                                        Looks good!
                                                      </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                      <label for="validationCustomUsername" class="form-label">Username</label>
                                                      <div class="input-group has-validation">
                                                        <span class="input-group-text" id="inputGroupPrepend">@</span>
                                                        <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
                                                        <div class="invalid-feedback">
                                                          Please choose a username.
                                                        </div>
                                                      </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                      <label for="validationCustom03" class="form-label">City</label>
                                                      <input type="text" class="form-control" id="validationCustom03" required>
                                                      <div class="invalid-feedback">
                                                        Please provide a valid city.
                                                      </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                      <label for="validationCustom04" class="form-label">State</label>
                                                      <select class="form-select" id="validationCustom04" required>
                                                        <option selected disabled value="">Choose...</option>
                                                        <option>...</option>
                                                      </select>
                                                      <div class="invalid-feedback">
                                                        Please select a valid state.
                                                      </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                      <label for="validationCustom05" class="form-label">Zip</label>
                                                      <input type="text" class="form-control" id="validationCustom05" required>
                                                      <div class="invalid-feedback">
                                                        Please provide a valid zip.
                                                      </div>
                                                    </div>
                                                    <div class="col-12">
                                                      <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
                                                        <label class="form-check-label" for="invalidCheck">
                                                          Agree to terms and conditions
                                                        </label>
                                                        <div class="invalid-feedback">
                                                          You must agree before submitting.
                                                        </div>
                                                      </div>
                                                    </div>
                                                    <div class="col-12">
                                                      <button class="btn btn-primary" type="submit">Submit form</button>
                                                    </div>
                                                  </form>