Resize Input Bootstrap in Inline Form

Question

I have the following inline form, and would like to resize the input according to the design:

Follows code:

<div class="row">
<div class="col-lg-12">
  <div class="panel panel-default">
    <div class="panel-heading">Pesquisar</div>
    <div class="panel-body">

      <form class="form-inline ">
        <div class="form-group">
          <div class="form-group">
            <label for="sel1">Select list:</label>
            <select class="form-control" id="sel1">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
            </select>
          </div>
        </div>
        <input type="text" class="form-control" id="campoPesquisa">
        <button type="submit" class="btn btn-default">Pesquisar</button>
      </form>

    </div>
  </div>
</div>

I have tried to put inside a Row, outside the Row. Beginner doubt.

Answer 1

Opa Brother, quiet ?

Well it has numerous forms, I’ll show you one that I use, that only you will use a Bootstrap class!

That would be Offsetting Columns!

It is important that you remember the concept of grid that is used in bootstrap, Bele ?

Your code would look like this:

<div class="row">
<div class="col-lg-12">
  <div class="panel panel-default">
    <div class="panel-heading">Pesquisar</div>
    <div class="panel-body">

      <form class="form-inline col-lg-offset-7">
        <div class="form-group">
          <div class="form-group">
            <label for="sel1">Select list:</label>
            <select class="form-control" id="sel1">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
            </select>
          </div>
        </div>
        <input type="text" class="form-control" id="campoPesquisa">
        <button type="submit" class="btn btn-default">Pesquisar</button>
      </form>

    </div>
  </div>
</div> 

Note that within the form class, I placed the col-lg-offset-7, which would be basically a left margin through the grid, that is, this column jumps 7 blocks to the right side!

And the cool thing is that it keeps the project responsive!

As I said, there are numerous ways to do this, this is the one I like to use!

Edit: In case of resizing the input is also simple: Just add a class in the input and tinker with the width:

<input type="text" class="form-control input-custom"id="campoPesquisa">

and in css put something like this:

.input-custom {width:75%;}

And adjust the percentage according to your need

Answer 2

Old I managed to solve by dividing the width of each inline element and applying inline-block for the same. Remembering that, never let arrive at 100% otherwise it will automatically break line. !important is necessary because it superimposes the style of Bootstrap.

Remembering that the button is responsive IE, it gets big as you decrease or increase the screen.

.form-group label{
  width:15% !important;
  display:inline-block;
}

.form-group select{
  width:25% !important;
  display:inline-block;
}

.form-group input[type="text"]{
  width:35% !important;
  display:inline-block;
}

.form-group button[type="submit"]{
  width:20% !important;
  display:inline-block;
}

.form-group{

width:100%;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="row">
<div class="col-lg-12">
  <div class="panel panel-default">
    <div class="panel-heading">Pesquisar</div>
    <div class="panel-body">
      <form class="form-inline ">
        <div class="form-group">
            <label for="sel1">Select list:</label>
            <select class="form-control" id="sel1">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
            </select>
            <input type="text" class="form-control" id="campoPesquisa">
            <button type="submit" class="btn btn-default" >Pesquisar</button>
          </div>
      </form>

    </div>
  </div>
</div>