Two input fields in one row - Twitter bootstrap

vaguemind
August 4, 2016
120 views
3 votes
3 Answers

I am trying to display two registration fields onto the same row using Twitter Bootstrap.

<div class="form-group required">
    <label class="col-sm-2 control-label" for="input-firstname"><?php echo $entry_firstname; ?></label>
    <div class="col-sm-10">
        <input type="text" name="firstname" value="<?php echo $firstname; ?>" placeholder="<?php echo $entry_firstname; ?>" id="input-firstname" class="form-control" />
        <?php if ($error_firstname) { ?>
            <div class="text-danger"><?php echo $error_firstname; ?></div>
        <?php } ?>
    </div>
</div>
<div class="form-group required">
    <label class="col-sm-2 control-label" for="input-lastname"><?php echo $entry_lastname; ?></label>
    <div class="col-sm-10">
        <input type="text" name="lastname" value="<?php echo $lastname; ?>" placeholder="<?php echo $entry_lastname; ?>" id="input-lastname" class="form-control" />
        <?php if ($error_lastname) { ?>
            <div class="text-danger"><?php echo $error_lastname; ?></div>
        <?php } ?>
    </div>
</div>

How can I do this?

Answers

In bootstrap you’re allowed to nest columns and rows alternating, this should do:

<div class="row">
    <div class="col-xs-12 col-sm-6">
        <div class="form-group required">
            <label class="col-xs-12 col-sm-2 control-label" for="input-firstname"><?php echo $entry_firstname; ?></label>
            <div class="col-xs-12 col-sm-10">
                <input type="text" name="firstname" value="<?php echo $firstname; ?>" placeholder="<?php echo $entry_firstname; ?>" id="input-firstname" class="form-control" />
                <?php if ($error_firstname) { ?>
                    <div class="text-danger"><?php echo $error_firstname; ?></div>
                <?php } ?>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6">
        <div class="form-group required">
            <label class="col-xs-12 col-sm-2 control-label" for="input-lastname"><?php echo $entry_lastname; ?></label>
            <div class="col-xs-12 col-sm-10">
                <input type="text" name="lastname" value="<?php echo $lastname; ?>" placeholder="<?php echo $entry_lastname; ?>" id="input-lastname" class="form-control" />
                <?php if ($error_lastname) { ?>
                    <div class="text-danger"><?php echo $error_lastname; ?></div>
                <?php } ?>
            </div>
        </div>
    </div>
</div>

Just change your bootstrap class containing your input elements:

<div class="form-group required">
        <label class="col-sm-2 control-label" for="input-firstname"><?php echo $entry_firstname; ?></label>
        <div class="col-sm-2">
          <input type="text" name="firstname" value="<?php echo $firstname; ?>" placeholder="<?php echo $entry_firstname; ?>" id="input-firstname" class="form-control" />
          <?php if ($error_firstname) { ?>
          <div class="text-danger"><?php echo $error_firstname; ?></div>
          <?php } ?>
        </div>
      </div>
      <div class="form-group required">
        <label class="col-sm-2 control-label" for="input-lastname"><?php echo $entry_lastname; ?></label>
        <div class="col-sm-2">
          <input type="text" name="lastname" value="<?php echo $lastname; ?>" placeholder="<?php echo $entry_lastname; ?>" id="input-lastname" class="form-control" />
          <?php if ($error_lastname) { ?>
          <div class="text-danger"><?php echo $error_lastname; ?></div>
          <?php } ?>
        </div>
      </div>

Here is jsfiddle:
https://jsfiddle.net/DTcHh/23304/

There can be on more solution to have 2 input fields in row, they can be inside one row. you can use display flex on parent div.

HTML

        <div class="contianer">
          <div class="row">
            <input type="text" placeholder="field 1" class="">
          </div>
          <div class="row">
            <input type="text" placeholder="field 2" class="">
          </div>
        </div>

        <br><br><br><br>

        <div class="container">
          <div class="row">
            <div class="col-xs-12 col-sm-6">
                <div class="form-group required">
                    <label class="col-xs-12 col-sm-2 control-label" for="input-firstname"><?php echo $entry_firstname; ?></label>
                    <div class="col-xs-12 col-sm-10">
                        <input type="text" name="firstname" value="<?php echo $firstname; ?>" placeholder="<?php echo $entry_firstname; ?>" id="input-firstname" class="form-control" />
                        <?php if ($error_firstname) { ?>
                            <div class="text-danger"><?php echo $error_firstname; ?></div>
                        <?php } ?>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6">
                <div class="form-group required">
                    <label class="col-xs-12 col-sm-2 control-label" for="input-lastname"><?php echo $entry_lastname; ?></label>
                    <div class="col-xs-12 col-sm-10">
                        <input type="text" name="lastname" value="<?php echo $lastname; ?>" placeholder="<?php echo $entry_lastname; ?>" id="input-lastname" class="form-control" />
                        <?php if ($error_lastname) { ?>
                            <div class="text-danger"><?php echo $error_lastname; ?></div>
                        <?php } ?>
                    </div>
                </div>
            </div>
        </div>
        </div>

CSS

        .contianer {
          display: flex;
          flex-direction: row;
          margin-left: 30px;
          margin-top: 50px;
        }

        .row {
          flex: 1 1 auto;
          margin-left: 5px;
        }

Please signup or login to give your own answer.

Click here to cancel reply.

Two input fields in one row – Twitter bootstrap

Answers