Category: Bootstrap

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add navbar content with Bootstrap 5.

Nav

We can add navigation links to our navbar.

To do that, we add a div with the collapse and navbar-collapse classes.

For example, we can write:

<nav class="navbar navbar-expand-lg navbar-light bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">Navbar</a>  
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">  
      <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="navbarNav">  
      <ul class="navbar-nav">  
        <li class="nav-item">  
          <a class="nav-link active" href="#">Home</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Profile</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Setting</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
        </li>  
      </ul>  
    </div>  
  </div>  
</nav>

We have a div with the collapse and navbar-collapse class to use as the container for the nav links.

Then we add the toggle icon by adding a span with the navbar-toggler-icon class.

We also have a button with the navbar-toggler class to add the navbar toggle.

Then in the navbar-nav we have the nav links in the li with the .nav-item class.

This together will create a responsive navbar that’s collapsed when the screen is narrow and expanded when it’s wide.

We can also add dropdowns into our navbar.

For example, we can write:

<nav class="navbar navbar-expand-lg navbar-light bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">App</a>  
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">  
      <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="navbarNavDropdown">  
      <ul class="navbar-nav">  
        <li class="nav-item">  
          <a class="nav-link active"  href="#">Home</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Profile</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Settings</a>  
        </li>  
        <li class="nav-item dropdown">  
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" >  
            Dropdown link  
          </a>  
          <ul class="dropdown-menu">  
            <li><a class="dropdown-item" href="#">action</a></li>  
            <li><a class="dropdown-item" href="#">action 2</a></li>  
            <li><a class="dropdown-item" href="#">action 3</a></li>  
          </ul>  
        </li>  
      </ul>  
    </div>  
  </div>  
</nav>

We add our dropdown by creating an li element with the .nav-item and dropdown classes.

This way, it’ll fit in the menu.

Also, we have the .dropdown-menu class to display the menu.

.dropdown-item has the dropdown menu items.

Forms

We can also add forms to our navbars.

For example, we can write:

<nav class="navbar navbar-light bg-light">  
  <div class="container-fluid">  
    <form class="d-flex">  
      <input class="form-control mr-2" type="search" placeholder="Search">  
      <button class="btn btn-outline-success" type="submit">Search</button>  
    </form>  
  </div>  
</nav>

to add the form into the navbar.

We have a form with the d-flex class to make it display flex.

The input has mr-2 to add some right margins.

We can also add other items besides the form.

For example, we can write:

<nav class="navbar navbar-light bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand">App</a>  
    <form class="d-flex">  
      <input class="form-control mr-2" type="search" placeholder="Search">  
      <button class="btn btn-outline-success" type="submit">Search</button>  
    </form>  
  </div>  
</nav>

We added an a element with the navbar-brand class to add the brand on the left side.

The input has the form-control class so that it has Bootstrap styles applied to it.

Input groups also work with navbars.

For example, we can write:

<nav class="navbar navbar-light bg-light">  
  <form class="container-fluid">  
    <div class="input-group">  
      <span class="input-group-text">@</span>  
      <input type="text" class="form-control" placeholder="Search">  
    </div>  
  </form>  
</nav>

We have the input-group class applied to the div.

And we have the span with the input-group-text to add the text.

Also, we can add buttons to our navbar.

For example, we can write:

<nav class="navbar navbar-light bg-light">  
  <form class="container-fluid justify-content-start">  
    <button class="btn btn-outline-success mr-2" type="button">big button</button>  
    <button class="btn btn-sm btn-outline-secondary" type="button">small button</button>  
  </form>  
</nav>

We have buttons of various sizes in the form element.

The form has the container-fluid and justify-content-start to lay out the buttons.

justify-content-start make them align to the left.

The left button has the mr-2 class to add some right margins to the button.

Conclusion

We can add forms, pictures, dropdowns, and buttons to our navbar.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to customize navbars with Bootstrap 5.

Text

We can add text to our navbars.

For example, we can write:

<nav class="navbar navbar-light bg-light">  
  <div class="container-fluid">  
    <span class="navbar-text">  
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    </span>  
  </div>  
</nav>

to add the text.

We add the navbar-text class to style the text to fit the navbar.

Also, we can mix and match other utility classes as we wish:

<nav class="navbar navbar-expand-lg navbar-light bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">App</a>  
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">  
      <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="navbarText">  
      <ul class="navbar-nav mr-auto mb-2 mb-lg-0">  
        <li class="nav-item">  
          <a class="nav-link active" href="#">Home</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Profile</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Settings</a>  
        </li>  
      </ul>  
      <span class="navbar-text">  
        more text  
      </span>  
    </div>  
  </div>  
