Button placement in bootstrap

I have a website based on a template bootstrap, in one of the pages I added a button and no matter how much I give the command to be aligned to the right, it is always left and misaligned with respect to the form.

My Code :

<div class="row">
          <div class="col-lg-4">
            <fieldset class="form-group">
              <label>Produto:</label>
                                      <select class="form-control form-control-line">
                            <option>-- Selecione --</option>
                            <option>Nome do Produto A</option>
                            <option>Nome do Produto B</option>

                          </select>
          </fieldset></div>
          <div class="col-lg-4">
            <fieldset class="form-group">
              <label>Ocultar afiliados sem vendas</label>
                                      <select class="form-control form-control-line">
                            <option>-- Selecione --</option>
                            <option>Sim</option>
                            <option>Não</option>

                          </select>
          </fieldset></div>
          <div class="col-lg-4">
           <label>Classificar por::</label>
                                      <select class="form-control form-control-line">
                            <option>-- Selecione --</option>
                            <option>TOP Afiliados</option>
                            <option>Afiliados mais antigos</option>Novos Afiliadoss
                              <option>Afiliados com mais tráfego</option>


                          </select>
          </div>
    <button type="button" class="btn">Filtrar</button>

        </div>
Author: LipESprY, 2019-03-02

1 answers

despite the poor quality of your question, I think I can assume it is related to the "filter"button. It is important that you add such information to your question, such as bringing the part of the code into the question.


You inserted the button directly into the row of the grid of the Bootstrap (.row). The correct is to add a column (.col) as container from your button. There you can style this column by positioning the content where want.

<div class="col-lg-12" style="text-align: right;">
    <button type="button" class="btn">Filtrar</button>
</div>

Notice that I added the Class .col-lg-12 that ends up occupying the 12 columns of the grid. For more details, see the Bootstrap documentation (link at the end of the answer). I also added the style text-align: right in order to position its button on the right side. I added straight into the element (hard-coded), but the best thing is to do this straight into your site's style file (.css).

See the result:

Print

Recommended Reading: Bootstrap-Grid System

 2
Author: LipESprY, 2019-03-02 03:17:08