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?
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.