I am trying to align multiple form components in a row, however I got some wired behaviors. Here is what I am trying to achieve:
As you could see, I would like to have the set mark up checkbox, label, amount markup input (number) and markup type (select) in the same line, and here is what I have tried:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<div id="price_selection_page" class="border">
<form class="mt-3 p-2 d-flex">
<div class="input-group d-flex w-25">
<input class="form-check-input me-3" type="checkbox" value="" id="set-mark-up-check">
<label class="form-check-label" for="set-mark-up-check">Set Markup</label>
</div>
<div class="input-group d-flex">
<div class="input-group-prepend">
<input class="form-input" type="number" value="" id="mark-up-amount-input">
</div>
<select id="mark-up-select" class="custom-select">
<option value="percentage">% By Percentage</option>
<option value="amount">% By Amount</option>
</select>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
But this is what I got when I tried to render it in the browser:
As you could see, the checkbox and the label are in the same line, but the number input is on a new line, and the select box is also on a new line instead of showing up in the same line as with the number input field.
I am using bootstrap 5 and I would really appreciate some help please!
Try use "d-flex" to flex out the content into one row and remove some of your unnecessary tags.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<form class="mt-3 p-2 d-flex">
<div class="input-group d-flex w-25">
<input class="form-check-input me-3" type="checkbox" value="" id="set-mark-up-check">
<label class="form-check-label" for="set-mark-up-check">Set Markup</label>
</div>
<div class="input-group d-flex">
<div class="input-group-prepend">
<input class="form-input" type="number" value="" id="mark-up-amount-input">
</div>
<select id="mark-up-select" class="custom-select">
<option value="percentage">% By Percentage</option>
<option value="amount">% By Amount</option>
</select>
</div>
</form>
Try with:
<form class="mt-3 p-2">
<div class="form-row">
<div class="col">
<input class="form-check-input" type="checkbox" value="" id="set-mark-up-check">
<label class="form-check-label" for="set-mark-up-check">Set Markup</label>
</div>
<div class="col input-group">
<div class="input-group-prepend">
<input class="form-input" type="number" value="" id="mark-up-amount-input">
</div>
<select id="mark-up-select" class="custom-select">
<option value="percentage">% By Percentage</option>
<option value="amount">% By Amount</option>
</select>
</div>
</div>
</form>
Look at https://getbootstrap.com/docs/4.0/components/forms/ for further information.
Edit
<!doctype html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<div class="container">
<form class="mt-3 p-2">
<div class="form-row row">
<div class="col-3">
<input class="form-check-input" type="checkbox" value="" id="set-mark-up-check">
<label class="form-check-label" for="set-mark-up-check">Set Markup</label>
</div>
<div class="col-6">
<div class="input-group">
<div class="input-group-prepend">
<input class="form-input" type="number" value="" id="mark-up-amount-input">
</div>
<select id="mark-up-select" class="custom-select">
<option value="percentage">% By Percentage</option>
<option value="amount">% By Amount</option>
</select>
</div>
</div>
</div>
</form>
</div>
</body>
Related
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>
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 am trying to align my bootstrap form horizontally and vertically so that it is in the middle of the screen; however, I can't find any solution to help me.
I tried using these bootstrap classes, but they did not work:
d-flex align-items-center justify-content-center
Here's my form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<title>Login</title>
</head>
<body>
<div class="d-flex align-items-center justify-content-center">
<form>
<div class="mb-3 form-control-sm">
<label for="loginInputEmail" class="form-label">Email address</label>
<input type="email" class="form-control" id="loginInputEmail" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3 form-control-sm">
<label for="loginInputPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="loginInputPassword">
</div>
<div class="mb-3 form-control-sm">
<label for="selectAccountType" class="form-label">Account type</label>
<select class="form-select form-select-sm" id="selectAccountType" aria-label="selectAccountType">
<option selected>Account type</option>
<option value="1">Arbetare</option>
<option value="2">Företag</option>
<option value="3">Admin</option>
</select>
</div>
<div class="mb-3 form-check form-control-sm">
<input type="checkbox" class="form-check-input" id="rememberCheck">
<label class="form-check-label" for="rememberCheck">Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</body>
</html>
Looks like parent div needs a vertical height, could use 100% of viewport height with vh-100:
<body>
<!-- vh-100 here-->
<div class="d-flex align-items-center justify-content-center vh-100">
<form>
<div class="mb-3 form-control-sm">
<label for="loginInputEmail" class="form-label">Email address</label>
<input type="email" class="form-control" id="loginInputEmail" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3 form-control-sm">
<label for="loginInputPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="loginInputPassword">
</div>
<div class="mb-3 form-control-sm">
<label for="selectAccountType" class="form-label">Account type</label>
<select class="form-select form-select-sm" id="selectAccountType" aria-label="selectAccountType">
<option selected>Account type</option>
<option value="1">Arbetare</option>
<option value="2">Företag</option>
<option value="3">Admin</option>
</select>
</div>
<div class="mb-3 form-check form-control-sm">
<input type="checkbox" class="form-check-input" id="rememberCheck">
<label class="form-check-label" for="rememberCheck">Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</body>
It's doing exactly what is supposed to do. Your parent class: <div class="d-flex align-items-center justify-content-center"> doesn't have an height set. This means that your form will take all of its available space.
If you want to achieve to center it horizontal and vertical, you can set the height of your parent class to: 100vh.
I updated your code: https://codepen.io/Qontrol/pen/xxRqgJG
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>
I'm trying to do that bootstrap model:
But the alignement isn't working well because there's a dropdown list (It's not all elements of the same type).
This is what I came for:
This is my fiddle:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="form-group">
<label class="col-xs-3 control label">Prefix:</label><br />
<div class="col-xs-5 selectContainer">
<select name="prefix" class="form-control">
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
</select>
</div>
</div>
</div>
<div class="row">
<label for="fname">First Name:</label>
<input type="text" class="form-control" id="fname" name="fname">
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="form-group">
<label for="lname">Last Name:</label>
<input type="text" class="form-control" id="lname" name="lname">
</div>
</div>
<div class="row">
<label for="suffix">Suffix:</label>
<input type="text" class="form-control" id="suffix" name="suffix">
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="info">Information:</label>
<textarea class="form-control" rows="4" id="info" name="info"></textarea>
</div>
</div>
</div>
</div>
</body>
</html>
How can I fix this alignment problem?
Try something like this: http://www.bootply.com/TvgQizWRZw
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<label for="prefix">Prefix</label>
<select name="prefix" class="form-control" id="prefix">
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
</select>
</div>
<div class="col-md-6">
<label for="tbLastName">Last name</label>
<input type="text" class="form-control" id="tbLastName">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="tbFirstName">First Name</label>
<input type="text" class="form-control" id="tbFirstName">
</div>
<div class="col-md-6">
<label for="tbSuffix">Suffix</label>
<input type="text" class="form-control" id="tbSuffix">
</div>
</div>
</div>
<div class="col-md-4">
<label for="tbInfo">Information</label>
<textarea rows="4" cols="50" class="form-control" id="tbInfo">Test</textarea>
</div>
</div>
</div>