how to align two input class on the same line?

user_14780142 0
Viewed 237

I want to align two input classes next to each other with some space in between them like the following image. enter image description here

However, my current output is like this: enter image description here

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>
html php
3 Answers

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>

user_96944270

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>

user_36392350 

<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

user_152118390
Related