I'm learning html/css, I'm doing a registration form and I'd like to put the eye toggle to show the password inside the password input field, there is a way to do it to keep the scalability in the different resolutions? Searching online I think that I have to put them in a container and then use css but if I try to do it changing the container in css the whole my form breaks...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index Registration</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel= "stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/style.css">
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="main">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 col-9">
<div class="login-wrap py-3 px-4">
<h2 style="color: #FFF; text-align: center;" class="text-uppercase text-center mb-5">Create new Account</h2>
<form class="form-sigin" action="../home/index.php" name="formRegistration" id="formRegistration" method="post">
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="firstNameNewUser" style="margin-left: 0px;">First Name</label>
<input type="text" name ="firstNameNewUser" id="firstNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="lastNameNewUser">Last Name</label>
<input type="text" name ="lastNameNewUser" id="lastNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
</div>
<div class="control mb-4">
<label class="form-label" for="nickNewUser">Your Nickname</label>
<input type="text" name ="nickNewUser" id="nickNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="emailNewUser">Your Email</label>
<input type="email" name ="emailNewUser" id="emailNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="passwordNewUser">Password</label>
<input type="password" name ="passwordNewUser" id="passwordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
<i> <span class="material-icons">visibility</span> </i>
</div>
<div class="control mb-4">
<label class="form-label" for="rPasswordNewUser">Repeat your password</label>
<div class="parent inline-flex-parent">
<div class="child">
<input type="password" name ="rPasswordNewUser" id="rPasswordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="child">
<i> <span class="material-icons">visibility</span> </i>
</div>
</div>
</div>
<div class="form-check" id="form-checkbox">
<input
class="form-check-input me-2"
type="checkbox"
value=""
name="checkboxterms"
id="checkboxterms"
/>
<label class="form-check-label" for="checkboxterms" name="checkboxtermslabel" id="checkboxtermslabel">
I agree all statements in Terms of service
</label>
</div>
<p id="spacing"> </p>
<div class="d-flex justify-content-center">
<div style="clear:both;"></div>
<button type="submit" id = "registerButton" name="registerButton" class="btn btn-primary rounded submit p-2 px-4">Register</button>
</div>
<p class="text-center text-muted mt-5 mb-0">Have already an account?
<u>Login here</u>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
EDIT:
the current password code you see are just some tests that I'm doing, If I don't put the passw input field and the inside a div, then they will be put one over the other, so I created a div to put them side by side... by also like this, if the resolution change then the eye icon will not be in the right place
This is how I implement pw visibility. As far as scalability, if you use Bootstrap's sizing classes it should all scale well. I've had no issues moving this between assorted screen sizes.
Addendum : centering the Eye
I modified the second password field.
To properly vertically center it I had to alter the html. Compare against the first password HTML.
In particular:
wrapped the "eye" containing div and the input in it's own relative div. (position-relative moved from outer div.control
Added Bootstrap class h-100 to the "eye" div
Added bootstrap class align-middle to the "eye" and
Created an actual rule for .pw-toggle that sets height: 1rem; so that align-middle centers correctly.
$(function() {
$("span.pw-toggle, span.pw-toggle2").click(function() {
var $pwField = $($(this).data().target);
var TorP = $pwField.attr('type') == 'password' ? 'text' : 'password';
$(this).text(TorP === "password" ? "visibility" : "visibility_off")
$pwField.attr('type', TorP);
});
});
span[data-target] {
cursor: pointer;
}
.pw-toggle {
height: 1rem;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 col-9">
<div class="login-wrap py-3 px-4">
<h2 style="color: #FFF; text-align: center;" class="text-uppercase text-center mb-5">Create new Account</h2>
<form class="form-sigin" action="../home/index.php" name="formRegistration" id="formRegistration" method="post">
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="firstNameNewUser" style="margin-left: 0px;">First Name</label>
<input type="text" name="firstNameNewUser" id="firstNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="lastNameNewUser">Last Name</label>
<input type="text" name="lastNameNewUser" id="lastNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
</div>
<div class="control mb-4">
<label class="form-label" for="nickNewUser">Your Nickname</label>
<input type="text" name="nickNewUser" id="nickNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="emailNewUser">Your Email</label>
<input type="email" name="emailNewUser" id="emailNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4 position-relative">
<label class="form-label" for="passwordNewUser">Password</label>
<div class="position-absolute end-0 me-1">
<span data-target="#passwordNewUser" class="pw-toggle material-icons pr-1">visibility</span>
</div>
<input type="password" name="passwordNewUser" id="passwordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="rPasswordNewUser">Repeat your password</label>
<div class="position-relative">
<div class="position-absolute end-0 me-1 h-100">
<span data-target="#rPasswordNewUser" class="pw-toggle material-icons pr-1 align-middle">visibility</span>
</div>
<input type="password" name="rPasswordNewUser" id="rPasswordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
<!-- Just for fun, the eye as a Bootstrap input
addon is much cleaner -->
<div clas="control mb-4">
<div class="input-group">
<input type="password" name="r2PasswordNewUser" id="r2PasswordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
<span class="input-group-text">
<span data-target="#r2PasswordNewUser" class="pw-toggle2 material-icons">visibility</span>
</span>
</div>
</div>
<div class="form-check" id="form-checkbox">
<input class="form-check-input me-2" type="checkbox" value="" name="checkboxterms" id="checkboxterms" />
<label class="form-check-label" for="checkboxterms" name="checkboxtermslabel" id="checkboxtermslabel">
I agree all statements in Terms of service
</label>
</div>
<p id="spacing"> </p>
<div class="d-flex justify-content-center">
<div style="clear:both;"></div>
<button type="submit" id="registerButton" name="registerButton" class="btn btn-primary rounded submit p-2 px-4">Register</button>
</div>
<p class="text-center text-muted mt-5 mb-0">Have already an account?
<u>Login here</u>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
This is how you would implement that functionality with JavaScript. We grab the eye ball icon and the two password fields. Then, loop through the eyeBall and add an event listener to it. It checks whether the type attribute is password or text. If it is password, it changes it to text.
let eyeBall = document.getElementsByClassName('viewPass');
let passInput = document.getElementsByClassName('passwordInput');
let passField = document.getElementById('passwordNewUser');
function change_visibility($type) {
for(let field of passInput) {
field.setAttribute('type', $type);
}
}
for(let eye of eyeBall) {
eye.addEventListener('click', function() {
if (passField.getAttribute('type') == 'password') {
change_visibility('text');
} else {
change_visibility('password');
}
});
}
.viewPass {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index Registration</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel= "stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/style.css">
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="main">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 col-9">
<div class="login-wrap py-3 px-4">
<h2 style="color: #FFF; text-align: center;" class="text-uppercase text-center mb-5">Create new Account</h2>
<form class="form-sigin" action="../home/index.php" name="formRegistration" id="formRegistration" method="post">
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="firstNameNewUser" style="margin-left: 0px;">First Name</label>
<input type="text" name ="firstNameNewUser" id="firstNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label class="form-label" for="lastNameNewUser">Last Name</label>
<input type="text" name ="lastNameNewUser" id="lastNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
</div>
</div>
<div class="control mb-4">
<label class="form-label" for="nickNewUser">Your Nickname</label>
<input type="text" name ="nickNewUser" id="nickNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="emailNewUser">Your Email</label>
<input type="email" name ="emailNewUser" id="emailNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="control mb-4">
<label class="form-label" for="passwordNewUser">Password</label>
<input class="passwordInput" type="password" name ="passwordNewUser" id="passwordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
<i class="viewPass"> <span class="material-icons">visibility</span> </i>
</div>
<div class="control mb-4">
<label class="form-label" for="rPasswordNewUser">Repeat your password</label>
<div class="parent inline-flex-parent">
<div class="child">
<input class="passwordInput" type="password" name ="rPasswordNewUser" id="rPasswordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
</div>
<div class="child">
<i class="viewPass"> <span class="material-icons">visibility</span> </i>
</div>
</div>
</div>
<div class="form-check" id="form-checkbox">
<input
class="form-check-input me-2"
type="checkbox"
value=""
name="checkboxterms"
id="checkboxterms"
/>
<label class="form-check-label" for="checkboxterms" name="checkboxtermslabel" id="checkboxtermslabel">
I agree all statements in Terms of service
</label>
</div>
<p id="spacing"> </p>
<div class="d-flex justify-content-center">
<div style="clear:both;"></div>
<button type="submit" id = "registerButton" name="registerButton" class="btn btn-primary rounded submit p-2 px-4">Register</button>
</div>
<p class="text-center text-muted mt-5 mb-0">Have already an account?
<u>Login here</u>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
Please, how can I inline a button and an input field without using <form>? I'm trying this way but it's not working.
.inline-button .inline-input{
vertical-align:middle;
}
<div class="row">
<div class="col-md-2">
<div class="form-group mb-2">
<label for="contractNumID" class="sr-only">Contract Number</label>
<input type="text" readonly id="contractNumID" class="form-control-plaintext" mid="staticContract" value="Contract Number"/>
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="contractNumber" class="sr-only">Contract</label>
<input type="text" class="form-control inline-input" id="contractNumber"/>
</div>
<div class="form-group mx-sm-3 mb-2 inline-button" data-inline="true">
<button type="" class="btn btn-primary mb-2">
Populate
</button>
</div>
</div>
</div>
I changed the form to a div and removed the additional CSS. I've also included the Bootstrap library because it appears that's what you're using.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-inline">
<div class="form-group mb-2">
<label for="contractNumID" class="sr-only">Contract Number</label>
<input type="text" readonly id="contractNumID" class="form-control-plaintext" mid="staticContract" value="Contract Number" />
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="contractNumber" class="sr-only">Contract</label>
<input type="text" class="form-control inline-input" id="contractNumber" />
</div>
<button type="" class="btn btn-primary mb-2">Populate</button>
</div>
you can use
.col-md-2 > div {
display: inline;
}
<div class="row">
<div class="col-md-2">
<div class="form-group mb-2">
<label for="contractNumID" class="sr-only">Contract Number</label>
<input type="text" readonly id="contractNumID" class="form-control-plaintext" mid="staticContract" value="Contract Number"/>
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="contractNumber" class="sr-only">Contract</label>
<input type="text" class="form-control inline-input" id="contractNumber"/>
</div>
<div class="form-group mx-sm-3 mb-2 inline-button" data-inline="true">
<button type="" class="btn btn-primary mb-2">
Populate
</button>
</div>
</div>
</div>
I am facing a style problem.
So this is my code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<form>
<div class="input-group mb-3">
<span class="input-group-addon">Site Name</span>
<input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
</div>
<br>
<div class="input-group mb-3">
<span class="input-group-addon">URl</span>
<input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
</div>
<br>
<div class="input-group mb-3">
<span class="input-group-addon">Number</span>
<input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
</div>
<br>
<div class="input-group mb-3">
<span class="input-group-addon">Desc. or Comment</span>
<input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
</div>
<br>
</form>
I have different long names in my span tag. The problem is that my input fields are not in a column. I want them to be among themselves. Can u tell me what how to get the style i want.
You need to separate everything per Bootstrap styles. You don't have your items layed out in rows/columns. The following example would be with Bootstrap 4.
Use the Full Page option when viewing the snippet.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form>
<div class="row">
<span class="input-group-addon col-sm-12 col-md-3">Site Name</span>
<input type="text" id="msg" class="form-control col-sm-12 col-md-9" name="msg" placeholder="Additional Info">
</div>
<div class="row mt-5">
<span class="input-group-addon col-sm-12 col-md-3">URL</span>
<input type="text" id="msg" class="form-control col-sm-12 col-md-9" name="msg" placeholder="Additional Info">
</div>
<div class="row mt-5">
<span class="input-group-addon col-sm-12 col-md-3">Number</span>
<input type="text" id="msg" class="form-control col-sm-12 col-md-9" name="msg" placeholder="Additional Info">
</div>
<div class="row mt-5">
<span class="input-group-addon col-sm-12 col-md-3">Desc. or Comment</span>
<input type="text" id="msg" class="form-control col-sm-12 col-md-9" name="msg" placeholder="Additional Info">
</div>
</form>
</div>
I admit I am guessing a bit as to your intent here that you mean to make the input group start labels have a similar width so that is what I attempt here.
Your input group prefix text is already left so we can simply leverage the Bootstrap grid column classes for this. Here I used col-3 to force a 3/12 of a width for the input-group-text using in Bootstrap 5. You can try other values such as col-2 or col-4 etc.
Things I did:
Used Bootstrap 5
Changed your ID attributes to be unique so that the HTML is valid
Changed your name attributes to match the id I had changed it to
Removed the <br> markup as it seemed to not be needed - if you need more space you can increase mb-3 to mb-5 or give the next item mt-3 or some such.
Changed the placeholder attribute text to better illustrate which field we were using
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<form>
<div class="input-group mb-3">
<span class="input-group-text col-3">Site Name</span>
<input id="site-name" type="text" class="form-control" name="site-name" placeholder="Name here">
</div>
<div class="input-group mb-3">
<label class="input-group-text col-3">URI</label>
<input id="url" type="text" class="form-control" name="url" placeholder="URL here">
</div>
<div class="input-group mb-3">
<span class="input-group-text col-3">Number</span>
<input id="site-number" type="text" class="form-control" name="site-number" placeholder="Number Info">
</div>
<div class="input-group mb-3">
<span class="input-group-text col-3">Desc. or Comment</span>
<input id="site-desc" type="text" class="form-control" name="site-desc" placeholder="Comment Info">
</div>
</form>
So i solved my problem with some custom css.
Create style.css and dont forget to link it in your html code!
that css worked for me:
.input-group-addon {
min-width:80px;
text-align:left !important;
}
The section cannot align properly in the center and neither does the div have a container class. If there is any bootstrap class for alignment or do I have to create CSS code for aligning the items in the div tag.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<section class="bg-secondary bg-gradient p-5 text-white">
<div class="container">
<div class="row">
<h1 class="text-center">Contact Us</h1>
<br>
<div class="col-md-12 text-light">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label class="form-label" for="name">Name</label>
<input class="form-control" id="name" type="text" placeholder="Name" />
</div>
<div class="form-group col-md-6">
<label class="form-label" for="place">Place</label>
<input class="form-control" id="place" type="text" placeholder="Place" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="form-label" for="emailAddress">Email Address</label>
<input class="form-control" id="emailAddress" type="email" placeholder="Email Address" />
</div>
<div class="form-group col-md-6">
<label class="form-label" for="mobNumber">Mobile Number</label>
<input class="form-control" id="mobNumber" type="tel" placeholder="Mobile Number" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="form-label" for="message">Message</label>
<textarea class="form-control" id="message" type="text" placeholder="Type your Message here..." style="height: 10rem;"></textarea>
</div>
</div>
<br>
<button class="btn btn-primary btn-lg" type="submit">Submit</button>
</form>
</div>
</div>
</div>
</section>
Can you try this ?
I have assigned a col-md-6 to cover all the elements under the row and I converted col-md-6 in the form-group classes to col-12.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<section class="bg-secondary bg-gradient p-5 text-white">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<h1 class="text-center">Contact Us</h1>
<br>
<div class="col-md-12 text-light">
<form>
<div class="form-row">
<div class="form-group col-12">
<label class="form-label" for="name">Name</label>
<input class="form-control" id="name" type="text" placeholder="Name" />
</div>
<div class="form-group col-12">
<label class="form-label" for="place">Place</label>
<input class="form-control" id="place" type="text" placeholder="Place" />
</div>
</div>
<div class="form-row">
<div class="form-group col-12">
<label class="form-label" for="emailAddress">Email Address</label>
<input class="form-control" id="emailAddress" type="email" placeholder="Email Address" />
</div>
<div class="form-group col-12">
<label class="form-label" for="mobNumber">Mobile Number</label>
<input class="form-control" id="mobNumber" type="tel" placeholder="Mobile Number" />
</div>
</div>
<div class="form-row">
<div class="form-group col-12">
<label class="form-label" for="message">Message</label>
<textarea class="form-control" id="message" type="text" placeholder="Type your Message here..." style="height: 10rem;"></textarea>
</div>
</div>
<br>
<button class="btn btn-primary btn-lg" type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
</section>
I tried coding this but i dont get the expected output, i also tried to use inline but it doesnt work too.
maybe someone can help me show the expected output. thank you
<form action="" method="POST">
<!-- Row -->
<div class="row gx-4 mb-1">
<!-- -->
<div class="col-md-6">
<label class="small mb-1" for="">Student name</label>
<input class="form-control form-control-sm" name="" id="" type="text" value=""/>
</div>
<!-- -->
<div class="col-md-6">
<label class="small mb-1" for="">Address</label>
<input class="form-control form-control-sm" name="" id="" type="text" value=""/>
</div>
</div>
<!-- Row -->
<div class="row gx-4 mb-1">
<!-- -->
<div class="col-md-6">
<label class="small mb-1" for="">ID Number</label>
<input class="form-control form-control-sm" name="" id="" type="text" value=""/>
</div>
<!-- -->
<div class="col-md-6">
<label class="small mb-1" for="">Email</label>
<input class="form-control form-control-sm" name="" id="" type="text" value=""/>
</div>
</div>
</form>
here is the sample result
Wrapping the label and input in a row with 2-10 columns should do it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="row px-4 mt-4">
<div class="col-md-6 row mb-3">
<div class="col-2 col-form-label">
Label
</div>
<div class="col-10">
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6 row mb-3">
<div class="col-2 col-form-label">
Label
</div>
<div class="col-10">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row px-4 mt-4">
<div class="col-md-6 row mb-3">
<div class="col-2 col-form-label">
Label
</div>
<div class="col-10">
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6 row mb-3">
<div class="col-2 col-form-label">
Label
</div>
<div class="col-10">
<input type="text" class="form-control">
</div>
</div>
</div>
</body>
</html>
You can adjust the padding/margin according to your needs.
I'm trying to make the last row look exactly like the others, but with the icon appended to the text box. I can't seem to get the width right!
(I apologize... I don't know how to make the code snippet render properly in this page. You have to view full screen.)
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-md-center">
<div class="col-sm-3">
<div class="form-group row">
<label>Name:</label>
<input type="text" class="form-control" />
</div>
<div class="form-group row">
<label>Date From:</label>
<input type="text" class="form-control" />
</div>
<div class="input-group row">
<label>Date To:</label>
<input type="text" class="form-control" />
<div class="input-group-append">
<div class="input-group-text" id="btnGroupAddon2">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
Retain the form group of the div above "Date to:" label, then you can insert a div wrapping the input and image div's and add the input-group class which will produce the required result, please check my below example!
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-md-center">
<div class="col-sm-3">
<div class="form-group row">
<label>Name:</label>
<input type="text" class="form-control" />
</div>
<div class="form-group row">
<label>Date From:</label>
<input type="text" class="form-control" />
</div>
<div class="form-group row">
<label>Date To:</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-append">
<div class="input-group-text" id="btnGroupAddon2">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If you want to keep it to the left, it takes a bit of out of class work like so:
<link href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-md-center">
<div class="col-sm-3">
<div class="form-group row">
<label>Name:</label>
<input type="text" class="form-control" />
</div>
<div class="form-group row">
<label>Date From:</label>
<input type="text" class="form-control" />
</div>
<div class="input-group row">
<label class="pt-2">Date To:</label>
<input type="text" class="form-control ml-2"
style="border-top-left-radius: .25rem;border-bottom-left-radius: .25rem;"/>
<div class="input-group-append">
<div class="input-group-text" id="btnGroupAddon2">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>