Cant set proper margin with bootstrap css in MVC

Question

I am developing MVC app. with boot strap.

I am trying to put margin for the first name field.

Please check the below image.

Now the problem is Validation message doesn't appear properly. I want to show the validation message below the first name. If I used margin more than 20 px then text box come below the label of firstname.

How to do this ?

Below is the code.

<div class="span6">     
  <div class="editor-label span3">
        @Html.LabelFor(model => model.FirstName, "First Name")
  </div>
  <div class="editor-field span6 InputBoxMargin" style="width:290px; margin-right:20px;">
   @Html.TextBox("FirstName",null, new {style = "width:210px;" })
   @Html.ValidationMessageFor(model => model.FirstName,"You can't leave this empty.")
  </div>
 </div>

Answer 1

Please refer the below links. You will get exactly what you want

http://bootsnipp.com/resources

http://twitter.github.io/bootstrap/javascript.html

Answer 2

Have you considered using Bootstrap forms? There is a really nice drag and drop builder here. Using forms means the margins are taken care of for you.

Something like

<div class="form-horizontal">
    <div class="control-group">
        @Html.LabelFor(model => model.FirstName, "First Name")
        <div class="controls">
            @Html.TextBox("FirstName",null, new {style = "width:210px;" })
            <p class="help-block">
                @Html.ValidationMessageFor(model => model.FirstName,"You can't leave this empty.")
            </p>
        </div>
    </div>
</div>

Edit: For the drag and drop link -

• Build your form by dragging/dropping components onto the canvas
• click the 'rendered' tab
• copy/paste the HTML
• et voila!

Should probably take sometime to refer to the Github/docs site to understand why/how it works too.