css Question posted in
Some basic documentation can be found here.

Css – How to vertically center a Bootstrap form-check div within a column div?

I have a div with the class row and several columns, one of them has a div with the class form-check, containing a label and a checkbox. What I need is to center this checkbox and label in the middle of the div, to align with the input on the side (image 3).

I’ve already tried padding/margin auto, align bottom, align middle, d-flex

enter image description here

enter image description here

.

.

Img 3

enter image description here

Tags:

2

Answers


  1. 0

    you can make the container flex and align center :

    display: flex;
align-items: center;
    Login or Signup to reply.
  2. 0

    You should add mx-auto to the <div class='form-check mb-0'> and add d-flex align-items-center to the <div class='col-12 col-sm-3 col-md-2 mt-3'>

    The final code should be like this:

     <div class='col-12 col-sm-3 col-md-2 mt-3 d-flex align-items-center'>
     <div class='form-check mb-0 mx-auto'>
        <input
          name='test'
          id='test'
          className='form-check-input'
          type='checkbox'
          for='test'
          value='true'
        />
        <label className='form-check-label'>Test</label>
     </div>
 </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search