1

I want everything to be in the center of the page, it also needs to be responsive.

this is my code with PHP, because I'm using a loop to show all the checkboxes.

<div class="container-fluid">
    <!-- START FORM -->
    <form method="post" class="form-horizontal"> 
        <!-- ROW 1 CHECKBOXES -->
<?php
    for ($i=0; $i < 8; $i++) { 
        echo "<div class='row'>
            <div class='col-md-4'>
                <div class='col-md-2'><input type='checkbox' class='form-
control chk_boxes2' name='check_list[]'></div>
                <label class='col-md-2'>Medewerker</label>        
            </div>
            <div class='col-md-4'> 
                <div class='col-md-2'><input type='checkbox' class='form-
control chk_boxes2' name='check_list[]'></div> 
                <label class='col-md-2'>Medewerker</label>
            </div>
            <div class='col-md-4'>
                <div class='col-md-2'><input type='checkbox' class='form-
control chk_boxes2' name='check_list[]'></div>
                <label class='col-md-2'>Medewerker</label>
            </div>
            </div>";
    }
?>         
        <!-- ROW SUBMIT -->
        <div class="row down right">
            <div class="col-md-6">
                <label class="col-md-3">Check all</label>
                <div class="col-md-3"><input type='checkbox' 
class="chk_boxes form-control">
            </div>
            <div class="col-md-6">
                <input type="submit" name="Verder" value="Verder" 
class="form-control btn-primary">
            </div>
        </div>  
    </form>
    <!-- END FORM -->
</div>

This is the jQuery I use right now, I know it's nothing solid:

$('.down').css('margin-top', function () {
    return ($(window).height() - $(this).height()) / 2.8
});

$('.right').css('margin-left', function () {
    return ($(window).height() - $(this).height()) / 2
});

This is a link to JSFiddle, you do need to expand it because big screens is the main problem here.

https://jsfiddle.net/wq0r0se4/

Thanks in advanced.

Scorpion Code
  • 99
  • 12
  • Try using text-center class in the parent container of the elements you want centered. – jmag May 18 '17 at 12:21
  • Do you want to center the content only horizontally? If so, you could just add 'text-center' after your 'form-horizontal' class. – Rubenxfd May 18 '17 at 12:33
  • 1
    You have your columns set to medium size screen to be divided as col-md-4, but they will do default behavior in screens large, small and extra small. You need to tell them col-lg-4 col-md-4 will take up 1/3 of the screen in large and medium size screen and col-sm-12 col-xs-12 to take full screen in small and extrasmall screens. That is how it becomes responsive. – jmag May 18 '17 at 12:36
  • @Rubenxfd both horizontal and vertical. when I add 'text-center' to the form it doesn't do anything except that it moves 'check all' a bit to the right. – Scorpion Code May 18 '17 at 12:36
  • @Rubenxfd what I did was change the grid layout, I made another div at the beginning and I added 'col-md-1' (or 2 depends on how much content) also with lg and sm – Scorpion Code May 18 '17 at 12:56
  • If you want to have the whole form centered on smaller screens, you should try @jmag his solution by adding col-sm-4. Also, I don't know why you chose to give a bootstrap class to the input types as they are already in a div with col-md-4. Perhaps this fiddle is what you meant? https://jsfiddle.net/wq0r0se4/4/ – Rubenxfd May 18 '17 at 13:47

1 Answers1

0

apply text-align: center to your .form-horizontal

and remove margin left js

Update your fiddle https://jsfiddle.net/wq0r0se4/1/

Rahul
  • 4,294
  • 1
  • 10
  • 12