CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
bayman
bayman

Reputation: 1719

Bootstrap: How to stack two columns on top of two other columns on small screens?

I have a form layout with 4 columns that stacks on small or xs screens with 100% width.

Is there a way to only stack 2 columns on top of the other two on small or xs?

Ideally, I'd like to show Column 1 and Column 2 in a row and Column 3 and Column 4 on the row below it on xs/small but all in the same row on medium/large.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form role="search" method="GET" action="/search/">
  <div class="form-group form-group-sm col-xs-6 col-sm-3">
    <label for="first-name">Column 1:</label>
    <input type="text" class="form-control" placeholder="Column 1" name="fist_name" id="first_name" value="">
  </div>
  <div class="form-group form-group-sm col-xs-6 col-sm-3">
    <label for="last-name">Column 2:</label>
    <input type="text" class="form-control" placeholder="Column 2" name="last_name" id="title-search" value="">
  </div>
  <div class="form-group form-group-sm col-xs-6 col-sm-3">
    <label for="city-search">Column 3:</label>
    <input type="text" class="form-control" placeholder="Column 3" name="city" id="city-search" value="">
  </div>
  <div class="form-group form-group-sm  col-xs-6 col-sm-3">
    <label for="city-search">Column 4:</label>
    <input type="text" class="form-control" placeholder="Column 4" name="state" id="state-search" value="">
  </div>
  <div class="input-group-btn">
    <button class="btn btn-default btn-sm" type="submit"><i class="glyphicon glyphicon-search"></i>
    </button>
  </div>
</form>

jsfiddle

Ideal layout on small screen:

crop photo

Upvotes: 0

Views: 953

Answers (2)

player87
player87

Reputation: 1791

Use these classes for the four <div>: form-group form-group-sm col-sm-6 col-xs-6 col-md-3.

Upvotes: 0

dippas
dippas

Reputation: 60543

You need to add class for extra small devices XS in this case col-xs-6

Take a look at Boostrap Docs to know which class to use in each breakpoint

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form role="search" method="GET" action="/search/">
  <div class="form-group form-group-sm col-xs-6 col-sm-3">
    <label for="first-name">Column 1:</label>
    <input type="text" class="form-control" placeholder="Column 1" name="fist_name" id="first_name" value="">
  </div>
  <div class="form-group form-group-sm col-xs-6 col-sm-3">
    <label for="last-name">Column 2:</label>
    <input type="text" class="form-control" placeholder="Column 2" name="last_name" id="title-search" value="">
  </div>
  <div class="form-group form-group-sm col-xs-6 col-sm-3">
    <label for="city-search">Column 3:</label>
    <input type="text" class="form-control" placeholder="Column 3" name="city" id="city-search" value="">
  </div>
  <div class="form-group form-group-sm  col-xs-6 col-sm-3">
    <label for="city-search">Column 4:</label>
    <input type="text" class="form-control" placeholder="Column 4" name="state" id="state-search" value="">
  </div>
  <div class="input-group-btn">
    <button class="btn btn-default btn-sm" type="submit"><i class="glyphicon glyphicon-search"></i></button>
  </div>
</form>

Upvotes: 1

Related Questions