How to get input fields seperated with space?

Question

I couldn't get the text box and button separated by space but in one line, can someone explain to me what span actually does?

<div class="container">
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#custom-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="index.html">GLOW</a>

        <div class="col-sm-5 pull-right hidden-md hidden-print hidden-sm hii" style="padding-top:10px">
            <form action="login.asp" method="post" name="Form1">
                <div class="input-group">
                    <input class="form-control" type="text" id="txtLogin" name="txtLogin" placeholder="Login" data-validation-required-message="Please enter your login ID." required="required"/><span class="input-group-btn">
                    <input class="form-control" type="password" id="txtPass" name="txtPass" placeholder="Password" data-validation-required-message="Please enter your email address." required="required"/>
                    <button class="btn btn-g btn-round" id="btnlogin" type="submit">Login</button></span>
                </div>
            </form>
        </div>
    </div>
</div>

If I put   between the two text fields I end up like this:

Added my CSS code

.container { width:1170px }

.container-fluid > .navbar-collapse,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container > .navbar-header { 
    margin-right:0;
    margin-left:0
}

.col-sm-5 { width:41.66666667% }

.input-group {
    position:relative;
    display:table;
    border-collapse:separate
}

.form-control {
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    height: 33px;
    border: 1px solid #EAEAEA;
    border-radius: 2px;
    transition: all 0.4s ease-in-out 0s;
}

.input-group-btn{
    position:relative;
    font-size:0;
    white-space:nowrap
}

Answer 1

You need to change your markup in order to solve this with Bootstrap. Namely:

• Remove the <span> after the login field (ant the closing </span> after the button), as it is not in the right place, and also the .input-group-btn class is not the one you want to use here.
• Wrap just the button into <div class="input-group-append">.
• Remove the custom styles from .input-group and .input-group-btn, and height: 33px; from .form-control. Generally it is not a good idea to overwrite the default classes.
• Finally, you can add the space needed between the two inputs by applying margin-right on #txtLogin. You can do this with custom css styles, or by using one of the .mr-{} Spacing utility classes, e.g. .mr-2.

You will find the documentation of the features used here under the Multiple inputs and the Button addons sections of the Bootstrap 4 documentation.

.container { width:1170px }

.container-fluid>.navbar-collapse,.container-fluid>
.navbar-header,.container>
.navbar-collapse,.container>.navbar-header { 
    margin-right:0;
    margin-left:0
}

.col-sm-5 { width:41.66666667% }

/*.input-group {
    position:relative;
    display:table;
    border-collapse:separate
}*/

.form-control {
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    /*height: 33px;*/
    border: 1px solid #EAEAEA;
    /*border-radius: 2px;*/
    transition: all 0.4s ease-in-out 0s;
}

/*.input-group-btn{
    position:relative;
    font-size:0;
    white-space:nowrap
}*/

<form action="login.asp" method="post" name="Form1">
    <div class="input-group">
        <input class="form-control mr-2" type="text" id="txtLogin" name="txtLogin" placeholder="Login" data-validation-required-message="Please enter your login ID." required="required"/>
        <input class="form-control" type="password" id="txtPass" name="txtPass" placeholder="Password" data-validation-required-message="Please enter your email address." required="required"/>
        <div class="input-group-append">
            <button class="btn btn-g btn-round" id="btnlogin" type="submit">Login</button>
        </div>
    </div>
</form>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>