Applying Bootstrap css in MVC view

Question

I'm using Bootstrap css

view :

    <div class="container">
    @using (Html.BeginForm(new { @class="form-horizontal"}))
{
    @Html.ValidationSummary(true)



   <div class="form-group">
       @Html.LabelFor(model => model.Rank_name, new { @class = "control-label col-sm-2" })
    <div class="col-sm-10">
            @Html.TextBoxFor(model => model.Rank_name, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Rank_name)
    </div>
  </div>

   <div class="form-group">
       @Html.LabelFor(model => model.rank_code, new { @class = "control-label col-sm-2" })
    <div class="col-sm-10">
            @Html.TextBoxFor(model => model.rank_code, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.rank_code)
    </div>
  </div>
   <div class="form-group">
       @Html.LabelFor(model => model.Target_amount, new { @class = "control-label col-sm-2" })
    <div class="col-sm-10">
            @Html.TextBoxFor(model => model.Target_amount, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Target_amount)
    </div>
  </div>
        <div class="form-group">        
          <div class="col-sm-offset-2 col-sm-10">
              <input type="submit" value="Create" class="btn btn-default" />

          </div>
        </div>


}
    </div>

but I'm not getting the output exactly what i want, enter image description here

I have used this format Horizontal form

but there is no space between those boxes and the box size is too long .I mean its not good format .what should i do?

Edited: and my Layout :

 <head>
 @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")

        <script src="~/Scripts/bootstrap.min.js"></script>
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
 </head>

Edited 2:

I have put bootstap.css before the cite.css then i got space between those boxes and box sizes are within that div tag but the entire page font size is very very small .I can't read those text.

Which version of Bootstrap are you using? If it's version 2: you're using a version 3 example. If it's version 3: Can you please post the resulting html? It's easier to first analyse if the html is correct and if not perhaps analyse if the asp.net mvc code is correct — ckuijjer
– ckuijjer, Commented Dec 14, 2014 at 20:03
@ckuijjer I have Cite.css in my Layout form so is that make any crossing ? — King_Fisher
– King_Fisher, Commented Dec 14, 2014 at 20:16

SwapNeil · Accepted Answer · 2014-12-15 07:25:38Z

4

If your using bootstrap, you should use it like this:

Don't use form-horizontal class in @using (Html.BeginForm(new {}))

<div class="panel-body">
  <div class="form-horizontal">
    <div class="form-group">
        @Html.LabelFor(model => model.Rank_name, new { @class = "control-label col-sm-2" })
        <div class="col-sm-7">
            @Html.TextBoxFor(model => model.Rank_name, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Rank_name)
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.rank_code, new { @class = "control-label col-sm-2" })
        <div class="col-sm-7">
            @Html.TextBoxFor(model => model.rank_code, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.rank_code)
        </div>
    </div>
</div>

answered Dec 15, 2014 at 7:25

SwapNeil

5552 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ckuijjer Over a year ago

Wow nice that this has been answered. @swapnilnax can you explain why you can't use new @using (Html.BeginForm(new { @class = ... }. Is it a wrong overload?

SwapNeil Over a year ago

@ckuijjer form-horizontal class contain aliginment properties like this:

.form-horizontal .control-label, .form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline {     padding-top: 7px;     margin-top: 0;     margin-bottom: 0; }  .form-horizontal .radio, .form-horizontal .checkbox {     min-height: 27px; }  .form-horizontal .form-group {     margin-right: -15px;     margin-left: -15px; }

so it apply the class for the form in (Html.BeginForm(new { @class = ... }

Joel Raju · Accepted Answer · 2014-12-14 20:37:03Z

0

You have to change the class to col-sm-6 or to class to col-sm-4 depending on what you are looking for.This should reduce the length of the textbox.

And for the spacing between textbox add an id to the form-group and add a margin-bottom to that id .

So the complete code looks like

<div class=<div class="form-group" id="format_margin">        
      <div class="col-sm-offset-2 col-sm-6" >
          <label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">

      </div>
    </div>

And to the css file apply

#format_margin{
        margin-bottom:10px;
       }

edited Dec 14, 2014 at 20:37

answered Dec 14, 2014 at 20:31

Joel Raju

1,3702 gold badges18 silver badges22 bronze badges

3 Comments

King_Fisher Over a year ago

did you see this :w3schools.com/bootstrap/… this is the code i exactly used but the result is not same

Joel Raju Over a year ago

The class used is col-sm-10. Thus the length of the textbox is large.

Joel Raju Over a year ago

if you want a smaller textbox use col-sm-6 or col-sm-4

Aminul · Accepted Answer · 2014-12-15 06:03:56Z

For showing the from control to your desired size on desired screen you need to understand bootstrap grid system. The Bootstrap grid appropriately scales up to 12 columns as the device or viewport size increases. by assigning col-sm-10 class you are assigning 10 column out of 12.For smaller form controls you have to assign smaller value like col-sm-5 or col-sm-6. You can customize the size is medium and large screen by applying col-md-5 and col-lg-4. You can change the form like this in your view:

    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      </head>

      <body>
         <div class="container">
    @using (Html.BeginForm(new { @class="form-horizontal"}))
{
    @Html.ValidationSummary(true)



   <div class="form-group">
       @Html.LabelFor(model => model.Rank_name, new { @class = "control-label col-sm-2" })
    <div class="col-sm-5 col-md-5 col-lg-5">
            @Html.TextBoxFor(model => model.Rank_name, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Rank_name)
    </div>
  </div>

   <div class="form-group">
       @Html.LabelFor(model => model.rank_code, new { @class = "control-label col-sm-2" })
    <div class="col-sm-5 col-md-5 col-lg-5">
            @Html.TextBoxFor(model => model.rank_code, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.rank_code)
    </div>
  </div>
   <div class="form-group">
       @Html.LabelFor(model => model.Target_amount, new { @class = "control-label col-sm-2" })
    <div class="col-sm-5 col-md-5 col-lg-5">
            @Html.TextBoxFor(model => model.Target_amount, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Target_amount)
    </div>
  </div>
        <div class="form-group">        
          <div class="col-sm-offset-2 col-sm-10">
              <input type="submit" value="Create" class="btn btn-default" />

          </div>
        </div>


}
    </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
      </body>

    </html>

Collectives™ on Stack Overflow

Applying Bootstrap css in MVC view

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related