I've just recently asked this and it worked previously but now it doesn't again. I have 2 divs (student-parent-container and student-guardian-other-container) I want positioned side-by-side using inline: block and if possible without using float.
Here is the HTML:
<div id="parent-and-guardian" class="tab">
<div id="student-parent-guardian-container">
<div id="student-parent-container">
<fieldset id="student-father-info">
<legend class="form-legend">Father Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label form-label-textarea">Address:</label>
<textarea class="form-input-textarea form-input-long"></textarea>
</div>
<div>
<label class="form-label">Occupation:</label>
<input type="text" class="form-input form-input-long">
</div>
</fieldset>
<fieldset id="student-mother-info">
<legend class="form-legend">Mother Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label form-label-textarea">Address:</label>
<textarea class="form-input-textarea form-input-long"></textarea>
</div>
<div>
<label class="form-label">Occupation:</label>
<input type="text" class="form-input form-input-long">
</div>
</fieldset>
</div>
<div id="student-guardian-other-container">
<fieldset id="student-guardian-info">
<legend class="form-legend">Guardian Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label">Relation:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long">
</div>
<div>
<label class="form-label form-label-textarea">Address:</label>
<textarea class="form-input-textarea form-input-long"></textarea>
</div>
</fieldset>
</div>
</div>
</div>
and here is CSS:
#student-parent-container
display: inline-block;
}
#student-guardian-other-container
display: inline-block;
}
Here is a link to a jsFiddle:
Divs not positioning side-by-side
I would like for Guardian Information be on the right side of Father Information.
You didn't open the { in the css rules.
CSS
#student-parent-container {
display: inline-block;
vertical-align: top;
}
#student-guardian-other-container {
display: inline-block;
}
I updated your JS Fiddle, also adding a vertical-align to the guardian div:
https://jsfiddle.net/LinoLinux/7x8xde43/2/
Related
When I make the screen smaller, the content of the box pushes the submit button out.
Do I need a media query to solve this? If so, what do I need?
I've included the code to have a look at. I have had a go at some media queries but I am probably doing the wrong thing as I can't work out what it is that needs to happen when the screen size is changed. Most notably, going smaller.
TIA
#register {
height: 95%;
padding: 2rem 1rem;
}
p {
text-align: left !important;
}
.jumbotron1 {
background-color: #e9ecef
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col">
<div class="jumbotron1 jumbotron-fluid" id="register">
<div class="container1">
<h1 class="display-4">Register your interest!</h1>
<p class="lead">Don't miss out - register now! </p>
<form>
<div class="form-group">
<div class="row">
<div class="col">
<label for="firstname">First name</label>
<input type="text" class="form-control" id="firstname" placeholder="Enter first name">
</div>
<div class="col">
<label for="lastname">Last name</label>
<input type="text" class="form-control" id="lastname" placeholder="Enter last name">
</div>
</div>
<br>
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<h4>Which product are you interested in?</h4>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">Shave butter</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">Shave foam</label>
</div>
<br>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
<label class="form-check-label" for="inlineCheckbox3">Shave gel</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
<label class="form-check-label" for="inlineCheckbox3">After care shave</label>
</div>
<br>
<br>
<div> <button type="submit" class="btn btn-primary">Submit</button></div>
The issue is this rule:
#register {
height: 95%;
…
}
If you remove it, the button no longer breaks out of the container.
I trying to make a div display beside another div using "display: inline". However, I can't seem to make it work. I have a parent div (parent-and-guardian) with 2 divs inside (student-parent-container and student-guardian-other-container). I am trying for this 2 divs to be displayed side by side.
<div id="parent-and-guardian" class="tab">
<div id="student-parent-container">
<fieldset id="student-father-info">
<legend class="form-legend">Father Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
</fieldset>
<fieldset id="student-mother-info">
<legend class="form-legend">Mother Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
</fieldset>
</div>
<div id="student-guardian-other-container">
<fieldset id="student-guardian-info">
<legend class="form-legend">Guardian Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
<div>
<label class="form-label">Relation:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
</fieldset>
</div>
</div>
Here is the CSS:
#student-parent-container {
display: inline;
}
#student-guardian-other-container {
display: inline;
}
I'd like for the Guardian Information to be on the right side of Father Information and Mother Information.
Here's a link to jsFiddle: Test
For native-block elements it's better to apply display: inline-block; than element will still take block element display effect (like setting height for inline elements does nothing, while block elements height does change). Also your blocks may lead to different top position on page. That's why I added vertical-align: top (for inline and inline-block elements only):
#student-parent-container {
display: inline-block;
vertical-align: top;
}
#student-guardian-other-container {
display: inline-block;
vertical-align: top;
}
<div id="parent-and-guardian" class="tab">
<div id="student-parent-container">
<fieldset id="student-father-info">
<legend class="form-legend">Father Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
</fieldset>
<fieldset id="student-mother-info">
<legend class="form-legend">Mother Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
<div>
<label class="form-label">Contact No.:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
</fieldset>
</div>
<div id="student-guardian-other-container">
<fieldset id="student-guardian-info">
<legend class="form-legend">Guardian Information</legend>
<div>
<label class="form-label">Name:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
<div>
<label class="form-label">Relation:</label>
<input type="text" class="form-input form-input-long"></input>
</div>
</fieldset>
</div>
</div>
#parent-and-guardian {
display: flex;
}
it will cause it to display side by side. Check out https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
I am trying to align textfields with bootstrap however I keep failing to adopt anything I found on sources to my project. What I am trying to do is aligning e-mail and password text-fields but leave 'Remember me' and 'Login' centered.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<form method="POST" action="/auth/login">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
You can use Bootstrap's form-horizontal class to help achieve the layout.
Demo: http://www.bootply.com/nJ2P2gi76B
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Log in</button>
</div>
</div>
</form>
You can access only the text input by using a css attribute selector.
For Example...
input[type="text"] {
...
}
You can get more specific if needed...
#someID input[type="text"] {
...
}
you can use text-center to center the inner content of your div. you can use text-left, text-center, text-right classes to align the contents.
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css);
<form method="POST" action="/auth/login">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
<div class="form-group text-center">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group text-center">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
It would help if you could post a JSFiddle with the css you are using!
Guessing from what i see:
You could add a class to both fields and override the css.
or put both fields in a div and align them without impacting the rest.
Using an enclosing div:
JSFiddle
CSS:
.input-fields {
width: 300px;
}
.input-fields .form-group {
float: right;
}
.form-group {
clear: both;
text-align: center;
}
HTML:
<form method="POST" action="/auth/login">
<div class="input-fields">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
Newbie Coder here. I'm trying to build a simple form (first, last, email, country), and I have labels corresponding to each. Positioning wise, I want to have the labels ABOVE each input. However, what I'm having some issues with is putting the first and last inputs next to each other (positioned horizontally) while keeping the labels above.
<div id="firstlast" class="grid_8">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
<label for="last">Last Name</label>
<input type="text" name="last" id="last"><br>
</div>
and the CSS
.firstlast div {
float: left;
clear: none;
display:inline;
}
I can use a linebreak to position the first over the input, but the linebreak still applies to the second label and form.
Any ideas on this?
Thanks!
Try This:
<form name="" method="post">
<div style="float:left;margin-right:20px;">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
</div>
<div style="float:left;">
<label for="last">Last Name</label>
<input type="text" name="last" id="last">
</div>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
<label for="message">Message</label>
<input id="message" type="text" value="" name="message">
</form>
And CSS:
input, label {
display:block;
}
You'll need to nest them in their own containers and float them. Or just do the one.
<div id="firstlast" class="grid_8">
<div style="float:left;">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
</div>
<label for="last">Last Name</label>
<input type="text" name="last" id="last"><br>
</div>
You define .firstlast Class in css . But you used ID in your html code why
-----------------------------------------------------
Now you can try this
Define your label display block in css as like this
label{
display:block;
magin-top:20px;
}
Demo
============================
Try Second Method is this
HTML Code
<div id="firstlast">
<div class="grid_8">
<div class="control-group">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
</div> <div class="control-group">
<label for="last">Last Name</label>
<input type="text" name="last" id="last">
</div>
</div>
<div class="grid_8">
<div class="control-group">
<label for="first">email</label>
<input type="text" name="first" id="first">
</div> <div class="control-group">
<label for="last">country</label>
<input type="text" name="last" id="last">
</div>
</div>
</div>
Css
.grid_8{overflow:hidden;margin-top:20px;}
.control-group{
float:left;
width:50%;
}
.control-group label{
display:block;
}
Demo
If i understand your question, you want first label and input field in horizontal and for rest you want label text just above the input field.
Here is the css code should like..
input[type="text"]{
padding:10px;
}
label{vertical-align:top;
padding:10px 0;
display:block;
}
#firstlast {
width:250px;
}
label:first-child, input:first-child{ display:inline; padding:0 5px 0 0;}
HTML should like this.
<div id="firstlast" class="grid_8">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
<label for="last">Last Name</label>
<input type="text" name="last" id="last">
<label for="email">e-mail</label>
<input type="text" name="email" id="email">
</div>
And here is the working Demo.
http://jsbin.com/nugucelu/1/edit
I have a quick Bootstrap issue. I am setting up a form and it seems that the form label is not aligning to the input field. I have had an issue like this before which was solved by adding clearfix to the class. This did not resolve the issue.
Fiddle example:
http://jsfiddle.net/mwoods98/P6ux2/1/
<div id="pane2" class="tab-pane">
<div class="well">
<label class="control-label" for="interview">Label 1</label>
<div class="controls">
<div>
<input type="text" id="interview" name="FDFINTERVIEW" class="" />
</div>
</div>
<label class="control-label" for="resume">Label 2</label>
<div class="controls">
<div>
<input type="text" id="resume" name="FDFMEMOSENT" class="" />
</div>
</div>
<label class="control-label" for="memoreceived">Label 3</label>
<div class="controls">
<div>
<input type="text" id="memoreceived" name="FDFMEMORECV" class="" />
</div>
</div>
<label class="control-label" for="selectionemail">Label 4</label>
<div class="controls">
<div>
<input type="text" id="selectionemail" name="fdfEmailSent" class="" />
</div>
</div>
<label class="control-label" for="fdfSECSbmt">Label 5</label>
<div class="controls">
<div>
<input type="text" id="fdfSECSbmt" name="fdfSECSbmt" class="" />
</div>
</div>
<label class="control-label" for="fdfInSECGrnt">Label 6</label>
<div class="controls">
<div>
<input type="text" id="fdfInSECGrnt" name="fdfInSECGrnt" class="" />
</div>
</div>
<label class="control-label" for="fdfInSECDeny">Label 1=7</label>
<div class="controls">
<div>
<input type="text" id="fdfInSECDeny" name="fdfInSECDeny" class="" />
</div>
</div>
<label class="control-label" for="fdfFullSECGrnt">Label 8</label>
<div class="controls">
<div>
<input type="text" id="fdfFullSECGrnt" name="fdfFullSECGrnt" class="" />
</div>
</div>
<label class="control-label" for="fdfMEDGrnt">Label 9</label>
<div class="controls">
<div>
<input type="text" id="fdfMEDGrnt" name="fdfMEDGrnt" class="" />
</div>
</div>
<label class="control-label" for="fdfEOD">Label 10</label>
<div class="controls">
<div>
<input type="text" id="fdfEOD" name="fdfEOD" class="" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="textarea">Label 11</label>
<div class="controls">
<textarea class="input-xlarge" id="textarea" rows="3"></textarea>
</div>
</div>
</div>
<!-- end of well -->
</div>
TIA
You have to put the element in a control-group class and add to your form the form-horizontal class, you also don't need an extra div for your input.
<div class="form-horizontal">
<div class="control-group">
<label class="control-label" for="interview">Label 1</label>
<div class="controls">
<input type="text" id="interview" name="FDFINTERVIEW" class="" /></div>
</div>
</div>
</div>
Add .form-horizontal to the form.
Wrap labels and controls in .control-group
Add .control-label to the label
Wrap any associated controls in .controls for proper alignment
Twitter Bootstrap doc - Horizontal Form