Bootstrap

I am just learning Bootstrap.

Please look at http://rkassoc.org/Lakos_config/index.htm

At wide screen widths, this is perfect. However, as I narrow the width, there are 3 issues:

(1) The "xs" classes kick in at much greater than 768.

(2) The menu items (top right), scrunch up to & overlay the logo image; I would rather they slip underneath the logo. I had that working once, but I lost it.

(3) As the window becomes narrower, the item "register" starts to disappear.

Source attached.

How can I fix these things? Is there a way to use a smaller version of the logo if the width is less than xxx?

Thanks
index.htm
Richard KortsBusiness Owner / Chief DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
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>
RobOwner (Aidellio)Commented:
(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
RobOwner (Aidellio)Commented:
(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
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
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.
RobOwner (Aidellio)Commented:
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>

Open in new window

RobOwner (Aidellio)Commented:
Sorry, expand that out to the whole form:

<div class="row">
<div class="col-sm-4 col-xs-3 text-right" style="padding-top:40px; font-size:20px"><p>Email:</p></div>
<div class="col-sm-4 col-xs-6" style="padding-top:40px;"><input type="text" size="40" name="email" class="form-control"></div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-3 text-right" style="font-size:20px"><p>Password:</p></div>
<div class="col-sm-4 col-xs-6"><input type="password" size="40" name="pwd" class="form-control"></div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-3" style="font-size:20px">&nbsp;</div>
<div class="col-sm-4 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>

Open in new window


And so on.  Note how I've added the "form-control" class to your input elements.  I've also changed it so that the input elements and the "forgot password" links etc all use the same width at mobile widths, i.e. col-xs-6

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
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
RobOwner (Aidellio)Commented:
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?
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
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
RobOwner (Aidellio)Commented:
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.
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
OK, checked those. All OK.

Still blank line.

rkassoc.org/Lakos_config

Thanks
RobOwner (Aidellio)Commented:
yep.  change your col-xs-6 classes (two input elements and remember me/register) to col-xs-9
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
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
RobOwner (Aidellio)Commented:
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 :)

Clipboard01.jpg
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Mine are both col-xs-9.

Are you using FireFox? I haven't looked in Chrome, etc.
RobOwner (Aidellio)Commented:
white-space: nowrap;  that's your issue.  Remove that :)
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
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.
RobOwner (Aidellio)Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.