CODEWITHSUNDEEP
cssasp.net-mvctwitter-bootstrap
King_Fisher
King_Fisher

Reputation: 1203

Applying Bootstrap css in MVC view

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.

Upvotes: 4

Views: 10704

Answers (3)

SwapNeil
SwapNeil

Reputation: 555

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>

Upvotes: 4

Aminul
Aminul

Reputation: 1738

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>

Upvotes: 0

Joel Raju
Joel Raju

Reputation: 1360

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;
       }

Upvotes: 0

Related Questions