Bootstrap grid inside list items (2)

http://stackoverflow.com/questions/38401119/

by jmvidal

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="container container-list">
  <div class="row">
    <div class="col-xs-4">
      <input placeholder="field 1">
    </div>
    <div class="col-xs-4">
      <input placeholder="field 2">
    </div>
    <div class="col-xs-4">
      <input placeholder="field 3">
    </div>
    <div class="col-xs-3">
      <input placeholder="field 4">
    </div>
    <div class="col-xs-9">
      <input placeholder="field 5">
    </div>
  </div>

  <div class="row">
    <div class="col-xs-4">
      <input placeholder="field 1">
    </div>
    <div class="col-xs-4">
      <input placeholder="field 2">
    </div>
    <div class="col-xs-4">
      <input placeholder="field 3">
    </div>
    <div class="col-xs-3">
      <input placeholder="field 4">
    </div>
    <div class="col-xs-9">
      <input placeholder="field 5">
    </div>
  </div>
</div>

CSS

/* NB: Bootstrap 3.3.1 */

.container-list {
  counter-reset: list;
  padding-left: 40px;
}

.container-list > .row {
  margin-top: 12px;
  position: relative;
}

.container-list > .row:before {
  counter-increment: list;
  content: counter(list) ". ";
  display: block;
  position: absolute;
  right: 100%;
}

.container-list input {
  border: 2px solid black;
  margin-bottom: 8px;
  padding-left: 4px;
  width: 100%;
}