CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Justin
Justin

Reputation: 49

Bootstrap / CSS Input Form not centring

The Bootstrap input form isn't centring even though I have it setup to be. Here's what it looks like:

Form Not Centering:

enter image description here

Proper Form

enter image description here

The red is the problem and the green is what I want. Here is the code.

CSS:

.form-control {
  height: 50px;
  width: 330px;
  padding-left: 5px;
  font-size: 20px;
  font-family: 'Lato', sans-serif;
}

HTML:

           <form class="form-inline" role="form">
               <div class="form-group">
                  <label class="sr-only" for="exampleInputEmail2">Enter email address</label>
                  <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email address">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn">Early Access</button>
                </div>
           </form>

All help would be amazing, thank you.

Upvotes: 0

Views: 97

Answers (2)

bryce
bryce

Reputation: 3051

Does this fix your problem?

Just added a wrapper around it:

#wrapper {
  text-align:center;
}

.form-control {
  margin: 0 auto;
}

Upvotes: 1

Antoine Cloutier
Antoine Cloutier

Reputation: 1330

How about something along those lines:

  • Wrap your stuff with a <div class="container">, centering everything.
  • Add an id to that same div and set the width to whatever you want.
  • Set the width of your button to 100%.

html:

<div class="container" id="myContainer">
    <form class="form-inline" role="form">
        <div class="form-group">
            <label class="sr-only" for="exampleInputEmail2">Enter email address</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email address" />
        </div>
        <br>
        <div class="form-group">
            <button id="earlyAccessBtn" type="submit" class="btn">Early Access</button>
        </div>
    </form>
</div>

css:

#myContainer {
    width: 350px;
}

#earlyAccessBtn {
    width: 100%;
}

DEMO

Upvotes: 0

Related Questions