How to get input fields seperated with space? - html

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"/>

Answer 2

You can add before the button to add a space. Is that what you are attempting to do?
EDIT: I don't know what you btn btn-g or btn-round css classes are but if you add a margin value inline(as in in the buttons style tag) it will overwrite whatever is in your css classed and give you the space
.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
}
<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-lg hidden-md hidden-print hidden-sm hii" style="padding-top:10px">-->
<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" style="margin-left:10px">Login</button></span>
</div>
</form>
</div>
</div>