</nav>

We have a navbar with a brand and nav item.

We add the mr-auto to add right margin to our nav.

And we have the mb-2 and mb-lg-0 classes to change the bottom margin depending on the width of the screen.

If it’s large, then there’s no bottom margin.

Color Schemes

The color schemes of navbar can also change.

We can add the navbar-dark and bg-dark classes to make the navbar dark.

navbar-dark and bg-primary classes make the navbar blue.

We can also apply our own styles.

For example, we can write:

<nav class="navbar navbar-dark bg-dark">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">App</a>  
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">  
      <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="navbarText">  
      <ul class="navbar-nav mr-auto mb-2 mb-lg-0">  
        <li class="nav-item">  
          <a class="nav-link active" href="#">Home</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Profile</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Settings</a>  
        </li>  
      </ul>  
    </div>  
  </div>  
</nav>

to add a dark navbar.

The classes are applied to the root navbar element.

We can also apply our own navbar color:

<nav class="navbar navbar-light" style="background-color: lightblue">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">App</a>  
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">  
      <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="navbarText">  
      <ul class="navbar-nav mr-auto mb-2 mb-lg-0">  
        <li class="nav-item">  
          <a class="nav-link active" href="#">Home</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Profile</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Settings</a>  
        </li>  
      </ul>  
    </div>  
  </div>  
</nav>

We added the style attribute to do that.

Containers

We can add a container class to center the nav bar on the page.

For example, we can write:

<div class="container">  
  <nav class="navbar navbar-expand-lg navbar-light bg-light">  
    <div class="container-fluid">  
      <a class="navbar-brand" href="#">App</a>  
    </div>  
  </nav>  
</div>

Then we’ll get some margins around the page.

Also, we can use any responsive containers to change the width of the navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">  
  <div class="container-md">  
    <a class="navbar-brand" href="#">App</a>  
  </div>  
</nav>

We added the navbar-expand-lg class to make it expand when the screen hits the lg breakpoint or wider.

Placement

The placement of the navbar can also be changed.

For example, we can write:

<nav class="navbar fixed-top navbar-light bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">Fixed Navbar</a>  
  </div>  
</nav>

Then we have the fixed-top class to make the navbar stick to the top.

To keep the navbar at the bottom of the screen, we can write:

<nav class="navbar fixed-bottom navbar-light bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">Fixed Navbar</a>  
  </div>  
</nav>

The fixed-bottom class keeps the navbar at the bottom.

We can also use the sticky-top class to make it stick to the top:

<nav class="navbar sticky-top navbar-light bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">Fixed Navbar</a>  
  </div>  
</nav>

Conclusion

We can place our navbar and its content the way we want with various classes.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to customize navs with Bootstrap 5.

Using Dropdowns

We can add dropdowns to our navs.

For example, we can write:

<ul class="nav nav-tabs">  
  <li class="nav-item">  
    <a class="nav-link active" aria-current="page" href="#">foo</a>  
  </li>  
  <li class="nav-item dropdown">  
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>  
    <ul class="dropdown-menu">  
      <li><a class="dropdown-item" href="#">action 1</a></li>  
      <li><a class="dropdown-item" href="#">action 2</a></li>  
      <li><a class="dropdown-item" href="#">action 3</a></li>  
      <li>  
        <hr class="dropdown-divider">  
      </li>  
      <li><a class="dropdown-item" href="#">actiob 4</a></li>  
    </ul>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">bar</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
  </li>  
</ul>

We add a dropdown by adding an li with the dropdown and nav-link classes.

Together, they make the dropdown toggle fit inside the menu.

Then we add our dropdown toggle with the .dropdown-toggle class.

And .dropdown-item class is applied to dropdown items.

We also have .nav-tabs to style the nav as tabs.

Pills with Dropdowns

We can change .nav-tabs to .nav-pills to change the links to display as pills:

<ul class="nav nav-pills">  
  <li class="nav-item">  
    <a class="nav-link active" aria-current="page" href="#">foo</a>  
  </li>  
  <li class="nav-item dropdown">  
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>  
    <ul class="dropdown-menu">  
      <li><a class="dropdown-item" href="#">action 1</a></li>  
      <li><a class="dropdown-item" href="#">action 2</a></li>  
      <li><a class="dropdown-item" href="#">action 3</a></li>  
      <li>  
        <hr class="dropdown-divider">  
      </li>  
      <li><a class="dropdown-item" href="#">actiob 4</a></li>  
    </ul>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">bar</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
  </li>  
