CODEWITHSUNDEEP
asp.net-mvc-3twitter-bootstrap
bnil
bnil

Reputation: 1541

Cant set proper margin with bootstrap css in MVC

I am developing MVC app. with boot strap.

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

Please check the below image. enter image description here

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>

Upvotes: 1

Views: 1441

Answers (2)

Priyanka
Priyanka

Reputation: 365

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

http://bootsnipp.com/resources

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

Upvotes: 0

glosrob
glosrob

Reputation: 6715

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.

Upvotes: 3

Related Questions