How to have two checkbox components inside a row with a title

Navigation
2

I am new to HTML / CSS / Bootstrap and am having a question about how to put two checkbox components inside some kind of container with a title. Am I doing it the right way or is there another better way to do it? My components look like this:

ButIwouldlikeittolooklikethis:

<divclass="panel">
    <div class="panel-body container-fluid pt-10 pl-15 pr-15">
        <div class="form-horizontal">
            <vc:summary />
            <div class="form-horizontal">
                <div class="col-md-12">
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label asp-for="Descricao" class="control-label">Descrição</label>
                            <input asp-for="Descricao" class="form-control text-uppercase" />
                            <span asp-validation-for="Descricao" class="text-danger"></span>
                        </div>
                        <label class="control-label">Aplicar a:</label>
                        <div class="col-md-3">
                            <div class="float-left mr-20">
                                <input type="checkbox" class="mycheckbox" data-plugin="switchery"
                                       checked />
                            </div>
                            <label class="pt-3" for="inputBasicOn">Pessoa Física</label>
                        </div>
                        <div class="col-md-3">
                            <div class="float-left mr-20">
                                <input type="checkbox" class="mycheckbox" data-plugin="switchery"
                                       checked />
                            </div>
                            <label class="pt-3" for="inputBasicOn">Pessoa Jurídica</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I know it must be a very simple procedure, but I do not know how to do it in the best way possible. Would anyone know how to help me fix it?

A hug to everyone!

    
asked by anonymous 16.11.2018 / 23:54

1 answer

1

Your image template looks like it has more CSS styles than the normal Bootstrap pattern, but I've made this template anyway that can help.

The worm here separates the chackbox and the label from it into a div , and in the last column where it will not have the "title" on input you leave label no content type a &nbsp; and resolves. I do not really like this kind of solution, but as it is a framework this solution often resolves without major problems.

See how it went. 

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

    <div class="panel">
        <div class="panel-body container-fluid pt-10 pl-15 pr-15">
            <div class="form-horizontal">
               
                <div class="form-horizontal">
                    <div class="col-md-12">
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label asp-for="Descricao" class="control-label">Descrição</label>
                                <input asp-for="Descricao" class="form-control text-uppercase" />
                                <span asp-validation-for="Descricao" class="text-danger"></span>
                            </div>
                            <div class="col-md-3">
                              <label class="control-label">Aplicar a:</label>
                                  <div>
                                  
                                    <input type="checkbox" class="mycheckbox" data-plugin="switchery"
                                    checked />
                                    <label class="pt-3" for="inputBasicOn">Pessoa Física</label>
                                  </div>
                              </div>
                              <div class="col-md-3">
                                <label class="control-label" style="color: transparent">&nbsp;</label>
                                <div>
                                  <input type="checkbox" class="mycheckbox" data-plugin="switchery" checked />
                                  <label class="pt-3" for="inputBasicOn">Pessoa Jurídica</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
17.11.2018 / 13:36
How to send JSON as a post response Problem with post / get method to update table