Category: HTML

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 list groups with Bootstrap 5.

Contextual Classes and List Group Actions

We can add styling classes to list group actions.

For example, we can write:

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">no style</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">primary</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">secondary</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">success</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">danger</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">warning</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">info</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">light</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">dark</a>
</div>

We have the list-group-item-action in each list group item and the list-group-item-primary classes to style them.

List Group Items With Badges

We can add list group items with badges.

For instance, we can write:

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge bg-primary rounded-pill">22</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Lorem ipsum dolor sit amet
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    consectetur adipiscing elit
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

We add the badge to the right of the text by adding a span with the badge class.

rounded-pill make them more rounded than the default style.

Custom Content

Also, we can add any content we want.

The layout can be added with Bootstrap 5’s flexbox utility classes.

For example, we can write:

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">item</h5>
      <small>10 days ago</small>
    </div>
    <p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <small>Donec id elit non mi porta.</small>
  </a>

  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">item</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Vestibulum mauris mauris, faucibus in bibendum at, commodo nec nulla. </p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>

  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">item</h5>
      <small class="text-muted">2 days ago</small>
    </div>
    <p class="mb-1">Fusce mi mi, viverra quis vehicula a, bibendum eu magna. </p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

We put content in a tags and lay them out with the d-flex , w-100 , and justify-content-between classes.

d-flex makes the container display with a flexbox layout.

w-100 makes the content 100% wide.

justify-content-between put the items on the 2 ends of the container.

Checkboxes and Radios

Checkboxes and radio buttons can be added easily with the input element and classes the come with Bootstrap 5.

For example, we can write:

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input mr-1" type="checkbox" value="">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </li>
  <li class="list-group-item">
    <input class="form-check-input mr-1" type="checkbox" value="">
    Proin non libero congue lectus pharetra dictum quis ut eros
  </li>
  <li class="list-group-item">
    <input class="form-check-input mr-1" type="checkbox" value="">
    Nunc ac eleifend risus.
  </li>
  <li class="list-group-item">
    <input class="form-check-input mr-1" type="checkbox" value="">
    In vitae arcu tincidunt, eleifend velit id
  </li>
  <li class="list-group-item">
    <input class="form-check-input mr-1" type="checkbox" value="">
    Vestibulum at eros
  </li>
</ul>

We added checkboxes and spaced them out with the mr-1 class to add some margins on the right.

Conclusion

We can add list groups with various styles and various layouts.

Checkboxes can also be added.

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 form validation with Bootstrap 5.

Browser Defaults

We can use the browser default form validation.

For example, we can write:

<form class="row g-3">
  <div class="col-md-4">
    <label for="first-name" class="form-label">First name</label>
    <input type="text" class="form-control" id="first-name" value="james" required>
  </div>

 <div class="col-md-4">
    <label for="last-name" class="form-label">Last name</label>
    <input type="text" class="form-control" id="last-name" value="smith" required>
  </div>

 <div class="col-md-4">
    <label for="username" class="form-label">Username</label>
    <div class="input-group">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control" id="username" required>
    </div>
  </div>

 <div class="col-md-6">
    <label for="city" class="form-label">City</label>
    <input type="text" class="form-control" id="city" required>
  </div>

 <div class="col-md-3">
    <label for="region" class="form-label">Region</label>
    <select class="form-select" id="region" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
  </div>

 <div class="col-md-3">
    <label for="postal-code" class="form-label">Postal Code</label>
    <input type="text" class="form-control" id="postal-code" required>
  </div>

 <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="agree" required>
      <label class="form-check-label" for="agree">
        I agree
      </label>
    </div>
  </div>

 <div class="col-12">
    <button class="btn btn-primary" type="submit">Sign up</button>
  </div>
</form>

We add the fields with the require attribute to add checks for the form validation.

Since we don’t have the novalidate attribute on the form itself, browser validation will be used.

Validation Classes

The .is-invalid , .is-valid , .valid-feedback and .invalid-feedback classes can be applied to form fields to show different styles and messages to users to indicate validity.

For example, we can write:

