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.
Related
Currently, this is like this:
How can I make it look like this?
Here's the fiddle beating me up!
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid" id="container">
<img src="https://cdn.dribbble.com/users/24078/screenshots/15522433/media/e92e58ec9d338a234945ae3d3ffd5be3.jpg" alt="text" width="100" height="100">
<form>
<div class="form-group row">
<label for="select" class="col-2 col-form-label">Order PO #</label>
<div class="col-3">
<select id="selectOrderPo" name="select" required="required" class="custom-select">
</select>
</div>
</div>
<div class="form-group row">
<label for="fabricPo" class="col-2 col-form-label">Fabric PO #</label>
<div class="col-3">
<input id="fabricPo" name="fabricPo" type="text" required="required" value="POBláBlá" class="form-control" disabled>
</div>
</div>
<div class="form-group row">
<label for="poDate" class="col-2 col-form-label">PO Date</label>
<div class="col-3">
<input id="poDate" name="poDate" type="text" required="required" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="leadTime" class="col-2 col-form-label">Lead Time</label>
<div class="col-3">
<input id="leadTime" name="leadTime" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="text3" class="col-2 col-form-label">Ship Date</label>
<div class="col-3">
<input id="text3" name="text3" type="text" class="form-control">
</div>
</div>
</form>
</div>
</body>
</html>
Appreciate any help!
Here is my solution:
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid" id="container">
<div class="row">
<div class="col">
<img src="https://cdn.dribbble.com/users/24078/screenshots/15522433/media/e92e58ec9d338a234945ae3d3ffd5be3.jpg" alt="text" width="100" height="100">
</div>
<div class="col">
<form>
<div class="form-group row">
<label for="select" class="col-2 col-form-label">Order PO #</label>
<div class="col-3">
<select id="selectOrderPo" name="select" required="required" class="custom-select">
</select>
</div>
</div>
<div class="form-group row">
<label for="fabricPo" class="col-2 col-form-label">Fabric PO #</label>
<div class="col-3">
<input id="fabricPo" name="fabricPo" type="text" required="required" value="POBláBlá" class="form-control" disabled>
</div>
</div>
<div class="form-group row">
<label for="poDate" class="col-2 col-form-label">PO Date</label>
<div class="col-3">
<input id="poDate" name="poDate" type="text" required="required" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="leadTime" class="col-2 col-form-label">Lead Time</label>
<div class="col-3">
<input id="leadTime" name="leadTime" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="text3" class="col-2 col-form-label">Ship Date</label>
<div class="col-3">
<input id="text3" name="text3" type="text" class="form-control">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Disclaimer, I've used Bootstrap 5 as a few styling were coming out clunky, probably cause you were using a beta release of Bootstrap 4 (I would recommend switching to a stable version)
This is how I would do it, I split the image and the input fields into their own columns using Grid System.
I recommend reading up on Grid System to know more
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid my-3" id="container">
<div class="col-md-12 col-sm-12 col-md-12">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6 col-sm-4">
<div>
<img src="https://cdn.dribbble.com/users/24078/screenshots/15522433/media/e92e58ec9d338a234945ae3d3ffd5be3.jpg" alt="text" width="100" height="100">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-8">
<div class="mb-3 row g-3">
<label for="inputPassword" class="col-lg-2 col-md-4 col-sm-1 col-form-label">Order PO #</label>
<div class="col-lg-10 col-md-8 col-sm-8">
<select class="form-select" aria-label="Default select example">
<option selected>#</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-2 col-md-4 col-sm-1 col-form-label">Fabric PO #</label>
<div class="col-lg-10 col-md-8 col-sm-8">
<input class="form-control" type="text" value="Only read values" aria-label="readonly input example" readonly>
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-2 col-md-4 col-sm-1 col-form-label">PO Date</label>
<div class="col-lg-10 col-md-8 col-sm-8">
<input class="form-control" type="text">
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-2 col-md-4 col-sm-1 col-form-label">Lead Time</label>
<div class="col-lg-10 col-md-8 col-sm-8">
<input class="form-control" type="text">
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-2 col-md-4 col-sm-1 col-form-label">Ship Date</label>
<div class="col-lg-10 col-md-8 col-sm-8">
<input class="form-control" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
Hope this helps :)
you can do this easily by using the flex property.
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid d-flex" id="container">
<div class="row">
<div class="col">
<img src="https://cdn.dribbble.com/users/24078/screenshots/15522433/media/e92e58ec9d338a234945ae3d3ffd5be3.jpg" alt="text" width
="100" height="100" class="mx-auto">
</div>
<div class="col">
<form>
<div class="form-group row">
<label for="select" class="col-2 col-form-label">Order PO #</label>
<div class="col-3">
<select id="selectOrderPo" name="select" required="required" class="custom-select">
</select>
</div>
</div>
<div class="form-group row">
<label for="fabricPo" class="col-2 col-form-label">Fabric PO #</label>
<div class="col-3">
<input id="fabricPo" name="fabricPo" type="text" required="required" value="POBláBlá" class="form-control" disabled>
</div>
</div>
<div class="form-group row">
<label for="poDate" class="col-2 col-form-label">PO Date</label>
<div class="col-3">
<input id="poDate" name="poDate" type="text" required="required" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="leadTime" class="col-2 col-form-label">Lead Time</label>
<div class="col-3">
<input id="leadTime" name="leadTime" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="text3" class="col-2 col-form-label">Ship Date</label>
<div class="col-3">
<input id="text3" name="text3" type="text" class="form-control">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
css
.grp{
width:50%;
display: flex;
justify-content: center;
margin-top: 120px;
}
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>
Can anybody tell how to arrange horizontal text box in same row eve though label will be in different line
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="control-label">Roll number <br> Student Code:</label>
<input type="text" class="form-control">
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label">School code:</label>
<input type="text" class="form-control ">
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label>Year Of Passing:</label>
<input type="text" class="form-control">
</div>
</div>
</div>
You can add w-50 d-inline-block class to input and w-25 to label as below
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="control-label w-25">Roll number <br> Student Code:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="w-25">School code:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group">
<label class="w-25">Year Of Passing:</label>
<input type="text" class="form-control w-50 d-inline-block">
</div>
</div>
</div>
You can wrap input in a div with col-x attribute and add row class to form-group.
An example:
<div class="form-group row">
<label class="control-label col-4">Roll number <br> Student Code:</label>
<div class="col-6">
<input type="text" class="form-control">
</div>
</div>
The full example here:
https://stackblitz.com/edit/js-bootstrap-css?file=index.html
<div class="row">
<div class="col-12">
<div class="form-group row">
<label class="control-label col-4">Roll number <br> Student Code:</label>
<div class="col-6">
<input type="text" class="form-control ">
</div>
</div>
<div class="text-required> This is required </div>
</div>
<div class="col-sm-3 col-lg-4">
<div class="form-group row">
<label class="control-label col-4">School code:</label>
<div class="col-6">
<input type="text" class="form-control ">
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="form-group row">
<label class="control-label col-4">Year Of Passing:</label>
<div class="col-6">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
So im having some issues trying to add in a file selection into my bootstrap(4.1.3) form. It looks off from the rest of the form
I tried using the example file forms from getbootstrap.com though they look even further streched out, this is the closest i could get it myself
<!-- this one works just fine -->
<div class="form-group row">
<label for="titel" class="col-4 col-form-label">Titel van Email</label>
<div class="col-8">
<input id="titel" name="titel" type="text" required="required" class="form-control">
</div>
</div>
<!-- this one looks off -->
<div class="form-group row">
<label class="filel" class="col-4 col-form-label">Choose image file...</label>
<div class="col-8">
<input type="file" class="form-control" id="customFile" name="myImage">
</div>
</div>
here's a screenshot of the result
This is your solution
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="form-group row">
<label for="titel" class="col-4 col-form-label">Titel van Email</label>
<div class="col-8">
<input id="titel" name="titel" type="text" required="required" class="form-control">
</div>
</div>
<!-- This is your fixed code -->
<div class="form-group row">
<label class="file1 col-4 col-form-label">Choose image file...</label>
<div class="col-8">
<input type="file" class="form-control" id="customFile" name="myImage">
</div>
</div>
The error is caused by adding the class attribute twice in the label with the class file1.
<div class="form-group row">
<label for="titel" class="col-4 col-form-label">Titel van Email</label>
<div class="col-8">
<input id="titel" name="titel" type="text" required="required" class="form-control">
</div>
</div>
<!-- fixed -->
<div class="form-group row">
<label class="file1 col-4 col-form-label">Choose image file...</label>
<div class="col-8">
<input type="file" class="form-control" id="customFile" name="myImage">
</div>
</div>
Here below is my code:
<div class="modal-body-scrolled border-primary border-bottom p-0 mt-2">
<div class="form-row">
<div class="col-12">
<div class="row ml-0 mr-0">
<div class="row form-inline col-12 mt-2 mb-2 pt-2 pb-2 m-0">
<div class="row col-12 mb-2">
<div class="col-2 spacer"></div>
<div class="col-10 pl-0 d-inline">
<input type="text" class="form-control form-control-sm d-inline" style="width: 40px;"> <label class="col-form-label col-form-label-sm d-inline"> days </label>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row ml-0 mr-0 mb-3">
<label for="date" class="col-2 pl-0 justify-content-start align-items-start">Event:</label>
<select type="field" class="form-control form-control-sm ml-2" style="width:500px" v-model="keyEvent">
<option value="" disabled selected>(select)</option>
</select>
</div>
<div class="row ml-0 mr-0 mb-3">
<label for="date" class="col-2 pl-0 justify-content-start align-items-start">Date:</label>
<div class="col-2 pl-0 d-inline">
<input class="form-control">
</div>
</div>
</div>
</div>
</div>
I'm using the standard Bootstrap 12-column layout, with the first column set as col-2 and the second column set as col-10.
I thought that would mean my elements exactly left align but they don't.
How do I get the elements to left align / sit flush with each other?
<div>
<div class="row mb-1">
<div class="col-2"></div>
<div class="col-10"> <input type="text" class="form-control form-control-sm d-inline" style="width: 40px;"> <label class="col-form-label col-form-label-sm d-inline"> days </label>
</div>
</div>
<div class="row mb-1">
<div class="col-2">
<label for="date" class="">Event:</label>
</div>
<div class="col-10">
<select type="field" class="form-control form-control-sm" style="width:500px" v-model="keyEvent">
<option value="" disabled selected>(select)</option>
</select>
</div>
</div>
<div class="row mb-1">
<div class="col-2">
<label for="date" class="">Date:</label>
</div>
<div class="col-10">
<input class="form-control" style="width: 140px">
</div>
</div>
</div>
Try this structure, this is simple and short, will help you too
we can write it like this with much more simpler way,
just use normal grid classes, you are making your markup too complicate
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="padding: 20px;">
<div class="row mb-3">
<div class="col-2">
<label class="label">Label</label>
</div>
<div class="col-10">
<input class="form-control" style="width:100px;display:inline-block;" />
<label class="label" style="display:inline-block;">days</label>
</div>
</div>
<div class="row mb-3">
<div class="col-2">
<label class="label">Label</label>
</div>
<div class="col-10">
<select type="field" class="form-control">
<option value="" disabled selected>(select)</option>
<option value="" >option 1</option>
</select>
</div>
</div>
<div class="row mb-3">
<div class="col-2">
<label class="label">Label</label>
</div>
<div class="col-10">
<input class="form-control" style="width:100px;display:inline-block;" />
</div>
</div>
</div>
Changed the structure:
col-2 as you mentioned will have the label
col-8 will have the inputs
Make sure to wrap col in their respective row
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body-scrolled">
<div class="container">
<div class="row">
<div class="col-2">
Label
</div>
<div class="col-8">
<input type="text" class="form-control form-control-sm d-inline" style="width: 40px;"> <label class="col-form-label col-form-label-sm d-inline"> days </label>
</div>
</div>
<div class="row">
<div class="col-2">
Event:
</div>
<div class="col-8">
<select type="field" class="form-control form-control-sm" style="width:500px" v-model="keyEvent">
<option value="" disabled selected>(select)</option>
</select>
</div>
</div>
<div class="row">
<div class="col-2">
Date:
</div>
<div class="col-8">
<div class="col-2 pl-0 d-inline">
<input class="form-control">
</div>
</div>
</div>
</div>
</div>