Sign up ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

SEE the link:

I have a site based on Twitter Bootstrap. I have two main elements on the page, the bottom one is a horizontal form. I would like the bottom div to be horizontally centered, matching the div above. Here is a screenshot:

enter image description here

I want the form to be center and in horizontal form. Could you help me?

share|improve this question

closed as off-topic by Zach Saucier, SOIA, Johannes, go-junta, Vincent Sep 15 at 10:16

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "If you're asking for help with implementation, please include what you've tried and why it didn't work with screenshots. Please edit your post with what your desired results are, what resources you referenced and why those didn't work. See this meta post for discussion and see this post on how to ask a good question." – Zach Saucier, SOIA, Johannes, go-junta, Vincent
If this question can be reworded to fit the rules in the help center, please edit the question.

you have hard-coded some stuff. Bad idea. – Benteh Dec 25 '13 at 21:00
@boblet re-opened! – Yisela Dec 27 '13 at 2:37
cheers. Probably not a question that is very useful for others, so I hope the asker appreciates it. – Benteh Dec 27 '13 at 8:39

1 Answer 1

You are using bootstrap, and there would be more elegant ways of solving it, but here is one little hack.

You have some styles hard-coded into the html, and I would strongly suggest you remove those and put them into your css. Further; I would recommend that you create your own stylesheet, and use that for overrides from the Bootstrap stylesheet.

Anyway, here goes my little hack. As I said, it is not very elegant, but it is simple:

This is what you have; this is the structures of your divs:

enter image description here

Here is what you have to do: in html, change

<form class="form-inline" role="form">


<form class="form-inline container" role="form">


<div class="col-xs-7">


<div class="col-xs-9">

Here is the result:

enter image description here

And then removing the guiding frames:

enter image description here

share|improve this answer
Samuel: it would be good if you accept and upvote this answer, should it have solved your problem. It is good for you, me and the entire community. – Benteh Dec 29 '13 at 0:34

Not the answer you're looking for? Browse other questions tagged or ask your own question.