<form class="row g-3">
  <div class="col-md-4">
    <label for="first-name" class="form-label">First name</label>
    <input type="text" class="form-control is-valid" id="first-name" value="james" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>

  <div class="col-md-4">
    <label for="last-name" class="form-label">Last name</label>
    <input type="text" class="form-control is-valid" id="last-name" value="smith" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>

  <div class="col-md-4">
    <label for="username" class="form-label">Username</label>
    <div class="input-group">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control is-invalid" id="username" required>
      <div class="invalid-feedback">
        Username is required.
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <label for="city" class="form-label">City</label>
    <input type="text" class="form-control is-invalid" id="city" required>
    <div class="invalid-feedback">
      City is requird
    </div>
  </div>

  <div class="col-md-3">
    <label for="region" class="form-label">Region</label>
    <select class="form-select is-invalid" id="region" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
    <div class="invalid-feedback">
      Region is required
    </div>
  </div>

  <div class="col-md-3">
    <label for="postal-code" class="form-label">Postal Code</label>
    <input type="text" class="form-control is-invalid" id="postal-code" required>
    <div class="invalid-feedback">
      Postal code is required
    </div>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="agree" required>
      <label class="form-check-label" for="agree">
        I agree
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>

  <div class="col-12">
    <button class="btn btn-primary" type="submit">Sign up</button>
  </div>
</form>

to add form validation styles.

We have the invalid-feedback class to display a message if the field isn’t valid.

The valid-feedback class is used to display a message for valid fields.

The is-valid class is used on inputs to indicate that they’re valid.

is-invalid is used to display fields that are invalid.

Supported Elements

Validation styles can be added to inputs, textareas with the form-control class.

Select elements with the .form-select class can also have validation styles applied.

.form-check s and .form-file can also have the styles applied.

For example, we can write:

<form class="was-validated">
  <div class="mb-3">
    <label for="textarea" class="form-label">Textarea</label>
    <textarea class="form-control is-invalid" id="textarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      text is required
    </div>
  </div>

<div class="form-check mb-3">
    <input type="checkbox" class="form-check-input" id="checkbox" required>
    <label class="form-check-label" for="checkbox">agree</label>
    <div class="invalid-feedback">invalid checkbox</div>
  </div>

<div class="form-check">
    <input type="radio" class="form-check-input" id="apple" name="radio-stacked" required>
    <label class="form-check-label" for="radio">apple</label>
  </div>

  <div class="form-check mb-3">
    <input type="radio" class="form-check-input" id="orange" name="radio-stacked" required>
    <label class="form-check-label" for="orange">orange</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="mb-3">
    <select class="form-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">invalid select</div>
  </div>

  <div class="form-file mb-3">
    <input type="file" class="form-file-input" id="file" required>
    <label class="form-file-label" for="file">
      <span class="form-file-text">Choose file...</span>
      <span class="form-file-button">Browse</span>
    </label>
    <div class="invalid-feedback">invalid file</div>
  </div>

  <div class="mb-3">
    <button class="btn btn-primary" type="submit" disabled>Submit</button>
  </div>
</form>

The was-validated is applied to the form.

Then we add the is-invalid and invalid-feedback classes to the fields and messages.

Everything will be red.

Inputs and textareas will have the exclamation mark.

Conclusion

We can add validation styles with various classes provided by Bootstrap 5.

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 layouts to forms with Bootstrap 5.

Form Layout

We can use Bootstrap 5 to add some layouts to our forms.

It provides us with margin utilities to add some structure.

For example, we can write:

<div class="mb-3">
  <label for="first-name" class="form-label">first name</label>
  <input type="text" class="form-control" id="first-name" placeholder="first name">
</div>

<div class="mb-3">
  <label for="last-name" class="form-label">last name</label>
  <input type="text" class="form-control" id="last-name" placeholder="last name">
</div>

We have the mb-3 class to ad some margins below the form.

Labels have the form-label class.

And inputs have the form-control class to apply Bootstrap styles.

Form Grid

We can put our form fields in a grid if we need forms fields side by side.

For example, we can write:

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name">
  </div>

 <div class="col">
    <input type="text" class="form-control" placeholder="Last name">
  </div>
