Twitter Bootstrap Question posted in

Twitter bootstrap – bootstrap centering group input search field

Here is my code using latest bootstrap v3

/*here is the specialjum class in css*/

.specialjum {
  background: #1F72B8;
  background-size: cover;
  min-height: 600px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="jumbotron specialjum">
  <div class="row">
    <h6 class="text-center" style="position: relative; left: -200px;"><img src="~/Images/logo.png" /></h6>
  </div>
  <div class="col-lg-6 col-lg-offset-4">
    <div class="input-group">
      <span class="input-group-btn">
                <button class="btn btn-secondary" type="button">Go!</button>
            </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div>
  </div>
</div>

No other bootstrap has been modified.
Now when I use the code above, the button gets pinned to the input field as expected and the input-group gets centered in the jumbotron div tag
however if I replace the span button after the input text
the button is way off to the right.

here is the following code for tat

.specialjum {
  background: #1F72B8;
  background-size: cover;
  min-height: 600px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="jumbotron specialjum">
  <div class="row">
    <h6 class="text-center" style="position: relative; left: -200px;"><img src="~/Images/logo.png" /></h6>
  </div>
  <div class="col-lg-6 col-lg-offset-4">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
                <button class="btn btn-secondary" type="button">Go!</button>
            </span>
    </div>
  </div>
</div>

Notice the only difference is where the button is located before or after the input tag.

NOTE: Bootstrap V3 – with no modifications

Please help and thank you =)

Tags:

2

Answers


  1. 0

    What is the exact version of Bootstrap that you use? Sorry, I wanted to ask this as a comment but I couldn’t post one due to low rep.

    For Bootstrap 3.3.6

    Just give the .input-group specific width and margin: 0 auto; and you are good to go, e.g.

    .input-group {
  width: 20%;
  /* Works for px values too */
  margin: 0 auto;
}
.specialjum {
  background: #1F72B8;
  background-size: cover;
  min-height: 600px;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="jumbotron specialjum">
  <div class="row">
    <h6 class="text-center" style="position: relative; left: -200px;"><img src="~/Images/logo.png" /></h6>
  </div>
  <div class="col-lg-6 col-lg-offset-4">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
                <button class="btn btn-secondary" type="button">Go!</button>
            </span>
    </div>
  </div>
</div>

    The above works for both occasions of html markup you provided.

    See working fiddle ( All occasions included in fiddle: both html markups with px and % values for width of .input-group )

    Login or Signup to reply.
  2. 0

    Bootstrap 3 is a mobile-first framework, I bring this up because I noticed you used the col-lg-* class with its offset variant. The col-lg-* classes were specifically made for very large displays. One that will not be often used by your users. If you were using Bootstrap as a boilerplate without any interest on responsiveness, then the col-md-* classes are the ones that will help you most. But if you were coding for responsiveness, you should always start by declaring the mobile sizes first and work your way up. The way Bootstrap 3 was intelligently designed, unless the layout changes, you don’t need to declare the larger devices because it will take your smaller devices declarations as a rule.

    For instance,

    • If you coded something col-xs-12, it will be 12 columns span all the way to desktop.
    • If you coded something col-xs-6, it will be 6 columns span all the way to desktop
    • If you coded something col-md-6, you will get that at desktop, but most likely your tablets will be 12 column span, and your mobile devices will be most definitely 12 column span. It will always default to 12 columns on mobile unless directed otherwise.

    With Bootstrap 3, we’ve rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they’re baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files. – Bootstrap docs

    So with that in mind, try to start with the col-xs-* first.

    Ok, now, to your centering problem and (not assuming you are coding for responsiveness, but for desktop only) All you need to do is adjust your classes like this:

    Instead of this 

    <div class="col-lg-6 col-lg-offset-4">

    Use this 

    <div class="col-md-6 col-md-push-3">

    If you want to make full use of responsiveness, do the following:

    <div class="col-xs-12 col-sm-6 col-sm-push-3 col-md-6 col-md-push-3">

    See my DEMO

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search