Bootstrap v4 drops the .btn-group-justified class, see https://github.com/twbs/bootstrap/issues/17631

How to justify the button for:

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">

   <a class="btn btn-primary" href="#" role="button">Left</a>

   <a class="btn btn-primary" href="#" role="button">Middle</a>

   <a class="btn btn-primary" href="#" role="button">Right</a>

 </div>

For anyone finding this after Bootstrap 4 Beta was released...

<div class="btn-group d-flex" role="group">

   <a href="" class="btn btn-secondary w-100">Previous</a>

   <a href="" class="btn btn-secondary w-100">Next</a>

</div>

Indeed the nav-justify class is missing. You can add it yourself based on TB3's code for now:

SCSS code

// Justified button groups

// ----------------------



.btn-group-justified {

  display: table;

  width: 100%;

  table-layout: fixed;

  border-collapse: separate;

  .btn,

  .btn-group {

    float: none;

    display: table-cell;

    width: 1%;

    .btn {

      width: 100%;

    }

    .dropdown-menu {

      left: auto;

    }

  }

}

compiled CSS code

.btn-group-justified {

  display: table;

  width: 100%;

  table-layout: fixed;

  border-collapse: separate; }

  .btn-group-justified .btn,

  .btn-group-justified .btn-group {

    float: none;

    display: table-cell;

    width: 1%; }

    .btn-group-justified .btn .btn,

    .btn-group-justified .btn-group .btn {

      width: 100%; }

    .btn-group-justified .btn .dropdown-menu,

    .btn-group-justified .btn-group .dropdown-menu {

      left: auto; }

HTML

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">

   <a class="btn btn-primary" href="#" role="button">Left</a>

   <a class="btn btn-primary" href="#" role="button">Middle</a>

   <a class="btn btn-primary" href="#" role="button">Right</a>

 </div>

The above HTML code now will look like that shown in the figure beneath:

Handling borders

• Due to the specific HTML and CSS used to justify buttons (namely display: table-cell), the borders between them are doubled. In regular button groups, margin-left: -1px is used to stack the borders instead of removing them. However, margin doesn't work with display: table-cell. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.

Links acting as buttons

• If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".

Dropdowns

Use the following HTML code for dropdown buttons:

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">

   <a class="btn btn-secondary" href="#" role="button">Left</a>

   <a class="btn btn-secondary" href="#" role="button">Middle</a>

    <div class="btn-group">

      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

        Action

      </button>

      <div class="dropdown-menu">

        <a class="dropdown-item" href="#">Action</a>

        <a class="dropdown-item" href="#">Another action</a>

        <a class="dropdown-item" href="#">Something else here</a>

        <div class="dropdown-divider"></div>

        <a class="dropdown-item" href="#">Separated link</a>

      </div>

    </div>

 </div>

The justified button group with dropdown button should look like that shown in the figure below:

With <button> elements

• To use justified button groups with <button> elements, you must wrap each button in a button group. Most browsers don't properly apply our CSS for justification to <button> elements, but since we support button dropdowns, we can work around that.

HTML

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">

   <div class="btn-group" role="group">

     <button type="button" class="btn btn-secondary">Left</button>

   </div>

   <div class="btn-group" role="group">

     <button type="button" class="btn btn-secondary">Middle</button>

   </div>

   <div class="btn-group" role="group">

     <button type="button" class="btn btn-secondary">Right</button>

  </div>

 </div>

The above HTML code used to justified button groups with <button> elements should look like that shown in the figure beneath:

Building on Bass Jobsen's great answer, here is the same functionality using flexbox instead of display: table;

SCSS code

// Justified button groups

// ----------------------



.btn-group-justified {

  display: flex;

  width: 100%;

  .btn,

  .btn-group {

    flex: 1;

    .btn {

      width: 100%;

    }

    .dropdown-menu {

      left: auto;

    }

  }

}

HTML

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">

   <a class="btn btn-primary" href="#" role="button">Left</a>

   <a class="btn btn-primary" href="#" role="button">Middle</a>

   <a class="btn btn-primary" href="#" role="button">Right</a>

 </div>

Please refer to Bass Jobsen's answer for more details on usage with dropdowns, HTML Links and more.

When using with class="dropdown-menu" with Bootstrap V4.0, based on Chris Baswell' solution above and Bootstrap Documentation: https://getbootstrap.com/docs/4.0/components/button-group/#nesting

<div class="btn-group d-flex" role="group">

    <button type="button" class="btn btn-secondary">1</button>

    <button type="button" class="btn btn-secondary">2</button>

    <div class="btn-group w-100" role="group">

        <button type="button" class="btn btn-secondary dropdown-toggle-no-carret w-100" title="MANAGE ENTRIES" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

            Drop Down

        </button>

        <div class="dropdown-menu">

            <a href="" class="btn btn-secondary w-100">Previous</a>

            <a href="" class="btn btn-secondary w-100">Next</a>

        </div>

    </div>

</div>