How to center bootstrap checkbox form

18,888

Solution 1

How about something like this? https://jsfiddle.net/sxh0n7d1/20/

since bootstrap rows are in a 12 column grid, I checkboxes to span 2 columns each, and moved the 4 columns to the right by 4.

<div class="row checkbox-row">
  <div class="col-xs-2 col-xs-offset-4">
    <div class="checkbox-inline">
      <label class="checkbox-inline">
        <input type="checkbox" value="">Adult News</label>
    </div>
  </div>
  <div class="row checkbox-row">
    <div class="col-xs-2">
      <div class="checkbox-inline">
        <label class="checkbox-inline">
          <input type="checkbox" value="">Youth News</label>
      </div>
    </div>
  </div>
</div>

Solution 2

Try this

  <div class="row checkbox-row">
              <div class="col-sm-6">
                <div class="checkbox-inline" style="text-align:center;">
                  <label class="checkbox-inline"><input type="checkbox" value="">Adult News</label>
                </div>
              </div>
              <div class="row checkbox-row">
                <div class="col-sm-6">
                  <div class="checkbox-inline" style="text-align:center;">
                    <label class="checkbox-inline"><input type="checkbox" value="">Youth News</label>
                  </div>
                </div>
              </div>
            </div>
Share:
18,888

Related videos on Youtube

Pablo Vera
Author by

Pablo Vera

Updated on June 04, 2022

Comments

  • Pablo Vera
    Pablo Vera almost 2 years

    I need to center this checkboxes Could anybody help me center this checkboxes? i've try so many things already.

    here's my code:

      <div class="row checkbox-row">
                  <div class="col-sm-6">
                    <div class="checkbox-inline">
                      <label class="checkbox-inline"><input type="checkbox" value="">Adult News</label>
                    </div>
                  </div>
                  <div class="row checkbox-row">
                    <div class="col-sm-6">
                      <div class="checkbox-inline">
                        <label class="checkbox-inline"><input type="checkbox" value="">Youth News</label>
                      </div>
                    </div>
                  </div>
                </div>
    
  • Pablo Vera
    Pablo Vera over 7 years
    Thank you! I used your code, gave the checkboxes some width with css and they got placed where I wanted them!