I’ve been working on the login box toward the bottom of the page and am having an issue getting it to do what I’d like.
I’d like the username/password group, checkbox group and then the button group to sit side by side unless the viewport doesn’t allow it, at which time they should start dropping under the previous group. As you can see in the link, I’m not doing well.
Here’s what I’m aiming for(poorly done GIMP inbound):
I’m not a Bootstrapper, but I’ll throw this idea in, based on my limited BS knowledge/interest.
Should the col be direct descendants on the row?
Maybe the row should be in the form, not the other way around.
You don’t have the class col-md-4 on the third column that holds the login register buttons.
To have username and password vertical then remove the form-inline rule from the form.
The columns will then go into one column at smaller screens.
As Sam said you should really make sure the structure is correct and only columns should be direct children of rows and that includes form tags so you probably want the opening and closing form tags outside the whole row or make the form element .row instead of the div.row.
As always refer to the documentation for clear instructions as the rules for the grid are clearly defined.
I’ve done more googling and have fixed what was suggested in this thread and I’m pretty close, I think but I’m having a problem with the vertical alignment and horizontal alignment of the center div:
I have tried applying some style instructions inline to get what I want but I’m wondering if simply not using what’s available is causing the issue again, allowing me to be able to bring this inline without additional style instructions?
Is it again something already defined that’s causing my issue or something I’m missing still?
thanks very much for that. I removed the checkbox classed div completely and added an inline style instruction which seems to have put them exactly where they need to be. Removing the div didn’t seem to negatively impact the form at all and it still works great in regards to responsiveness, so I’m calling it a success.
