CODEWITHSUNDEEP
htmltwitter-bootstrap
Nick Kahn
Nick Kahn

Reputation: 20078

Bootstrap formatting inline in one row

Solved: JSfiddle here is what I wanted, sample:

<form class="form-horizontal">
  <div class="form-group">
    <label for="name" class="col-xs-2 control-label">Name</label>
    <div class="col-xs-4">
      <input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
    </div>
  </div>

  <div class="form-group">
    <label for="birthday" class="col-xs-2 control-label">Birthday</label>
    <div class="col-xs-10">
      <div class="form-inline">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="year" />
        </div>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="month" />
        </div>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="day" />
        </div>
        <div class="form-group">
          <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>

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

    <div class="form-group">
    <label for="name" class="col-xs-2 control-label">Name</label>
    <div class="col-xs-4">
      <input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
    </div>
  </div>

</form>

.css:

.form-inline .form-group {
  margin-left: 0;
  margin-right: 0;
}

END

UPDATE:

I see where my problem is but i have form-horizontal that I want and if i change it to form-inline everything else is messed up please have a look at the updated jsfiddle

How do I make it inline in one row without spacing as shown in the screen shot:

<form class="navbar-form form-horizontal" role="search" style="padding:0" _lpchecked="1">
  <div class="form-group col-md-12">
    <label class="col-sm-3 control-label">Location</label>
    <div class="col-md-3">
      <input class="form-control ng-pristine ng-valid" id="src1" placeholder="Search" type="text">
    </div>
    <div class="col-md-3">
      <input class="form-control ng-pristine ng-valid" id="srch2" placeholder="State" type="text">
    </div>
    <div class="col-md-3">
      <input class="form-control ng-pristine ng-valid" id="srch3" placeholder="City" type="text">
    </div>
    <div class="col-md-2">
      <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
    </div>
  </div>
</form>

as you can see spacing between the input: enter image description here

JSFiddle

Upvotes: 0

Views: 78

Answers (2)

nthall
nthall

Reputation: 2915

Use form-inline instead of form-horizontal:

<form class="navbar-form form-inline" role="search" style="padding:0" _lpchecked="1">
  <div class="form-group">
    <label class="control-label">Location</label>
    <input class="form-control ng-pristine ng-valid" id="src1" placeholder="Search" type="text">
  </div>
  <div class="form-group">
    <input class="form-control ng-pristine ng-valid" id="srch2" placeholder="State" type="text">
  </div>
  <div class="form-group">
    <input class="form-control ng-pristine ng-valid" id="srch3" placeholder="City" type="text">
  </div>
  <div class="form-group">
    <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
  </div>
</div>

bootply

Upvotes: 2

Alon Eitan
Alon Eitan

Reputation: 12025

Simple calculation: col-sm-3 * 4 + col-sm-2 == col-sm-14 Which is not good. You should make sure that the total will not exceed 12 cols for each row.

Suggestion - change the first col-sm-3 to col-sm-1

Upvotes: 0

Related Questions