</ul>

JavaScript Behavior

We can add tabs that show content when we click on it.

To do that, we write:

<ul class="nav nav-tabs" id="myTab" role="tablist">  
  <li class="nav-item" role="presentation">  
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>  
  </li>  
  <li class="nav-item" role="presentation">  
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>  
  </li>  
  <li class="nav-item" role="presentation">  
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>  
  </li>  
</ul>  
<div class="tab-content" id="myTabContent">  
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at neque orci. In vehicula metus eu euismod rhoncus. Pellentesque pharetra ligula sed efficitur ultricies. Quisque et congue metus, id rutrum purus. Maecenas finibus efficitur mauris, quis varius enim elementum a. Phasellus vel aliquet diam. Proin tincidunt eros pellentesque mauris laoreet, nec ullamcorper magna vulputate. Suspendisse potenti. Nullam lobortis ultricies nunc id vulputate. Curabitur pulvinar, lorem ac tempus lobortis, tortor tortor dignissim enim, quis tempor est lacus ut augue. Sed tincidunt lectus urna, ac aliquet velit suscipit a. Nullam tempus sem id nibh vulputate, nec ultricies lorem porttitor. Sed pharetra lacinia odio non sodales.  
  </div>  
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Mauris ullamcorper ornare dui at bibendum. Duis sed quam ac purus tincidunt aliquet. Suspendisse potenti. Praesent vitae turpis dui. Fusce ut tincidunt est, ut sagittis mi. Sed euismod pharetra pulvinar. Morbi at facilisis quam. Vestibulum sagittis arcu sit amet scelerisque vestibulum. Nulla nisl libero, ornare et facilisis et, tempus sagittis massa. Sed tincidunt metus non ex ornare, eu elementum lorem sagittis. Nam a sapien eleifend, dignissim purus sit amet, ultrices neque. Suspendisse imperdiet purus eu posuere pellentesque. Nulla facilisi.  
  </div>  
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Sed dui purus, tempor ac consectetur quis, viverra ut tellus. Duis eget venenatis nibh, eget placerat diam. Suspendisse a ex libero. Ut quis turpis tempor sem pharetra ullamcorper sed at metus. In eget nibh orci. Aenean ac nulla nulla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin eu facilisis felis. Nulla sed risus mattis, tristique odio eu, mattis ex. Morbi aliquet nulla eget vestibulum lobortis. Sed aliquam odio magna, et dictum sapien scelerisque sed. Praesent odio sapien, gravida ac leo quis, ornare placerat nibh. Donec id ex mauris. Nunc ut sapien quis ex malesuada pretium non sed elit. Cras maximus ipsum sed augue sollicitudin, ut scelerisque velit ultrices. Sed rutrum viverra massa in condimentum.  
  </div>  
</div>

to add the tabs.

The nav-item class is applied to the nav items.

And the tab-pane class is applied to the content class.

href is the URL for content. It should match the ID of the tab content divs plus a hash before it.

fade adds a fade effect for transitions.

Conclusion

We can add navs to display content.

The styling can be changed.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add modals with JavaScript with Bootstrap 5.

Scrollable Modal

We can make a modal that lets us scroll the modal body by adding the .modal-dialog-scrollable class:

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

<div class="modal" tabindex="-1" id='modal' data-backdrop="static">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at neque orci. In vehicula metus eu euismod rhoncus. Pellentesque pharetra ligula sed efficitur ultricies. Quisque et congue metus, id rutrum purus. Maecenas finibus efficitur mauris, quis varius enim elementum a. Phasellus vel aliquet diam. Proin tincidunt eros pellentesque mauris laoreet, nec ullamcorper magna vulputate. Suspendisse potenti. Nullam lobortis ultricies nunc id vulputate. Curabitur pulvinar, lorem ac tempus lobortis, tortor tortor dignissim enim, quis tempor est lacus ut augue. Sed tincidunt lectus urna, ac aliquet velit suscipit a. Nullam tempus sem id nibh vulputate, nec ultricies lorem porttitor. Sed pharetra lacinia odio non sodales.
        </p>
        <p>
          Mauris ullamcorper ornare dui at bibendum. Duis sed quam ac purus tincidunt aliquet. Suspendisse potenti. Praesent vitae turpis dui. Fusce ut tincidunt est, ut sagittis mi. Sed euismod pharetra pulvinar. Morbi at facilisis quam. Vestibulum sagittis arcu sit amet scelerisque vestibulum. Nulla nisl libero, ornare et facilisis et, tempus sagittis massa. Sed tincidunt metus non ex ornare, eu elementum lorem sagittis. Nam a sapien eleifend, dignissim purus sit amet, ultrices neque. Suspendisse imperdiet purus eu posuere pellentesque. Nulla facilisi.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Vertically Centered

