I want my text and textarea have same width. I have no idea what col, lg, md, MB, and sm does. I have tried it a lot. Here is the code. please help
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container-fluid">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading display-4" id="contact">Contact <span class="text-muted display-4">Us</span></h2>
<img class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" src="undraw_contact_us_15o2.png" width="70%" height="70%" xmlns="http://www.w3.org/2000/svg" focusable="false" role="img"></img>
</div>
<div class="form">
<form action="https://formspree.io/mzbjjlyy" method="POST" class="was-validated">
<div class="form-group mb-3">
<label>
Your email:
<input type="text" name="_replyto" class="form-control" placeholder="Enter email" id="email" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</label>
</div>
<div class="form-group">
<label for="msg">
Your message:
<textarea name="message" class="form-control mb-3" placeholder="Enter your message" id="msg" rows="5" required></textarea>
</label>
<br>
<button type="submit" class="btn btn-primary btn-lg">Send</button>
</form>
</div>
</div>
</div>
also, where can I learn about it
Your bug is in here. Close the label tag before adding the textarea.
Check this link https://getbootstrap.com/docs/4.5/layout/overview/ for how bootstrap layout classes work.
<label for="msg">
Your message:
</label>
<textarea name="message" class="form-control mb-3" placeholder="Enter your
message" id="msg" rows="5" required>
</textarea>
Related
I have an edit.ejs page to edit a camp , in this page I have two forms , one to submit an edit and the other from to delete the camp, each form has a button , and they are below each other , how can I make the buttons aligned in one so that they are next to each other ?
I'm using Bootstrap5 v5.3
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="row d-inline">
<h1 class="text-center">Edit Camp</h1>
<div class="col-6 offset-3">
<form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST">
<div class="mb-3">
<label class="form-label" for="title">Name</label>
<input class="form-control" type="text" id="title" name="campground[title]" value="<%= camp.title %>">
</div>
<div class="mb-3">
<label class="form-label" for="location">Location</label>
<input class="form-control" type="text" id="location" name="campground[location]" value="<%= camp.location %>">
</div>
<div class="mb-3">
<label class="form-label" for="image">Image URL</label>
<input class="form-control" type="text" id="image" name="campground[image]" value="<%= camp.image %>">
</div>
<div class="mb-3">
<label class="form-label" for="price">Price</label>
<div class="input-group">
<span class="input-group-text" id="price-label">$</span>
<input type="number" class="form-control" id="price" placeholder="0.00" aria-label="price" aria-describedby="price-label" name="campground[price]" value="<%= camp.price %>">
</div>
</div>
<div class="mb-3">
<label class="form-label" for="description">Description</label>
<textarea class="form-control" type="text" id="description" name="campground[description]"><%= camp.description %> </textarea>
</div>
<div class="mb-3"><button class="btn btn-success">Save</button></div>
</form>
<form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
</div>
</div>
The buttons should be aligned like the image below
If you need to keep the HTML structure as it is, you can simply use the helper class float-start on the "save" button (I also added a small margin to the right of it with me-2 class).
If you can change the structure, #isherwood's answer will do just fine.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="row d-inline">
<h1 class="text-center">Edit Camp</h1>
<div class="col-6 offset-3">
<form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST">
<div class="mb-3">
<label class="form-label" for="title">Name</label>
<input class="form-control" type="text" id="title" name="campground[title]" value="<%= camp.title %>">
</div>
<div class="mb-3"><button class="btn btn-success float-start me-2">Save</button></div>
</form>
<form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
</div>
</div>
Form inputs are not required to be inside the form. I'd move them both out of the form and reference their forms with the form attribute. Then you can position them as you like. This requires corresponding name attributes on the forms.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="row d-inline">
<h1 class="text-center">Edit Camp</h1>
<div class="col-6 offset-3">
<form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST" name="campgroundEditForm">
<div class="mb-3">
<label class="form-label" for="description">Description</label>
<textarea class="form-control" type="text" id="description" name="campground[description]"><%= camp.description %> </textarea>
</div>
</form>
<form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST" name="campgroundDeleteForm">
</form>
<div class="mt-2">
<button class="btn btn-success" form="campgroundEditForm">Edit</button>
<button class="btn btn-danger" form="campgroundDeleteForm">Delete</button>
</div>
</div>
</div>
I assume you cannot change HTML as it might come from different JSP files but the best way to do it is to move buttons to the single form. This solution is only if you have no access to change forms html (as it might come from MFE or other source/app and as mentioned buttons should belong to the same form unless is MFE concept that requires different action upon clicking on button)). Anyhow it was not requested to set buttons on left so thought of showing case with right aligned anyway left aligned can be achieved by adding flex-starts). Note that mb-3 class is removed from first button as its misaligning buttons in vertical scope or you can add the same class to second button. One can tell by classes used in HTML that you have bootstrap added so I have added it in example code as well.
#import url("https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css");
.form-wrapper{
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-end;
}
.align-right{
float:right;
margin-right:0.5rem;
}
<!DOCTYPE html>
<html>
<body>
<div class="row d-inline">
<h1 class="text-center">Edit Camp</h1>
<div class="col-6 offset-3 form-wrapper">
<form action="/campgrounds/<%=camp._id%>?_method=PUT" method="POST">
<div class="mb-3">
<label class="form-label" for="title">Name</label>
<input class="form-control" type="text" id="title" name="campground[title]" value="<%= camp.title %>">
</div>
<div class="mb-3">
<label class="form-label" for="location">Location</label>
<input class="form-control" type="text" id="location" name="campground[location]"
value="<%= camp.location %>">
</div>
<div class="mb-3">
<label class="form-label" for="image">Image URL</label>
<input class="form-control" type="text" id="image" name="campground[image]" value="<%= camp.image %>">
</div>
<div class="mb-3">
<label class="form-label" for="price">Price</label>
<div class="input-group">
<span class="input-group-text" id="price-label">$</span>
<input type="number" class="form-control" id="price" placeholder="0.00" aria-label="price"
aria-describedby="price-label" name="campground[price]" value="<%= camp.price %>">
</div>
</div>
<div class="mb-3">
<label class="form-label" for="description">Description</label>
<textarea class="form-control" type="text" id="description"
name="campground[description]"><%= camp.description %> </textarea>
</div>
<div class="remove-mb-3-class-from-here-to-align-buttons"><button
class="btn btn-success align-right">Save</button></div>
</form>
<form action="/campgrounds/<%=camp._id%>?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
</div>
</div>
</body>
</html>
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;
}
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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="panel-body" style="direction: rtl;">
<form class="form-horizontal" role="form" method="POST" action="#">
<input type="hidden" name="_token" value="LX7HWby1aME0NLMslEr2AHkxTRGBK7pRDYKTrh9P">
<div class="form-group">
<label for="name" class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="name" value="">
</div>
</div>
<div class="form-group">
<label for="email" class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control" name="email" value="">
</div>
</div>
<div class="form-group">
<label for="content" class="col-md-4 control-label">Content</label>
<div class="col-md-6">
<textarea id="content" rows="4" class="form-control" cols="50" name="content"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary">
<i class="fa fa-envelope-o" aria-hidden="true"></i> Send
</button>
</div>
</div>
</form>
</div>
If you run code snippet above in full size screen, you will see titles are in the left side, and inputs are in the right side (next to each other)
My website supports multi languages, also as you know, some languages are rtl direction. So I need to change the position of inputs and titles together. I mean I need to adjust inputs in the right side and titles in the left side (on the contrary of current structure) by adding some CSS code.
How can I do that?
Current UI:
Expected UI: (by using only CSS, not changing HTML)
In your case you can use the :lang() css selector with the rtl languages.
For example with arabic, you can use:
:lang(ar) .form-group label{
/* You can put here all the desired properties */
}
You can read more about it in CSS-Tricks's :lang() selector tutorial, but you have to pay attention to its browser compatibility.
You can use bootstrap-rtl to do the job for you.
Bootstrap RTL provides simple yet robust right-to-left capability for
Bootstrap 3, by employing new theming feature of it. Simply put its
CSS after bootstrap's original CSS, to the pages designed by Bootstrap
3. It works just like an extension on top of the original Bootstrap
You can either include it from your server or use a CDN. For a CDN example:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.2.0-rc2/css/bootstrap-rtl.css" />
Use pull-right class
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="panel-body" style="direction: rtl;">
<form class="form-horizontal" role="form" method="POST" action="#">
<input type="hidden" name="_token" value="LX7HWby1aME0NLMslEr2AHkxTRGBK7pRDYKTrh9P">
<div class="form-group">
<label for="name" class="col-md-2 control-label pull-right" style="text-align:left" >Name</label>
<div class="col-md-10">
<input id="name" type="text" class="form-control" name="name" value="">
</div>
</div>
<div class="form-group">
<label for="email" class="col-md-2 control-label pull-right " style="text-align:left">E-Mail Address</label>
<div class="col-md-10">
<input id="email" type="email" class="form-control" name="email" value="">
</div>
</div>
<div class="form-group">
<label for="content" class="col-md-2 control-label pull-right " style="text-align:left">Content</label>
<div class="col-md-10">
<textarea id="content" rows="4" class="form-control" cols="50" name="content"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary">
<i class="fa fa-envelope-o" aria-hidden="true"></i> Send
</button>
</div>
</div>
</form>
</div>
I'm trying to migrate my Bootstrap 2 form to Bootstrap 3.
My current code and fiddle: http://jsfiddle.net/mavent/Z4TRx/
.navbar-sam-main .navbar-toggle{
z-index:1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="" id="myDialog1">
<div class="" id="myDialog2">
<form role="form" class="" id="contactForm" onsubmit="send(); return false;">
<label>Please fill the form</label>
<br/><br/>
<div class="form-group">
<label for="name">My Label 2</label>
<input type="text" class="form-control" name="name" id="name" required="required" value="myName">
</div>
<div class="form-group">
<label for="email">My Label 3</label>
<input type="email" class="form-control" name="email" id="email" required="required">
</div>
<div class="form-group">
<label for="message">My Label 4</label>
<textarea class="form-control" name="message" id="message" required="required"></textarea>
</div>
<button type="submit" class="btn btn-primary" id="submit" style="margin-left: 40px">Send</button>
</form>
</div>
</div>
I want inline behaviour, my label 2 will be next to text input, my label 3 will be next to text input. I also need horizontal behaviour, my label 4 will be on top of the textarea. My label 2's and my label 3's text box will be 4 column width, my label 4's width will be full width of the form.
How can I do this in Bootstrap 3 ?
Just because the docs suggest you should use the form controls does not mean you have to. You can just use the built-in grid system to achieve the layout. See http://bootply.com/82900 for a working example. Code below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<form role="form">
<div class="row">
<label class="col-xs-4" for="inputEmail1">Email</label>
<div class="col-xs-8">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="row">
<label class="col-xs-4" for="inputPassword1">Password</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="row">
<label class="col-xs-12" for="TextArea">Text Area</label>
</div>
<div class="row">
<div class="col-xs-12">
<textarea class="form-control" id="TextArea"></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
Screenshot of above code rendered:
UPDATE: Just realized I dropped the label tags. Updated the answer, swapping <label> for <div>.
UPDATE: Updating code to reflect need to stay in this layout in small widths, as requested in comments below. See JS fiddle for a working example.
What you are looking for is not really in-line behaviour at all, just horizontal.
This code should help:
<div class="" id="myDialog1">
<div class="" id="myDialog2">
<form role="form" class="form-horizontal" id="contactForm" onsubmit="send(); return false;">
<label>Please fill the form</label>
<br><br>
<div class="form-group">
<label for="name" class="col-lg-3 col-sm-3">My Label 2</label>
<div class="col-lg-7 col-sm-7">
<input type="text" class="form-control" name="name" id="name" required="required" value="myName">
</div>
</div>
<div class="form-group">
<label for="email" class="col-lg-3 col-sm-3">My Label 3</label>
<div class="col-lg-7 col-sm-7">
<input type="email" class="form-control" name="email" id="email" required="required">
</div>
</div>
<div class="form-group">
<label for="message" class="col-lg-3">My Label 4</label>
<div class="col-lg-10 col-sm-10">
<textarea class="form-control" name="message" id="message" required="required"></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary" id="submit" style="margin-left: 20px">Send</button>
</form>
</div>
</div>
And looks like this:
The col-sm-* tags are optional - they just stop the elements from stacking as you size the window down.
You can try it out here: http://bootply.com/82889
I had the same problem, here is my solution:
<form method="post" class="col-md-12 form-inline form-horizontal" role="form">
<label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
<div class="input-group col-sm-7">
<input class="form-control" type="email" name="email" placeholder="your.email#example.com"/>
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Submit</button>
</span>
</div>
</form>
here is the Demo
you can try the code below
<div class="" id="myDialog1">
<form role="form" class="" id="contactForm" onsubmit="send(); return false;">
<div class="clearfix igr col-md-12">
<label>Please fill the form</label>
</div>
<div class="clearfix igr col-md-12">
<div class="col-md-2">
<label for="name">My Label 2</label>
</div>
<div class="col-md-3">
<input type="text" class="form-control" name="name" id="name" required="required" value="myName">
</div>
</div>
<div class="clearfix igr col-md-12">
<div class="col-md-2">
<label for="email">My Label 3</label>
</div>
<div class="col-md-3">
<input type="email" class="form-control" name="email" id="email" required="required">
</div>
</div>
<div class="clearfix igr col-md-12">
<div class="col-md-12">
<label for="message">My Label 4</label>
</div>
<div class="col-md-3">
<textarea class="form-control" name="message" id="message" required="required"></textarea>
</div>
</div>
<div class="clearfix igr col-md-12">
<div class="col-md-2">
<button type="submit" class="btn btn-default btn-primary" id="submit" >Send</button>
</div>
</div>
</form>
</div>
and use the styles as:
label,textarea{
margin:5px 0;
}
.igr{
margin:15px 0;
}
Adding the class control-label to your labels should do the trick for you.