Bootstrap

Hi, my website is running on the bootstrap framework.

I have my logo and sign in button split left and right on my website:

logo = 8 grid (aligned left)
sign in = 4 grid (aligned right)

When i view it on mobile, the logo a sign in button are on two different lines (which is great) but the are not centred on their own lines.

I have put a quick diagram together to show what i mean. Thanks in advance for your help.

dm.png
oo7mlAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

Julian HansenCommented:
It all depends on the markup inside the col's - can you post your code for the above.
oo7mlAuthor Commented:
Thanks

<div class="row">
						<div class="col-sm-8">
							logo text
						</div>

						<div class="col-sm-4 alignright mt10">
							<a href="/signin">Sign In</a>
						</div>

</div>

Open in new window

Julian HansenCommented:
This seems to be a clue
<div class="col-sm-4 alignright mt10">

Open in new window

The alignright class - I suspect is what is doing the damage.

I suspect you are going to want to but a media query in there that says something like
@media(max-width:500px) {
   .alignright {
       text-align: center;
   }
}

Open in new window

Doesn't really make sense to call it alignright but that is the basic idea. If that does not give the results we will need to see more code and css - preferably a link.

Note Bootstrap has classes for aligning items in elements
text-left
text-center
text-right

Open in new window

oo7mlAuthor Commented:
Thanks, i've i removed the .alignright and user .text-right, do i still need the media query?
Julian HansenCommented:
The media query is only necessary if you want different behaviour at different screen resolutions.

For instance - sign in button to be alligned right for Desktops but centered for small devices - then you would need a media query.

As it stands I cannot say because you have not given us much code to look at.

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