1
So I have 2 text fields and I have 4 checkbox that work as a switch. I am unable to place the checkbox next to the text fields. My idea is to group the checkbox into 4, next to these text fields.
Follow image to get an idea:
<div class="form-horizontal">
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.Id)
<div class="container">
<div class="card" style="margin:50px 0">
<div class="card-header">Editar Código e sub-códigos</div>
<div class="form-group">
<div class="form-group col-md-6">
@Html.LabelFor(model => model.Codigo, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-6">
@Html.EditorFor(model => model.Codigo, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Codigo, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group col-md-6 ">
@Html.LabelFor(model => model.Descricao, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-6">
@Html.EditorFor(model => model.Descricao, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Descricao, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-row ">
<div class="form-group">
<div class="card align-items-center" style="margin:20px 10px 10px 10px">
<div class="card-header">ExibirInfoPosicionamento</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<label class="switch ">
@Html.CheckBoxFor(model => model.Ativo)
<span class="slider"></span>
</label>
</li>
</ul>
<div class="form-group ">
<div class="card-header">Ativo</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<label class="switch ">
@Html.CheckBoxFor(model => model.Ativo)
<span class="slider"></span>
</label>
</li>
</ul>
</div>
<div class="card-header">Ativo</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<label class="switch ">
@Html.CheckBoxFor(model => model.Ativo)
<span class="slider"></span>
</label>
</li>
</ul>
<div class="card-header">ExibirInfoMeteorologica</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<label class="switch ">
@Html.CheckBoxFor(model => model.Ativo)
<span class="slider"></span>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Friend Bootstrap 3 or 4? How do you want to line up the way you said if one group is 3 btns and the other has only 1? Your code is a little complicated to understand. You could take the HTML that is rendered right on the page, from a CTRL+U there and take the code and put here, I think it looks better for us can simulate your problem
– hugocsl
@hugocsl then, I’ll group the 4 buttons to the right of the Forms, agree it got my confused, I’ll get the pure html
– Jhensen