Bootstrap 5 - Navs

Bootstrap 5 Nav component is built with flexbox and provide a strong foundation for building all types of navigation components.

Example 1: Bootstrap 5 Modal.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Link 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link 3</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link 4</a>
  </li>
</ul>

When backdrop is set to static, the modal will not close when clicking outside of it.

Example 2: Bootstrap static backdrop.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Launch demo modal</button>

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>This is static modal box, and will not close on clicking outside modal!</p>
            </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>

When modals become too long for the user’s viewport or device, they scroll independent of the page itself.

Example 3: Bootstrap Scrolling long content

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#longcontent">Launch long content modal</button>

<div class="modal fade" id="longcontent">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Woo-hoo, you're reading this text in a modal!</p>
            </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">Understood</button>
            </div>
        </div>
    </div>
</div>

Modals have three optional sizes i.e. .modal-sm, None, .modal-lg, .modal-xl , available via modifier classes to be placed on a .modal-dialog.

Example 4: Bootstrap Modal sizes

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#sizesmall">Launch Small modal

<div class="modal fade" id="sizesmall">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Woo-hoo, you're reading this text in a modal!</p>
            </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>