CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Alex
Alex

Reputation: 6047

inline form in bootstrap3

I'm trying to have 2 input fields next to each other in a (bootstrap-css) col-md, but can't seem to get it right.

Here is what I have so far https://jsfiddle.net/9hrx59bd/

It also doesn't help when I put both input fields in the same input group, by removing this:

    ...
    </div>
    <div class="input-group ">

How can I get them next to each other, and use the full width?

Upvotes: 0

Views: 138

Answers (4)

Carol Skelly
Carol Skelly

Reputation: 362780

I think you just want a form-control and an input-group.

<div class="row">
        <div class="col-md-6">
            <form class="form-inline" id="searchform" action="" accept-charset="utf-8" method="post">
                <input class="form-control" placeholder="city" id="location" type="text" name="location">
                <div class="input-group">
                    <input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
                    <span class="input-group-btn">
                    <button class="btn btn-danger" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                </span>
                </div>
            </form>
        </div>
    </div>

Demo

EDIT: Another option is to use the grid columns, but remove the padding:

.pr-0{
    padding-right:0;
}
.pl-0{
    padding-left:0;
}

<form class="row" id="searchform" action="" accept-charset="utf-8" method="post">
        <div class="col-xs-6 col-sm-3 pr-0">
            <input class="form-control" placeholder="city" id="location" type="text" name="location">
        </div>
        <div class="col-xs-6 col-sm-3 pl-0">
            <div class="input-group">
                <input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
                <span class="input-group-btn">
                    <button class="btn btn-danger" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                </span>
            </div>
        </div>
</form>

See the 2nd item in the demo

Upvotes: 1

Momin
Momin

Reputation: 3320

Bootstrap Inline Form

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">




    <form id="searchform" action="" accept-charset="utf-8" method="post">
      <div class="col-md-6">
        <div class=" form-group">
          <input class="form-control" placeholder="city" id="location" type="text" name="location">
        </div>
      </div>

      <div class="col-md-6">
        <div class="form-group input-group">
          <input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw" type="text" name="job">
          <span class="input-group-btn">
                    <button class="btn btn-danger" type="submit">
                        <span class=" glyphicon glyphicon-search" ></span>
          </button>
          </span>
        </div>
      </div>


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

Upvotes: 2

Arjan Knol
Arjan Knol

Reputation: 940

You need to make both input-groups a col-md-6, here is the result: link

<div class="row">
    <form class="form-inline" id="searchform" action=""  accept-charset="utf-8" method="post">
        <div class="input-group  col-md-6 col-sm-6 col-xs-6">
            <input class=" form-control " placeholder="city" id="location"  type="text" name="location">
        </div>
        <div class="input-group  col-md-6 col-sm-6 col-xs-6">
            <input class="search-query form-control newtab-search-text" placeholder="keywords or company name" id="kw"  type="text" name="job">
            <span class="input-group-btn">
                <button class="btn btn-danger" type="submit">
                    <span class=" glyphicon glyphicon-search" ></span>
                </button>
            </span>
        </div>
    </form>
</div>

Edit I made it work on smaller screens by adding col-sm-6 and col-xs-6 aswell

Upvotes: 2

nashcheez
nashcheez

Reputation: 5183

Assuming you want the input next to each other, refer code:

Please view the results in full page view.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<form action="" class="form-inline">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Username">
  </div>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Password">
  </div>
</form>

Upvotes: 0

Related Questions