0
209
Viewshow to align two input class on the same line?
I want to align two input classes next to each other with some space in between them like the following image.
However, my current output is like this:
The html code is
<div class="form-group">
<div class="row">
<label for="form-workphoneNumber" class="col-sm-4 col-xs-4 control-label">input</label>
<div id="box" class="col-sm-8 col-xs-8">
<input type="text" class="form-control" name="workphoneNumber" placeholder="enter">
<input type="button" class="btn btn-success" value="add" onclick="add_textbox()">
</div>
</div>
</div>
·
Santiago Trujillo
3 answers
Answer question0
Just add width and margin
style="margin-right:5px;width:80%;float:left"
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<div class="form-group">
<div class="row">
<label for="form-workphoneNumber" class="col-sm-4 col-xs-4 control-label">input</label>
<div id="box" class="col-sm-8 col-xs-8">
<input style="margin-right:5px;width:80%;float:left" type="text" class="form-control" name="workphoneNumber" placeholder="enter">
<input style="width:15%;float:left" type="button" class="btn btn-success" value="add" onclick="add_textbox()">
</div>
</div>
</div>
·
Santiago Trujillo
Report
0
You can also use display: inline-block instead of float.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<div class="form-group">
<div class="row">
<label for="form-workphoneNumber" class="col-sm-4 col-xs-4 control-label">input</label>
<div id="box" class="col-sm-8 col-xs-8">
<input style="margin-right:5px;width:80%;display:inline-block;vertical-align:top" type="text" class="form-control" name="workphoneNumber" placeholder="enter">
<input style="width:15%;display:inline-block" type="button" class="btn btn-success" value="add" onclick="add_textbox()">
</div>
</div>
</div>
·
Santiago Trujillo
Report
0
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<div class="form-group">
<div class="row">
<label for="form-workphoneNumber" class="col-sm-4 col-xs-4 control-label">input</label>
<div id="box" class="col-sm-8 col-xs-8 d-flex">
<input type="text" class="form-control m-2" name="workphoneNumber" placeholder="enter">
<input type="button" class="btn btn-success m-2" value="add" onclick="add_textbox()">
</div>
</div>
</div>I suggest you to avloid inline styling and use bootstrap classes for good practices
·
Santiago Trujillo
Report
Answer question