Bootstrap label.col-md-3 div.col-md-3 wrapping strangely

Question

Trying to organise a display form using .net MVC and bootstrap - however, getting some odd bootstrap wrapping behavior.

I have the following code;

@for (int i = 0; i < Model.People.Count(); i++)
{
    var person = Model.People[i];
    <label class="col-md-3 col-form-label">@Html.DisplayNameFor(modelItem => person.Name) @(i + 1)</label>
    <div class="col-md-3">
        @Html.DisplayFor(modelItem => person.Name, new { @class = "form-control" })
    </div>
}

What I'm expecting is a layout kinda like this:

<table>
  <tr>
    <td>Person 1:</td>
    <td>Joe</td>
    <td>Person 2:</td>
    <td>Fred</td>
  </tr>
  <tr>
    <td>Person 3:</td>
    <td>Sally</td>
    <td>Person 4:</td>
    <td>etc</td>
  </tr>

But what im actually getting is like this:

<table>
  <tr>
    <td>Person 1:</td>
    <td>Joe</td>
    <td>Person 2:</td>
    <td>Fred</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>Person 3:</td>
  </tr>
  <tr>
    <td>Sally</td>
    <td>Person 4:</td>
    <td>etc</td>
  </tr>
</table>

Bootply for convenience

I was under the impression that the bootstrap grid layout was simply supposed to wrap if it exceeds 12. So 4x col-md-6 would essentially produce 2 rows which both have 2 columns at 50%.

Can anyone offer any insight on why the wrapping behavior is acting strangely if the elements are an alternating label / div? Possibly a bug with bootstrap - considering their own documentation uses the same kind of markup (e.g.)?

Was going to say:

Would changing the markup to have an extra div be my best approach? e.g.

<div class="col-md-3">
    <label>Person 1:</label>
</div>
<div class="col-md-3>Joe</div>

But as it turns out - this also has the strange wrapping behaviour: here

use
to wrap every 4 columns separately or either use
after every 4 columns — swapnil solanke, Apr 18 '17 at 04:59
Kinda wanted to avoid having conditional rows (e.g. if (i % 2 == 0)
if(i % 2 != 0)
. I thought the default behavior was that it was supposed to wrap if the col exceeded 12 - and this is the case if it's only divs (without any labels at all - including nested). Moreso wanting to find out why the label upsets this behavior. — Luke, Apr 18 '17 at 05:04
you will get details why default behavior is not working on this link http://stackoverflow.com/questions/25598728/irregular-bootstrap-column-wrapping — swapnil solanke, Apr 18 '17 at 05:09

score 0 · Answer 1 · edited Aug 23 '22 at 15:47

There are multiple ways to solve this issue

1.Wrapping every 12 column in single row separately. example.

<div class="row">
 
    <label class="col-md-3">Person 1</label>
  
  <div class="col-md-3">Joe</div>
 
    <label class="col-md-3">Person 1</label>
  
  <div class="col-md-3">Fred</div>
</div>
<div class="row">
    <label class="col-md-3">Person 1</label>
  
  <div class="col-md-3">Sally</div>
  
    <label class="col-md-3">Person 1</label>
  
  <div class="col-md-3">etc</div>
</div>
<div class="row">
    <label class="col-md-3">Person 1</label>
  
  <div class="col-md-3">Sally</div>
  
    <label class="col-md-3">Person 1</label>
  
  <div class="col-md-3">etc</div>
</div>

Example

Using clearfix class. add clearfix div after every 12 columns.

Example

Using CSS apply similar Height to all columns if you are sure that no need of auto height.

div {
  border: 1px solid black;
}
label {
  border: 1px solid red;
}

<div class="form-group">
  <label class="col-md-3">Person 1</label>
  <div class="col-md-3">Joe</div>
  <label class="col-md-3">Person 2</label>
  <div class="col-md-3">Fred</div>
  <label class="col-md-3">Person 3</label>
  <div class="col-md-3">Sally</div>
  <label class="col-md-3">Person 4</label>
  <div class="col-md-3">etc</div>
</div>

Here you will get more details about this isssue.

Luke · Answer 2 · 2017-04-19T00:27:20.850

Turns out it's to do with the margin-bottom of the label.

So it's essentially doing this.

I'll probably just add a display: flex onto it - to force an equal height. This will solve it until bootstrap 4 is released - as it will then be built using display: flex instead of float's anyway.

EDIT: I ended up fixing it with:

@for (int i = 0; i < Model.People.Count(); i++)
{
    var person = Model.People[i];

    <div class="col-md-6">
         <div class="row">
            <label class="col-md-6 col-form-label">@Html.DisplayNameFor(modelItem => person.Name) @(i + 1)</label>
            <div class="col-md-6">
                @Html.DisplayFor(modelItem => person.Name, new { @class = "form-control" })
            </div>
         </div>
    </div>
}

This makes all label + displayfor columns (outer col-md-6 and row divs) the same height (i.e. the height of the label) - so there isnt any overhang for the next column to float left onto. Meaning that it now wraps correctly.

Bootstrap label.col-md-3 div.col-md-3 wrapping strangely

2 Answers2