Creating Inline Form, Bootstrap

Question

I'm working in bootstrap and looking to create a form that has 2 rows and a submit button. The first row should have 1 number field, where row 2 should have 3 number fields directly underneath the first row. Do I use the column and row class like below?

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

<form role="form">
  <div class="row">
    <input type="number" class="col-xs-12">
  </div>
  <div class="row">
    <input type="number" class="col-xs-3">
    <input type="number" class="col-xs-3">
    <input type="number" class="col-xs-3">
  </div>
</form>

Any help is appreciated!

I tested, it's OK. What is your problem?

hungndv
– hungndv

2015-07-05 03:36:06 +00:00
Commented Jul 5, 2015 at 3:36 — hungndv
– hungndv, Commented Jul 5, 2015 at 3:36

aleksandar · Accepted Answer · 2015-07-05 03:41:58Z

You are missing some important parts.

The column classes should be added to div not input.
Also the columns should be wrapped in a row div.
Bootstrap has 12 column grid, so the sum of your columns should be 12.
That's why i changed col-xs-3 to col-xs-4 (3 columns of size 4).
Also you should add the class form-control to the inputs in order to give them the proper styling.

Take a look at this code:

.my-margin {
    margin-bottom: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form role="form">
    <div class="container">
        <div class="row my-margin">
            <div class="col-xs-12">
                <input type="number" class="form-control">
            </div>
        </div>
        <div class="row">
            <div class="col-xs-4">
                <input type="number" class="form-control">
            </div>
            <div class="col-xs-4">
                <input type="number" class="form-control">
            </div>
            <div class="col-xs-4">
                <input type="number" class="form-control">
            </div>
        </div>
    </div>
</form>

Also i suggest you read this tutorial on the grid system in bootstrap.

user2719890 · Accepted Answer · 2015-07-05 05:09:32Z

The inline form can be done with form-inline

Inline form

Add .form-inline to your form (which doesn't have to be a ) for left-aligned and inline-block controls.

The solution by wazaap is also good.

Bootstrap form-inline reference

.input-num {
    margin-bottom: 10px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
<form role="form">
 <div class="row col-xs-12 input-num">
     <input type="number" class="col-xs-12" placeholder="Enter a number"/>
 </div>
  <div class="container">
    <div class="row form-inline grp-num">
        <input type="number" placeholder="Enter a number"/>
        <input type="number" placeholder="Enter a number"/>
        <input type="number" placeholder="Enter a number"/>
    </div>
 </div>
</form>
</div>

Collectives™ on Stack Overflow

Creating Inline Form, Bootstrap

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related