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

Question

I’m a beginner in HTML/CSS/Bootstrap and I have a question about how to put two checkbox components in some type of container with a title. Am I doing it the right way or is there a better way to do it? My components are like this:

But I’d like them to stay that way:

<div class="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 don’t know how to do it in the best way possible. Someone would know how to help me fix?

A hug to all!

Answer 1

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

The trick here is to separate the chackbox and the label of him in a div, and in the last column where it will not have the "title" on the input you let the label without content like a   and resolves. I don’t really like this kind of solution, but as it is a framework sometimes this type of solution solves without major problems.

Look how it turned out. Display in "Whole Page" tb to see a better result.

  <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>