Evenly Divide horizontal space between elements on Mobile

Question

I generate a list of buttons dynamically. And the number of items is different between routes.

var app = angular.module("myApp", []);
app.controller("keysController", function keysController() {
  var $ctrl = this;
  $ctrl.keys = ["id", "destination", "body", "state", "createdDate", "processedDate"]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />

<div ng-app="myApp" ng-controller="keysController">

  <ul class="list-unstyled d-flex flex-wrap mb-0">
    <li ng-repeat="key in $ctrl.keys">
      <button type="button" ng-click="" class="btn mx-1">
      {{key}}
    </button>
    </li>
  </ul>
</div>

On Desktop, since there is enough space, all the items are on the same line. However, on small size screen, they are, at least, on two lines. In that case, they should take all the horizontal space.

Use this code, if you answer.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-unstyled d-flex flex-wrap mb-0">
  <li>
    <button type="button" ng-click="" class="btn btn-dark mx-1">
      id
    </button>
  </li>
  <li>
    <button type="button" ng-click="" class="btn btn-dark mx-1">
      destination
    </button>
  </li>
  <li>
    <button type="button" ng-click="" class="btn btn-dark mx-1">
      body
    </button>
  </li>
  <li>
    <button type="button" ng-click="" class="btn btn-dark mx-1">
      state
    </button>
  </li>
  <li>
    <button type="button" ng-click="" class="btn btn-dark mx-1">
      createdDate
    </button>
  </li>
  <li>
    <button type="button" ng-click="" class="btn btn-dark mx-1">
      processedDate
    </button>
  </li>
</ul>

Update

It seems that I have not explained the issue clearly. So, I want to explain it further.

The ul, li, and button should all be responsive. If the items are wrapped, it is fine. However, they should occupy all the space. For instance, if there is one item on a line, it should take all the line: its width should be equal to that of the line. If there are two, they should take the width of that line evenly.

Carol Skelly · Accepted Answer · 2018-05-04T11:39:38.673

Instead of using list-unstyled, you can use the nav-fill class which applies this CSS to the nav-items:

.nav-fill .nav-item {
    flex: 1 1 auto;
    text-align: center;
}

Then use btn-block to make the buttons full width...

https://www.codeply.com/go/UhpH2JMtjL

Alternatively, flex-grow-1 and px-1 could be used on the the li, and then w-100 or btn-block in the buttons.

Or, if you want to keep the same markup use CSS like this...

.list-unstyled > li {
flex:1 1 auto;
padding:0 1px;
}
.list-unstyled li .btn {
width:100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-unstyled d-flex flex-wrap mb-0">
  <li>
    <button type="button" ng-click="" class="btn btn-dark">
      id
    </button>
  </li>
  <li>
    <button type="button" ng-click="" class="btn btn-dark">
      destination
    </button>
  </li>
  <li>
    <button type="button" ng-click="" class="btn btn-dark">
      body
    </button>
  </li>
  <li>
    <button type="button" ng-click="" class="btn btn-dark">
      state
    </button>
  </li>
  <li>
    <button type="button" ng-click="" class="btn btn-dark">
      createdDate
    </button>
  </li>
  <li>
    <button type="button" ng-click="" class="btn btn-dark">
      processedDate
    </button>
  </li>
</ul>

Note: mx-1 was removed from the btn's.

Thanks. It works. However, I do not want to use the `nav nav-fill` because it is not for navigation. You can use Bootstrap helper class Instead of the `CSS` code. — mahan, May 04 '18 at 10:29
I found that `col` and `flex-grow-1` both work. Which one do you think I should use? — mahan, May 04 '18 at 10:48
I think `flex-grow-1`, since `col` is meant to be inside `row`. — Carol Skelly, May 04 '18 at 10:51

score 0 · Answer 2 · answered May 04 '18 at 10:39

After half an hour, I found three different solutions using Bootstrap only.

Az ZimSystem has said, instead of using list-unstyled, use the nav and nav-fill classes. And then, use btn-block on buttons.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-fill d-flex flex-wrap mb-0">
  <li class="nav-item px-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      id
    </button>
  </li>
  <li class="nav-item px-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      destination
    </button>
  </li>
  <li class="nav-item px-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      body
    </button>
  </li>
  <li class="nav-item px-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      state
    </button>
  </li>
  <li class="nav-item px-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      createdDate
    </button>
  </li>
  <li class="nav-item px-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      processedDate
    </button>
  </li>
</ul>

Use flex-grow-1 on items and btn-block on buttons.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-unstyled d-flex flex-wrap mb-0">
  <li class="flex-grow-1 mx-1 mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      id
    </button>
  </li>
  <li class="flex-grow-1 mx-1 mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      destination
    </button>
  </li>
  <li class="flex-grow-1 mx-1 mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      body
    </button>
  </li>
  <li class="flex-grow-1 mx-1 mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      state
    </button>
  </li>
  <li class="flex-grow-1 mx-1 mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      createdDate
    </button>
  </li>
  <li class="flex-grow-1 mx-1 mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      processedDate
    </button>
  </li>
</ul>

Use col on items and btn-block on buttons.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-unstyled d-flex flex-wrap mb-0">
  <li class="col mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      id
    </button>
  </li>
  <li class="col mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      destination
    </button>
  </li>
  <li class="col mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      body
    </button>
  </li>
  <li class="col mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      state
    </button>
  </li>
  <li class="col mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      createdDate
    </button>
  </li>
  <li class="col mb-1">
    <button type="button" ng-click="" class="btn btn-dark btn-block">
      processedDate
    </button>
  </li>
</ul>

Evenly Divide horizontal space between elements on Mobile

Use this code, if you answer.

Update

2 Answers2