</div>

To have 2 input boxes side by side.

We have one div with row class and 2 divs with the col classes to add the columns.

The $enable-grid-classes SASS variables to be enabled and it’s on by default.

Gutters

We can add gutters with the g-* classes.

For example, we can write:

<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name">
  </div>
</div>

We added some gutters with the g-3 class.

The gap is added to the div.

We can add more complex forms using the grid:

<form class="row g-3">
  <div class="col-md-6">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email">
  </div>

 <div class="col-md-6">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password">
  </div>

 <div class="col-12">
    <label for="address" class="form-label">Address</label>
    <input type="text" class="form-control" id="address" placeholder="Address">
  </div>

 <div class="col-12">
    <label for="address2" class="form-label">Address 2</label>
    <input type="text" class="form-control" id="address2" placeholder="Apartment, studio, or floor">
  </div>

 <div class="col-md-6">
    <label for="city" class="form-label">City</label>
    <input type="text" class="form-control" id="city">
  </div>

 <div class="col-md-4">
    <label for="inputState" class="form-label">Region</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>...</option>
    </select>
  </div>

 <div class="col-md-2">
    <label for="postal" class="form-label">Postal Code</label>
    <input type="text" class="form-control" id="postal">
  </div>

 <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="agree">
      <label class="form-check-label" for="agree">
        I agree
      </label>
    </div>
  </div>

 <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign up</button>
  </div>
</form>

We add multiple fields to our form.

Some are wider than others.

Those are added with the col-* classes

Horizontal Form

We can add the .row class to add form groups with the .col-*-* classes to set the width of the labels and controls.

Also, we’ve to add the .col-form-label class to the labels so they’re vertically centered with their form controls.

For example, we can write:

<form>
  <div class="row mb-3">
    <label for="email" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email">
    </div>
  </div>

 <div class="row mb-3">
    <label for="password" class="col-sm-2 col-form-label">password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="password">
    </div>
  </div>

 <fieldset>
    <div class="row mb-3">
      <legend class="col-form-label col-sm-2 pt-0">Fruit</legend>

 <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="fruit" id="apple" value="apple" checked>
          <label class="form-check-label" for="apple">
            apple
          </label>
        </div>

<div class="form-check">
          <input class="form-check-input" type="radio" name="fruit" id="banana" value="banana">
          <label class="form-check-label" for="banana">
            Second radio
          </label>
        </div>

 <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="fruit" id="orange" value="orange" disabled>
          <label class="form-check-label" for="orange">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>

 <div class="row mb-3">
    <div class="col-form-label col-sm-2 pt-0">I agree</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="agree">
        <label class="form-check-label" for="agree">
          I agree
        </label>
      </div>
    </div>
  </div>

 <button type="submit" class="btn btn-primary">Sign up</button>
</form>

We have a form with the labels and form controls side by side.

Also, we added the mb-3 class to add some margins to the bottom.

And pt-0 removes the top padding.

Conclusion

We can add form layouts with various utility classes provided by 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 dropdowns with Bootstrap 5.

Dropdowns

Dropdowns are toggleable overlays for display lists of items.

The Bootstrap 5 implementation depends on Popper.js.

For example, we can write:

<div class="dropdown">  
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">  
    Dropdown button  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

We have the div with the dropdown class.

The button lets us toggle the dropdown on and off.

The data-toggle attribute is also needed to make the button a toggle.

It has the dropdown-toggle class to add the toggle.

Then we add the ul with the dropdown-menu class to add the list.

The list items have the dropdown-item class.

The button can be replaced with an a element.

For example, we can write:

<div class="dropdown">  
  <a class="btn btn-secondary dropdown-toggle" href="#" data-toggle="dropdown">  
    Dropdown link  
  </a>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

We have an a element instead with the dropdown-toggle class instead of a button.

Also, we can change the button variant.

For example, we can write:

<div class="dropdown">  
  <a class="btn btn-danger dropdown-toggle" href="#" data-toggle="dropdown">  
    Dropdown link  
  </a>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

to change the class of the button to .btn-danger .

