CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Bohn
Bohn

Reputation: 26919

Why horizontal form is not showing elements horizontally?

My razor code has generated something like this:

<div class="container col-sm-4" style="background-color: wheat">
  <form action="/AwfulSite/Search/Index" class="form-horizontal" method="post" role="form">
    <div class="form-group">
      <label class="col-sm-2 control-label" for="FirstName" style="text-align: right">FirstName</label>
      <input class="form-control col-sm-10" id="FirstName" name="FirstName" type="text" value="">
    </div>
  </form>
</div>

But why is it showing the label on a new line? I want them to be horizontal next to each other and I have defined the form as horizontal too

enter image description here

Upvotes: 1

Views: 51

Answers (1)

Serlite
Serlite

Reputation: 12258

The problem here is a subtle one - you've tried to use a .form-control element as a column, which interferes with how Bootstrap's scaffolding system is designed. Looking at the styles that .form-control applies, one is width:100%, which will make the element wider than what a .col-sm-10 should be (which is why it breaks to the next line).

Looking at the documentation example, they get around this by nesting the .form-control inside a <div>, and making that containing <div> the column instead. So revising your code accordingly:

<div class="container col-sm-4" style="background-color: wheat">
  <form action="/AwfulSite/Search/Index" class="form-horizontal" method="post" role="form">
    <div class="form-group">
      <label class="col-sm-2 control-label" for="FirstName" style="text-align: right">FirstName</label>
      <div class="col-sm-10">
        <input class="form-control" id="FirstName" name="FirstName" type="text" value="">
      </div>
    </div>
  </form>
</div>

Here's an example Bootply. Hope this helps! Let me know if you have any questions.

Upvotes: 3

Related Questions