Centering Bootstrap 3 Form That Has Text Opposite Form


Really don’t know why I am struggling with this!! Must be one of those days!

I am trying to center a form so the left hand and right hand content has the same width.

Please look at the example attached

Here is a link to what I have done so far -

Also attached is a screenshot of the page, as you can see the text ‘Sign up for your 30 Day Free Trial’ has less padding than the form field.

I hope the above makes sense, as to what I am trying to acheive and I am positive the way I am going about this is all wrong!!

Many Thanks

Hey there,

If you’re just wanting to center the text and form on a single line, you shouldn’t use the grid classes which break things up into 12 columns. All you need is inline-blocks with text-align: center on the parent

<div class="text-center">
  <div style="display: inline-block">Sign up for your</div>
  <div style="display: inline-block">30 Day Free Trial</div>
  <form style="display: inline-block"></form>

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