Split Button

The dropdown button can be a split button.

To add it, we add 2 buttons:

<div class="btn-group">  
  <button type="button" class="btn btn-danger">Action</button>  
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">  
    <span class="sr-only">Toggle Dropdown</span>  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

We have the .btn-group class instead of the dropdown class in the outer div.

Inside the div, we have 2 buttons.

One with the text and one with the arrow.

It has the dropdown-toggle class and the data-toggle attribute so that we can toggle the menu with it.

Also, we have the dropdown-toggle-split to make the button align with the left button.

Sizing

The size of the button dropdown button can be changed.

For example, we can use the btn-lg class to make it large:

<div class="btn-group">  
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">  
    Large button  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

We can also add the btn-sm class to make it small:

<div class="btn-group">  
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">  
    Large button  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

Directions

The direction of the dropdown can be changed.

We can make it display above the button.

For example, we can use the .dropup class to do that by writing:

<div class="btn-group dropup">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    Large button  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

It also works with split buttons:

<div class="btn-group dropup">  
  <button type="button" class="btn btn-secondary">  
    Split dropup  
  </button>  
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">  
    <span class="sr-only">Toggle Dropdown</span>  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

Dropright

We can add the .dropright class to make the menu display on the right.

For example, we can write:

<div class="btn-group dropright">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    button  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

to make the right arrow display beside the text and show the menu on the right.

For a split button, we can write:

<div class="btn-group dropright">  
  <button type="button" class="btn btn-secondary">  
    Split  
  </button>  
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">  
    <span class="sr-only">Toggle Dropdown</span>  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

to do the same thing with a split button.

Conclusion

We can add a dropdown easily with Bootstrap 5.

It comes with various customization options.

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 dropdowns with Bootstrap 5.

Dropleft

We can add the dropleft class to make the menu show on the left.

The arrow will also be pointed to the left.

For example, we can write:

<div class="btn-group dropleft">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    button  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

We add the dropleft class to the outer div to make the arrow show to the left of the button.

Also, the menu will be displayed to the left of the button.

With a split button, we’ve to put the arrow on the right instead of the left:

<div class="btn-group dropleft">  
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">  
    <span class="sr-only">Toggle Dropdown</span>  
  </button>  
  <button type="button" class="btn btn-secondary">  
    Split  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

Menu Items

Menu items had to be links in old versions of Bootstrap.

With Bootstrap 5, items can also be buttons.

For example, we can write:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    button  
  </button>  
  <ul class="dropdown-menu">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

We have li elements that have buttons instead of links.

Active

We can set an item to be active with the .active class.

For instance, we can write:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    button  
  </button>  
  <ul class="dropdown-menu">  
    <li><button class="dropdown-item active" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

With the active class, the item will be highlighted.

Disabled

To make an item disabled, we can add the disabled class:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    button  
  </button>  
  <ul class="dropdown-menu">  
    <li><button class="dropdown-item disabled" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

Now we can’t interact with the disabled item and it’s grayed out.

Menu Alignment

We can change the alignment of the menu.

To change it, we can add the .dropdown-menu-right class to the .dropdown-menu class to right-align the menu.

For example, we can write:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-right">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

We have the dropdown-menu and dropdown-menu-right classes to move the alignment of it to the right.

Responsive Alignment

We can disable the dynamic positioning by adding the data-display='static' attribute.

For example, we can write:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-lg-right">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

We add the data-display attribute.

And we added the dropdown-menu-lg-right to display the menu correctly.

This will make the menu align to the left.

We can also align it to the left with the dropdown-menu-lg-left class:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-lg-left">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

Menu Content

We can add various kinds of content to the menu.

Headers

We can add a header with the dropdown-header class:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-lg-left">  
    <li>  
      <h6 class="dropdown-header">Dropdown header</h6>  
    </li>  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

Dividers

Also, we can add a divider with the dropdown-divider class:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-lg-left">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li>  
      <hr class="dropdown-divider">  
    </li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

We’ll see an empty line in between the items.

Conclusion

We can customize the menu with many features.

We can add buttons as items.

Headers and dividers can also be added.