ASP.net MVC - Why each element on a different row?

I'm creating a simple ASP.net MVC form using bootstrap. My form looks like:

@using(Html.BeginForm()){
    <div class="row">
        <div class="col-md-4">@Html.TextBox("City", "", new { placeholder = "City" })</div>
        <div class="col-md-4">@Html.TextBox("State", "", new { placeholder = "State", maxlength = "2" })</div>
        <div class="col-md-4">@Html.TextBox("Zip", "", new { placeholder = "Zip Code" })</div>
    </div>
}

Although I'm using appropriate classes for columns and textboxes should be inline, they are appearing in different rows. To my understanding, as long as the column widths are within a limit of 12 columns, inline elements should appear in the same row. Why is there a line break between these elements?

N.B: If I remove divs for individual columns and put all textboxes in a single div, they appear in the same row correctly.