CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mike S
Mike S

Reputation: 935

Create form with ordered items using bootstrap

Hi I am using bootstrap to create a large form. I am using .form-horizontal and the typical .control-group, .control-label and .controls.

I need the rows to be labeled by number similar to or using an ol but I can't get the styles right.

Here is an example of what the code looks like:

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Remember me
      </label>
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>

Upvotes: 0

Views: 269

Answers (1)

Mike S
Mike S

Reputation: 935

I came up with a solution that seems to work pretty well. I added a <div class="ordered-container"> surrounding the section I wanted to order and then I included the below css.

.ordered-container {
    counter-reset: ordered-counter;
}

.ordered-container .control-label:before {
    content: counter(ordered-counter);
    counter-increment: ordered-counter;
}

edit: I also added an optional .no-count class to .control-label in the case that I want to not count the element (useful in my usecase). The new css looks like this:

.ordered-container {
    counter-reset: ordered-counter;
}

.ordered-container .control-group:not(.no-count) .control-label:before {
    content: counter(ordered-counter);
    counter-increment: ordered-counter;
}

Upvotes: 1

Related Questions