css - Put two checkboxes horizontally, one beside the other, in bootstrap -
i have form code, 2 checkboxes @ end of it. want checkboxex align horizontally 1 beside other:
<div class="form-horizontal"> @html.hiddenfor(x => x.categoriaid) @html.hiddenfor(x => x.nombrecategoria) <hr /> @html.validationsummary(true, "", new { @class = "text-danger" }) <div class="form-group"> @html.labelfor(model => model.nombrecategoria, "tipo de producto", htmlattributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> <label class="form-control-static" style="color:#ff6a00">@model.nombrecategoria</label> </div> </div> <div class="form-group"> @html.labelfor(model => model.titulo, htmlattributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.editorfor(model => model.titulo, new { htmlattributes = new { @class = "form-control" } }) @html.validationmessagefor(model => model.titulo, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @html.labelfor(model => model.descripcion, htmlattributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.textareafor(model => model.descripcion, new { @class = "form-control", @rows = 3 }) @html.validationmessagefor(model => model.descripcion, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @html.labelfor(model => model.precio, htmlattributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.editorfor(model => model.precio, new { htmlattributes = new { @class = "form-control" } }) @html.validationmessagefor(model => model.precio, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> <div class=""> @html.labelfor(model => model.contactotelefono, htmlattributes: new { @class = "control-label col-md-2" }) <div class="col-md-2"> @html.checkboxfor(model => model.contactotelefono, new { htmlattributes = new { @class = "form-control" } }) @html.validationmessagefor(model => model.contactotelefono, "", new { @class = "text-danger" }) </div> @html.labelfor(model => model.contactomail, htmlattributes: new { @class = "control-label col-md-2" }) <div class="col-md-2"> @html.checkboxfor(model => model.contactomail, new { htmlattributes = new { @class = "form-control" } }) @html.validationmessagefor(model => model.contactomail, "", new { @class = "text-danger" }) </div> </div> </div> </div>
now checkboxes displayed huge space between them. want put them more together.
thank in advanced.
like this sample?
html:
<div class="form-group"> <input type="checkbox" class="form-control checkbox-inline" /> <input type="checkbox" class="form-control checkbox-inline" /> </div>
css:
.checkbox-inline { display: inline-block; width: 30px; height: 30px; }
Comments
Post a Comment