We can use the modal-dialog-centered class to vertically center the modal:

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

<div class="modal" tabindex="-1" id='modal' data-backdrop="static">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Using the Grid

We can put the grid inside the modal body.

This way, we can create layouts for our content.

For example, we can write:

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

<div class="modal" tabindex="-1" id='modal' data-backdrop="static">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="modal-body">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-6">.col-md-6</div>
              <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
            </div>
            <div class="row">
              <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
              <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
            </div>
            <div class="row">
              <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
            </div>
            <div class="row">
              <div class="col-sm-9">
                Level 1: .col-sm-9
                <div class="row">
                  <div class="col-8 col-sm-6">
                    Level 2: .col-8 .col-sm-6
                  </div>
                  <div class="col-4 col-sm-6">
                    Level 2: .col-4 .col-sm-6
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

We put our grid inside the div with the modal-body class.

The content will be size automatically.

Varying Modal Content

We can put a form in the modal body.

For example. we can write:

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

<div class="modal" tabindex="-1" id='modal' data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal-message">New post</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Title:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <label for="message-text" class="col-form-label">content:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

We put a form inside the modal body.

Conclusion

We can add a modal with scrollable content.

Also, we can put a grid or forms inside the modal body.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add modals with JavaScript with Bootstrap 5.

Modal

Modals are popups that show notification and other content.

It’s placed over everything else in the document and remove scroll from the body.

Clicking on the backdrop will automatically close the modal.

Bootstrap 5 only supports one modal window at a time.

Modals use position: fixed .

The autofocus attribute has no effect in Bootstrap modals.

We can achieve the same effect with JavaScript code by focusing elements when the show.bs.modal event is emitted:

const myModal = document.getElementById('myModal');
const myInput = document.getElementById('myInput');

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})

Modal Components

We can add a modal by adding a few classes to our container elements:

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

<div class="modal" tabindex="-1" id='modal'>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at neque orci. In vehicula metus eu euismod rhoncus.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

We add a button to open the modal.

The button has the data-toggle attribute to open the modal with the given selector.

Then in our modal, we have the same ID as the data-toggle value.

Then we have our modal content.

It includes the modal-dialog class to define the modal.

modal-content contains the content.

modal-header has the header.

modal-title has the title.

modal-body has the body.

modal-footer has the footer.

Static Backdrop

The backdrop can be set to static so that it won’t close when we click outside it.

For example, we can write:

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

<div class="modal" tabindex="-1" id='modal' data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at neque orci. In vehicula metus eu euismod rhoncus.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

We just add the data-backdrop='static' attribute to disable closing when clicking outside.

Scrolling Long Content

When we have long content, then the scrolling depends on the modal instead of the page:

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

<div class="modal" tabindex="-1" id='modal' data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at neque orci. In vehicula metus eu euismod rhoncus. Pellentesque pharetra ligula sed efficitur ultricies. Quisque et congue metus, id rutrum purus. Maecenas finibus efficitur mauris, quis varius enim elementum a. Phasellus vel aliquet diam. Proin tincidunt eros pellentesque mauris laoreet, nec ullamcorper magna vulputate. Suspendisse potenti. Nullam lobortis ultricies nunc id vulputate. Curabitur pulvinar, lorem ac tempus lobortis, tortor tortor dignissim enim, quis tempor est lacus ut augue. Sed tincidunt lectus urna, ac aliquet velit suscipit a. Nullam tempus sem id nibh vulputate, nec ultricies lorem porttitor. Sed pharetra lacinia odio non sodales.
        </p>
        <p>
          Mauris ullamcorper ornare dui at bibendum. Duis sed quam ac purus tincidunt aliquet. Suspendisse potenti. Praesent vitae turpis dui. Fusce ut tincidunt est, ut sagittis mi. Sed euismod pharetra pulvinar. Morbi at facilisis quam. Vestibulum sagittis arcu sit amet scelerisque vestibulum. Nulla nisl libero, ornare et facilisis et, tempus sagittis massa. Sed tincidunt metus non ex ornare, eu elementum lorem sagittis. Nam a sapien eleifend, dignissim purus sit amet, ultrices neque. Suspendisse imperdiet purus eu posuere pellentesque. Nulla facilisi.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Since we have long content, the scroll bar will scroll the modal instead of the page.

Conclusion

We can add modals to display what we want.

The backdrop can close or modal and that can be disabled.