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>

CodePudding user response：

Just add width and margin

style="margin-right:5px;width:80%;float:left"

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can also use display: inline-block instead of float.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I suggest you to avloid inline styling and use bootstrap classes for good practices