Which is the correct way to horizontally center this Bootstrap form in MVC?

Question

When I want to center a div inside another div, I usually re-read this post. It usually works. But now it doesn't and I am a million years away to be an expert in CSS.

Here is how my form is constructed:

<h2 class="no-margin-top">Revisiones Administrativas</h2>

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

        <div class="form-horizontal">
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.TipoVisitante, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <select name="TipoVisitante" id="TipoVisitante" class="form-control">
                        @foreach (var item in Model.TiposVisitante)
                        {

                            <option value="@item.Descripcion">
                                @item.Descripcion
                            </option>
                        }
                    </select>
                    @Html.ValidationMessageFor(model => model.TipoVisitante, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.MotivoVisita, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <select name="MotivoVisita" id="MotivoVisita" class="form-control">
                        @foreach (var item in Model.MotivosVisita)
                        {

                            <option value="@item.MotivoVisita">
                                @item.MotivoVisita
                            </option>
                        }
                    </select>
                    @Html.ValidationMessageFor(model => model.TipoVisitante, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Hallazgo, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    <select name="Hallazgo" id="Hallazgo" class="form-control">
                        @foreach (var item in Model.Hallazgos)
                        {

                            <option value="@item.Hallazgo">
                                @item.Hallazgo
                            </option>
                        }
                    </select>
                    @Html.ValidationMessageFor(model => model.TipoVisitante, "", new { @class = "text-danger" })
                </div>
            </div>

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

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

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

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

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

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

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

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

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

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
    }

NOTE: My layout page doesn't have any other divs. I deleted them. This piece of code is rendered alone between the HTML body tags.

Can anyone help?

Edit

As requested by one member, here is a shorter snippet of the rendered HTML

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.index-parent-div{
    position: absolute;
    top: 50%;
    margin-top: -200px; /* half of #content height*/
    left: 0;
    width: 100%;
}

.index-inner-div {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    height: 395px;
}

.width-100{
    width: 100%;
}

.no-margin-top{
    margin-top: 0px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<body>
        <h2 class="no-margin-top">Revisiones Administrativas</h2>

<form action="/" method="post"><input name="__RequestVerificationToken" type="hidden" value="uNfiMxTWxX4Cz4baOODnVnwAJRNdAtr9KxcPyrJgOneJyn-xgfjybke088Ya3r39SMxLnEApagu_BKZv2wbnVc3ifIPrDrTZeGrv_EBojas1" />            <div class="form-horizontal">
                <hr />
                
                <div class="form-group">
                    <label class="control-label col-md-2" for="TipoVisitante">Tipo de Visitante: </label>
                    <div class="col-md-10">
                        <select name="TipoVisitante" id="TipoVisitante" class="form-control">
                                <option value="Descripci&#243;n 1">
                                    Descripci&#243;n 1
                                </option>
                                <option value="Descripci&#243;n 2">
                                    Descripci&#243;n 2
                                </option>
                        </select>
                        <span class="field-validation-valid text-danger" data-valmsg-for="TipoVisitante" data-valmsg-replace="true"></span>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="Create" class="btn btn-default" />
                    </div>
                </div>
            </div>
</form>

    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/respond.js"></script>
    <script src="/Scripts/revision.js"></script>


</body>

I can help with one condition: you show me the result, not the source. Replace your snippet with actual HTML and CSS in a [mcve], so it reproduces the problem, and I'll tell you what's the cause. (Copy/paste the markup from page source. Also add in any CSS resources. Try to add as little code as possible that still reproduces the problem). — tao, Jul 28 '17 at 02:18
Hi Andrei and thank you for your fast answer. I think that you want me to post a snippet of the rendered HTML and the CSS in order for you to see live how it looks. The problem with that is that I can only post the rendered HTML but it wont look here as it looks at my end because I cannot post the bootstrap.css because the 30000 character post limit. It would be ok to post the rendered html without the bootstrap CSS even if the looks doesn't match how it looks at my end?? — SamyCode, Jul 28 '17 at 02:48
You can link any external libraries as resources. Make sure they are in correct order and they are loaded from `cdn`'s (over `https`). Namely you want to google `{name of library} + "cdn"`. In Bootstrap's case, you want to copy/paste [this](http://getbootstrap.com/getting-started/#download-cdn) at the top of your snippet, just after the jQuery ` — tao, Jul 28 '17 at 02:49
Ok I did. Please note that for the external bootstrap.css I only found the minified version. So, how I workaround this to center the form in the page? Thank you!!! — SamyCode, Jul 28 '17 at 02:57

tao · Answer 1 · 2017-07-28T05:21:19.310

Wrap the content you want centered inside a .text-center (you can also apply it to the .container). Additionally, in this case, you need:

.text-center select {
  margin: 0 auto;
}

That's all. Example:

body {
  padding-top: 50px;
  padding-bottom: 20px;
}


/* Set padding to keep content from hitting the edges */

.body-content {
  padding-left: 15px;
  padding-right: 15px;
}


/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/

.dl-horizontal dt {
  white-space: normal;
}


/* Set width on the form input elements since they're 100% wide by default */

input,
select,
textarea {
  max-width: 280px;
}

.index-parent-div {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

.index-inner-div {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
}

.width-100 {
  width: 100%;
}

.no-margin-top {
  margin-top: 0px;
}

.text-center select {
  margin: 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="container text-center">
<h2 class="no-margin-top">Revisiones Administrativas</h2>
<form action="/" method="post"><input name="__RequestVerificationToken" type="hidden" value="uNfiMxTWxX4Cz4baOODnVnwAJRNdAtr9KxcPyrJgOneJyn-xgfjybke088Ya3r39SMxLnEApagu_BKZv2wbnVc3ifIPrDrTZeGrv_EBojas1" />
  <div class="form-horizontal">
    <hr />

    <div class="form-group">
      <label class="control-label col-md-2" for="TipoVisitante">Tipo de Visitante: </label>
      <div class="col-md-10">
        <select name="TipoVisitante" id="TipoVisitante" class="form-control">
        <option value="Descripci&#243;n 1">
                                    Descripci&#243;n 1
                                </option>
                                <option value="Descripci&#243;n 2">
                                    Descripci&#243;n 2
                                </option>
                        </select>
        <span class="field-validation-valid text-danger" data-valmsg-for="TipoVisitante" data-valmsg-replace="true"></span>
      </div>
    </div>

    <div class="form-group">
      <div class="col-md-offset-2 col-md-10">
        <input type="submit" value="Create" class="btn btn-default" />
      </div>
    </div>
  </div>
</form>
</div>

Alternatively, if you only want to center the <form> element, the easiest way to do it in Bootstrap would be to make use of its grid system:

<div class="container">
  <div class="row">
    <div class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 col-offset-xs-0">
       <form>form here...</form>
    </div>
  </div>
</div>

Example:

body {
  padding-top: 50px;
  padding-bottom: 20px;
}

.dl-horizontal dt {
  white-space: normal;
}

input,
select,
textarea {
  max-width: 280px;
}

.width-100 {
  width: 100%;
}

.no-margin-top {
  margin-top: 0px;
}

.text-center select {
  margin: 0 auto;
}
@media (min-width: 768px) {
form .form-horizontal .control-label {
    text-align: center;
    background-color: #f5f5f5;
    line-height: 32px;
    height: 34px;
    padding: 0 15px;
    border-radius: 4px;
    border: 1px solid #eee;
    width: 100%;
  }
}
input[type="submit"] {
  width: 280px;
  max-width: 280px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <div class="row text-center">
    <div class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-offset-1 col-offset-xs-0 col-xs-12 col-sm-10">
      <h2 class="no-margin-top">Revisiones Administrativas</h2>
      <form action="/" method="post"><input name="__RequestVerificationToken" type="hidden" value="uNfiMxTWxX4Cz4baOODnVnwAJRNdAtr9KxcPyrJgOneJyn-xgfjybke088Ya3r39SMxLnEApagu_BKZv2wbnVc3ifIPrDrTZeGrv_EBojas1" />
        <div class="form-horizontal">
          <hr />

          <div class="form-group">
            <div class="col-sm-6 text-center">
              <label class="control-label" for="TipoVisitante">Tipo de Visitante: </label>
            </div>
            <div class="col-sm-6">
              <select name="TipoVisitante" id="TipoVisitante" class="form-control">
        <option value="Descripci&#243;n 1">
                                    Descripci&#243;n 1
                                </option>
                                <option value="Descripci&#243;n 2">
                                    Descripci&#243;n 2
                                </option>
                        </select>
              <span class="field-validation-valid text-danger" data-valmsg-for="TipoVisitante" data-valmsg-replace="true"></span>
            </div>
          </div>

          <div class="form-group ">
            <div class="col-xs-12 text-center">
              <input type="submit" value="Create" class="btn btn-default" />
            </div>

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

Thank you for your fast help Andrei. I tried your solutions. In the first code snippet, if you look the rendered page here in SO, it seems fine, but if you maximize the view, you will see that the only thing aligned is the dropdown. The label stays still at the left of the page. If I add label to your first class selector, it achieves nothing. I tried several workarounds with your code to not avail. The most I could do was to *almost* center the label besides the dropdown in the page. They should be side by side and centered. Not almost. Any thoughts? Thank you! — SamyCode, Jul 28 '17 at 04:25
@SamyCode, you had specific markup that was making your form elements display as columns, using Bootstrap's grid system. I didn't question it, I thought that's what you wanted. Take a look at the second snippet. I made changes to both CSS and markup. In markup I added and removed some specific Bootstrap classes. Hope it helps. — tao, Jul 28 '17 at 05:06

Which is the correct way to horizontally center this Bootstrap form in MVC?

1 Answers1