Bootstrap

I'll go right to (2) as that is the easiest to address.

If you want the menu to wrap to another line, remove the xs spec from the class:

<div class="col-md-6"><img src="images/logo.jpg" class="img-responsive"></div>

(1) the xs class kicks in by default.  "mobile first" means that xs will show if nothing else is specified.  It kicks in, in your case, because you've only specified "md", which kicks in at 992px.  Anything less than that will be treated as "xs".  Change "md" to "sm" and that will solve your issue

(3) Remove the padding-left.  It is pushing it outside the scope of the box.

<span style="padding-left:120px;"><a href="register.php">Register</a></span>

To get it laid out the way you want, use the "row" and "col-" classes and div tags

Rob,

(1) & (2) fixed; perfect.

I cannot get (3) to work correctly. I am trying to get the word "register" to right align (just like "Forgot your password" does beneath it) with the right end of the input box for password.  When I used the left padding, it worked fine until it got too narrow.

I can't see how to make it work. I though text-right would do it but I'm thinking the size of the input boxes is messing it up. Can I make the input boxes auto fill the column without adding space between the captions? The size 40 is arbitrary.

ok for (3):

change that row to this:

<div class="row">
<div class="col-xs-3" style="font-size:20px">&nbsp;</div>
<div class="col-xs-6" style="white-space:nowrap; overflow:hidden;"><input type="checkbox" name="rembme">&nbsp;Remember Me<span class="pull-right"><a href="register.php">Register</a></span></div>
</div>

Select allOpen in new window

Rob:

It sort of works (I didn't change Forget Your Password yet), but register is on the line BELOW "Remember me".
rkassoc.org/Lakos_config

I decided to move the "Remember Me" to a prior column (because nothing else was working), I got this, rkassoc.org/Lakos_config/index1.htm which looks good but I'd prefer it to aligned like the customer wanted.

Thanks

It sort of works (I didn't change Forget Your Password yet), but register is on the line BELOW "Remember me".
rkassoc.org/Lakos_config

Looks fine to me (and on the same line).  what browser and what screen width are you viewing it at?

Rob,

First, thanks so much for all your effort on this. It's close (probably OK as is).

The only issue I see now is the fact that it creates a new line (like it's a new row) for the register link. I guess it has to do with the Remember Me because it doesn't do that with the "Forgot Password" row.

See attached, one at a "wide" screen rendition  & one at a "narrow" one.

Any thoughts?
logon_narrower.jpg
logon_wider.jpg

Check the padding and margin on the "remember me". They should be zero. Same goes for the "register" link.

Add the class "pull-right" to the register span element.

OK, checked those. All OK.

Still blank line.

rkassoc.org/Lakos_config

Thanks

yep.  change your col-xs-6 classes (two input elements and remember me/register) to col-xs-9

I did that, it's still the same.

Let's just accept it, if the client has issues, I will revisit with another question.

Thanks

It still looks like you've got it at col-xs-6?  When I change it to col-xs-9 it looks good! :)

Thanks for the points too :)

Mine are both col-xs-9.

Are you using FireFox? I haven't looked in Chrome, etc.

white-space: nowrap;  that's your issue.  Remove that :)

Rob,

Yes, removing white-space: nowrap; does it

FYI, it's all somewhat confusing because of the nomenclature.

My gut feel is that white-space: nowrap; implies NOT line wrapping, looks like just the opposite.

I knew Bootstrap was NOT going to be easy to learn, but I admit, it's VERY powerfull, with all the classes.

Bootstrap is great until you start adding your own css.  It's designed for you to just use its classes, especially for layout.  

Remember that bootstrap is for mobile first so that means that firstly, every column (<div>) in a row will automatically be col-xs-12 without you having to add the class.  In your case you wanted a label and then an input box on the same row.  So you specify col-xs-3 and col-xs-9.  This is automatically applies that width to col-sm, col-md, col-lg etc without you having to specify.  If you find that at a larger resolution you do not need that larger width, then you change it, e.g. col-md-5