Bootstrap input-group width setting

Question

I am getting started with the voodoo of CSS, JS, and HTML.

For now I have a construct like this:

....
<div class="signup row_centered sr_simple" data-spy="affix" data-offset-top="300">
    <form class="form-inline" role="form" id="signup">
        <div class="form-group">
            <div class="input-group" id="signup_inputs">
                <input type="email" class="form-control input-lg" name="EMAIL" id="signup_email" placeholder="Enter email address...">
                <span class="input-group-btn">
                    <button class="btn btn-default fade_signup input-lg btn-warning" type="submit" id="signup_button">Get Early Access!</button>
                </span>
            </div>
        </div>
    </form>
</div>
...

And I want the inline form group to be centered, but with a specific width. Setting col-xx-yy does not have any effect. So the only way to specify the width of the whole form is this (I guess) hack:

@media (min-width : 768px) {
 #signup_email {
   width : 450px;
 }
}

@media (max-width : 767px) {
  #signup_inputs {
    width        : auto;
    margin-left  : 5%;
    margin-right : 5%;
  }
}

How should I set the width of the input form properly for different widths? Or is my approach correct?

Answer 1

There doesn't appear to be any reason to need form-inline (you only have one input with no label). Remove this and use the rules you all ready have along with a simple margin: auto and you should be good.

Note: For a different size input within a input-group, use the Input-Group-Sizing

Working example Snippet.

 @media (min-width: 768px) { .signup { width: 450px; margin: auto; } } @media (max-width: 767px) { .signup { width: auto; margin-left: 5%; margin-right: 5%; } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="signup"> <form role="form"> <div class="form-group"> <div class="input-group input-group-lg"> <input type="email" class="form-control" name="email" placeholder="Enter email address..."> <span class="input-group-btn"> <button class="btn btn-warning" type="submit">Get Early Access!</button> </span> </div> </div> </form> </div>