Justify buttons with Bootstrap v4

Question

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

How to justify the button for:

Answer 1

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

 

   Left
   Middle
   Right
 

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

 

   Left
   Middle
    

      
        Action
      
      

        Action
        Another action
        Something else here
        

        Separated link
      
    
 

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

With elements

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

HTML

 

   

     Left
   
   

     Middle
   
   

     Right
  
 

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