HTML elements are overlapping

[talabala]

I’m trying to create a Login page. The problem is when i try to minimize the page the save copy check box and the send button are overlapped.

Here is my code :

https://jsfiddle.net/talamusiclover/ctqgkxcw/?utm_source=website&utm_medium=embed&utm_campaign=ctqgkxcw

[dylan]

I’m not very familiar with bootstrap but it looks like the class for your check box container (.col-sm-offset-8) has some responsive styles set on it. But the button has specific position properties (position, top, bottom) that mean it’s not moving.

Sometimes adding a background colour to certain elements will help you reason about what’s going on in your css. if you add some colours to your .button, .col-sm-offset-8, and .checkbox it becomes clear what is happening.

[a2000anthony]

Remove:
position:relative;
right: 10px;
bottom: 30px;
from the .button css. This will place the button below the “save a copy”.

[a2000anthony]

If you want the button on the right side, try using two cols (i’ve included the padding in the inline styling).

<div class="form-group blueBox" style="margin-top: 10px; padding: 10px;">
        <div class="row">
            <div class="col-xs-6">
                <label class="checkboxLable" style="margin-top: 7px;"><input type="checkbox"> Save a copy</label>
            </div>   
            <div class="col-xs-6">
                <button type="button" class="btn btn-primary pull-right">Send</button>
            </div>
        </div>
    </div>

[talabala]

Thanks a lot Anthony