Nick Kahn
Nick Kahn

Reputation: 20078

Bootstrap align horizontal

How can I have all align horizontal the below code renders as shown in the screen 1 and but I'm trying to have as shown in screen 2

 <div class="row">
      <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-3">
                              <label for="inputEmail3" class="col-sm-4 control-label">Number</label> 
                </div>
                <div class="col-xs-3">
                            <input type="text" id="number"></input>
                </div>
                <div class="col-xs-3">

                </div>

          </div>
    </div> 
    <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-3">
                              <label for="inputEmail3" class="col-sm-4 control-label">Tag</label> 
                </div>
                <div class="col-xs-3">
                            <input type="text" id="Name"></input>
                </div>
                <div class="col-xs-3">
                            <button class="btn btn-default" type="button">Go!</button>
                </div>

          </div>
    </div>

Screen shot 1: enter image description here

Screen shot 2: enter image description here

Upvotes: 0

Views: 96

Answers (1)

vanburen
vanburen

Reputation: 21663

Your HTML structure is incorrect; you're nesting columns and rows and then columns inside columns for no reason. Docs

See example.

(*The columns are XS as in your example which in this case will not render very well from a mobile screen, consider using SM)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <form class="myForm">
      <div class="form-group">
        <label for="Number" class="col-xs-2 control-label">Number</label>
        <div class="col-xs-4">
          <input type="text" class="form-control" id="Number" />
        </div>
      </div>
      <div class="form-group">
        <label for="tag" class="col-xs-2 control-label">Tag</label>
        <div class="col-xs-4">
          <div class="input-group">
            <input type="email" class="form-control" id="tag" /> <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>

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

Upvotes: 2

Related Questions