CODEWITHSUNDEEP
csstwitter-bootstrap
user1592380
user1592380

Reputation: 36367

How to widen bootstrap 3 input box

enter image description here

I'm working with bootstrap 3 and trying to piece together a base layout for a flask app. so far I have:

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="content">
        <div class="pull-middle">
          <h1 class="page-header">Create an awesome App template with Bootstrap.</h1>
          <div class="container">
            {% block content %}
            {% endblock %}
          </div>
          <div class="row">
            <div class="col-xs-12 col-md-8 col-md-offset-2 col-lg-4 col-lg-offset-4">
              <div class="panel panel-default ">
                <div class="panel-body ">
                  <form action="#" role="form">
                    <div class="input-group ">
                      <input type="email" class="form-control" placeholder="Email Address" required>
                      <span class="input-group-btn">
                        <button class="btn btn-success btn-circle" type="submit">Sign up for free</button>
                      </span>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <footer class="footer text-center">
        <div class="container">
          <small>© Copyright 2015. </small>
        </div>
      </footer>

I want to widen the email address form, leaving the green button as is. How can I do this?

Upvotes: 0

Views: 83

Answers (1)

Faisal Ashfaq
Faisal Ashfaq

Reputation: 2678

You are using the Bootstrap Grid classes wrong. The input fielding is getting space what it has been given by parent div using the grid class col-lg-4 making it col-lg-6 would give more space to it's child divs.

So using these classes would help textfield to take more space.

col-xs-12 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3

Upvotes: 1

Related Questions