Dimitar Ganichev Dimitar Ganichev - 3 months ago 12
HTML Question

Two column centered (Bootstrap)

I have the following Razor View

<div class="container">

<div class="row well">
<div class="col-md-4 col-md-offset-4">
<h2>Create</h2>
<h4>Create Advert</h4>
</div>
</div>

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">

@Html.ValidationSummary(true, "", new { @class = "text-danger" })

<div class="text-danger">@ViewBag.Message</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5">

<div class="form-group">
@Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2 " })
<div class="col-md-8">
@Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Country, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("CountryDropDown", null, htmlAttributes: new { @class = "form-control", @id = "Country" })
@Html.Hidden("Countries", null, htmlAttributes: new { @class = "form-control", @id = "HiddenCountry" })
@Html.ValidationMessage("CountryDropDown", "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Subregion, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Subregion, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Subregion, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Price, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Price, new { htmlAttributes = new { @class = "form-control" } })
@Html.CheckBox("PriceCheck", isChecked: false) @Html.DisplayName("Price negotiable")
@Html.ValidationMessageFor(model => model.Price, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.BuildingFloorsId, "Floors", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("FloorsDropDown", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.BuildingFloorsId, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Area, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Area, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Area, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.Label("TPP", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Area, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Area, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.Label("Type of construction", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Interior, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Interior, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Exterior, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Exterior, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Exterior, "", new { @class = "text-danger" })
</div>
</div>
</div>

<div class="col-md-5">

<div class="form-group">
@Html.LabelFor(model => model.AdvertisementCategoryId, "Category", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("AdvertisementCategoryId", null, htmlAttributes: new { @class = "form-control", @id = "ddlProductCategory" })
@Html.ValidationMessageFor(model => model.AdvertisementCategoryId, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("StateDropDown", null, htmlAttributes: new { @class = "form-control", @id = "State" })
@Html.Hidden("States", null, htmlAttributes: new { @class = "form-control", @id = "HiddenState" })
@Html.ValidationMessage("StateDropDown", "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.Label("Currency", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("Currency", null, htmlAttributes: new { @class = "form-control", @id = "Currency" })
@Html.Hidden("Currencies", null, htmlAttributes: new { @class = "form-control", @id = "HiddenCurrency" })
@Html.ValidationMessage("Currency", "", new { @class = "text-danger" })
</div>
</div>
<br>

<div class="form-group">
@Html.LabelFor(model => model.FloorId, "Floor", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("FloorDropDown", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.FloorId, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.TelephonNum, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.TelephonNum, new { htmlAttributes = new { @class = "form-control", @id = "TelNum" } })
@Html.ValidationMessageFor(model => model.TelephonNum, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.RoomsNumber, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.RoomsNumber, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.RoomsNumber, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Interior, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Interior, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Interior, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>

<div class="row">
<div class="col-md-4 col-md-offset-4">

<div class="form-group">
<img src="@Url.Action("GetCaptchaImage","Captcha")" style="width:300px;" />
</div>

<div class="form-group">
@Html.Label("Enter Code", new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBox("CaptchaText", "", new { @class = "form-control" })
</div>
</div>
</div>
</div>

<div class="row">
<div class="form-group">
<div class="col-md-4 col-md-offset-4">
<input type="submit" value="Create" class="btn btn-default" style="width:300px;" />
</div>
</div>
</div>

</div>
}




I use the latest version of Bootstrap. When I run that code, the result is not good. enter image description here
The columns and the row is not centered. The input fields with their labels are block elements and the class name: "text-center" doesn't work; I tried with "block-center" but nothing. I also tried with offsetting. If you have some ideas, will be great.

Answer

The way you are combining certain Bootstrap styles conflict with how the framework is designed to be used. Grid elements should never have design components affixed to them (ie. class="row well" as design elements add additional margin and padding that can disrupt the Grid flow.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
          
          <div class="well text-center">
        <h2>Create</h2>
            <h4>Create Advert</h4>
            </div>
          
        </div>
    </div>
  
  <div class="row">
        <form class="form-horizontal">
      
<div class="col-xs-6">
  <div class="form-group">
    <label for="" class="control-label col-xs-2">Label</label>
    <div class="col-xs-10">
      <input type="text" name="" class="form-control">
    </div>
  </div>
</div>

<div class="col-xs-6">
  <div class="form-group">
    <label for="" class="control-label col-xs-2">Label</label>
    <div class="col-xs-10">
      <input type="text" name="" class="form-control">
    </div>
  </div>
</div>

<div class="col-xs-6">
  <div class="form-group">
    <label for="" class="control-label col-xs-2">Label</label>
    <div class="col-xs-10">
      <select name="" class="form-control"></select>
    </div>
  </div>
</div>

<div class="col-xs-6">
  <div class="form-group">
    <label for="" class="control-label col-xs-2">Label</label>
    <div class="col-xs-10">
      <select name="" class="form-control"></select>
    </div>
  </div>
</div>

<div class="col-xs-6">
  <div class="form-group">
    <label for="" class="control-label col-xs-2">Label</label>
    <div class="col-xs-10">
      <input type="text" name="" class="form-control">
    </div>
  </div>
</div>

<div class="col-xs-6">
  <div class="form-group">
    <label for="" class="control-label col-xs-2">Label</label>
    <div class="col-xs-10">
      <input type="text" name="" class="form-control">
    </div>
  </div>
</div>

<div class="col-xs-6">
  <div class="form-group">
    <label for="" class="control-label col-xs-2">Label</label>
    <div class="col-xs-10">
      <select name="" class="form-control"></select>
    </div>
  </div>
</div>

<div class="col-xs-6">
  <div class="form-group">
    <label for="" class="control-label col-xs-2">Label</label>
    <div class="col-xs-10">
      <select name="" class="form-control"></select>
    </div>
  </div>
</div>

<div class="col-xs-6">
  <div class="form-group">
    <label for="" class="control-label col-xs-2">Label</label>
    <div class="col-xs-10">
      <input type="text" name="" class="form-control">
    </div>
  </div>
</div>

<div class="col-xs-6">
  <div class="form-group">
    <label for="" class="control-label col-xs-2">Label</label>
    <div class="col-xs-10">
      <input type="text" name="" class="form-control">
    </div>
  </div>
</div>

<div class="col-xs-6">
  <div class="form-group">
    <label for="" class="control-label col-xs-2">Label</label>
    <div class="col-xs-10">
      <select name="" class="form-control"></select>
    </div>
  </div>
</div>

<div class="col-xs-6">
  <div class="form-group">
    <label for="" class="control-label col-xs-2">Label</label>
    <div class="col-xs-10">
      <select name="" class="form-control"></select>
    </div>
  </div>
</div>

          
    </form>
    </div>
  
</div>

Correcting those inconsistencies results in your form structure aligning correctly, although it should be noted that Bootstrap's <label> does have issues with longer labels (the label will simply extend down in a rather unappealing manner).

Comments