Bootstrap: trying to make 3 divs side by side on desktop view

Hi there everyone!

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):

That’s more vertical spacing than I’d like, but it represents the three separate groups that I’m aiming for.

Any help on achieving this would be greatly appreciated.

Thanks for your time!

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.:slight_smile:


Hi there and thanks very much for your help!

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?

Your .checkbox class has a margin-top of 10px. This is pushing it down so change to 0

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.

Thanks very much for everyone’s help!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.