html - Which is the correct way to horizontally center this Bootstrap form in MVC? -
when want center div inside div, re-read this post. works. doesn't , million years away expert in css.
here how form 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: layout page doesn't have other divs. deleted them. piece of code rendered alone between html body tags.
can help??
thank you!!
edit
as requested 1 member, here shorter snippet of rendered html
body { padding-top: 50px; padding-bottom: 20px; } /* set padding keep content hitting edges */ .body-content { padding-left: 15px; padding-right: 15px; } /* override default bootstrap behavior horizontal description lists truncate terms long fit in left column */ .dl-horizontal dt { white-space: normal; } /* set width on form input elements since they're 100% wide 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ón 1"> descripción 1 </option> <option value="descripción 2"> descripció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>
wrap content want centered inside .text-center (you can apply .container). additionally, in case, need:
.text-center select { margin: 0 auto; } that's all. example:
body { padding-top: 50px; padding-bottom: 20px; } /* set padding keep content hitting edges */ .body-content { padding-left: 15px; padding-right: 15px; } /* override default bootstrap behavior horizontal description lists truncate terms long fit in left column */ .dl-horizontal dt { white-space: normal; } /* set width on form input elements since they're 100% wide 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ón 1"> descripción 1 </option> <option value="descripción 2"> descripció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 want center <form> element, easiest way in bootstrap make use of 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ón 1"> descripción 1 </option> <option value="descripción 2"> descripció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>
Comments
Post a Comment