How can I have a form on one side of the container and a text-paragraph on the other side? I figured if I put it all in a container with one row of two columns it would work but for some reason, the paragraph text shows up under the form on the left side.
This is a screenshot of what's happening based on the code I have right now.
<div class="container-section getintouch">
<h1 class="text-center">Say hello?</h1>
<div class="row">
<div class="col-xs-6">
<form>
<div class="form-group">
<input type="text" class="form-control no-border
placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control no-border"
placeholder="Email">
</div>
<textarea class="form-control no-border" rows="5" id="comment"></textarea>
</div>
</form>
</div>
<div class="col-xs-6">
<h3>Want to say hello? It's always nice meeting new people. Fill out
this form to the left and I'll reply to you as soon as I can :)
</h3>
</div>
</div>enter code here
.container-section{
width: full;
height: full;
margin: 0 auto;
padding: 100px;
color: white;
}
.getintouch{
background: #9dd1f1;
}
I just started learning to code so I apologize if this seems like a silly question. I searched around and couldn't find the answer anywhere.
Thank you in advance!
Learn HTML and CSS properly before asking any questions.
There's no CSS rule that has a value full.
Don't give padding on full width.
You forgot to add a container class.
Lots of invalid HTML, unclosed and stuff.
Snippet
.container-section {
-margin: 0 auto;
-color: white;
}
.getintouch {
background: #9dd1f1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container-section getintouch">
<h1 class="text-center">Say hello?</h1>
<div class="container">
<div class="row">
<div class="col-xs-6">
<form>
<div class="form-group">
<input type="text" class="form-control no-border" id=formGroupExampleInput " placeholder="Name "">
</div>
<div class="form-group">
<input type="text" class="form-control no-border" id=formGroupExampleInput2 " placeholder="Email "">
</div>
<div class="form-group">
<textarea class="form-control no-border" rows="5" id="comment"></textarea>
</div>
</form>
</div>
<div class="col-xs-6">
<h3>Want to say hello? It's always nice meeting new people. Fill out this form to the left and I'll reply to you as soon as I can :)</h3>
</div>
</div>
</div>
Preview
Output: http://jsbin.com/mepiripeju/edit?html,css,output
Related
I am making a copy of a pen-and-paper character sheet for a RPG, as a way of learning html/css. However I got stuck right at the beginning when trying to style a form, holding some background information about the character.
Currently I've managed to make my form of labels and input-fields to look like the picture to the left. However the pen-and-paper character sheet (and the desired look) is formatted like the one on the right.
Below is the code I'm using.
.sheet-character-background form input,
label {
margin-bottom: 10px;
}
.age-input {
width: 60px;
}
<div class="sheet-character">
<div class="sheet-character-background">
<form>
<label>Name</label>
<input type="text" name="attr_name">
<br>
<label>Race</label>
<input type="text" name="attr_race">
<br>
<label>Gender</label>
<input class="gender-input" type="text" name="attr_gender">
<label>Age</label>
<input class="age-input" type="number" name="attr_age" min="0">
<br>
<label>Religion</label>
<input type="text" name="attr_religion">
<br>
<label>Occupation</label>
<input type="text" name="attr_occupation">
<br>
<label>Archetype</label>
<input type="text" name="attr_archetype">
<br>
<label>Environment</label>
<input type="text" name="attr_environment">
<br>
<label>Background</label>
<input type="text" name="attr_backgrund">
</form>
</div>
</div>
What are the steps for going from what I have to what I want? I played around with surrounding each "row" with a <div> and class and setting their width in css. However this didn't work out so I reverted to my initial version and got stuck.
Many people would probably suggest to get a css framework, but what you want can be done with some simple css.
First, your html basically consists of a form with a series of rows, except for one row where it consists of two fields in one row. So I modified your html slightly that each row is wrapped by a div with a class as .form-row and delete the <br> (let css to do the rendering instead of using html tag):
To achieve what you want will then come down to set a width for the form, and how each row will behave, and set the width of input, and last override the setting for the special case of .age-input.
This is just a 'quick-and-dirty' way to achieve what you want, hopefully it provide you some ideas and suggestions in your learning.
form {
width: 300px;
}
.form-row {
display:flex;
}
input {
width: 100%;
}
.age-input {
width: 60px;
}
<form>
<div class="form-row">
<label>Name</label>
<input type="text" name="attr_name">
</div>
<div class="form-row">
<label>Race</label>
<input type="text" name="attr_race">
</div>
<div class="form-row">
<label>Gender</label>
<input type="text" name="attr_gender">
<label>Age</label>
<input class="age-input" type="number" name="attr_age" min="0">
</div>
<div class="form-row">
<label>Religion</label>
<input type="text" name="attr_religion">
</div>
<div class="form-row">
<label>Occupation</label>
<input type="text" name="attr_occupation">
</div>
<div class="form-row">
<label>Archetype</label>
<input type="text" name="attr_archetype">
</div>
<div class="form-row">
<label>Environment</label>
<input type="text" name="attr_environment">
</div>
<div class="form-row">
<label>Background</label>
<input type="text" name="attr_backgrund">
</div>
</form>
I am having issues centering a form in Bootstrap. I also don't seem to be able to resize the input boxes. I would like to have it centered.
This is what I have:
<div class="form-group row" id="SignupCreate">
<div class="col-sm-4">
<label>Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="col-sm-4">
<label>Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="col-sm-4">
<button type="submit">Submit</button>
</div>
</div>
</div>
And for CSS I started:
#SignUpCreate {
padding-top: 200px;
margin-right: 30px;
margin-left: 30px;
}
you only need to apply some width and make it center with margin: 0 auto
<div class="form-group row" id="signupcreate">
<div class="col-sm-4">
<label>Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="col-sm-4">
<label>Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<div class="col-sm-4">
<button type="submit">Submit</button>
</div>
</div>
below code will center your form
#signupcreate{
width: 60%;
margin: 0 auto;
float: none;
}
You probably want to put it inside a container. Like this:
<div class="container">
<div class="row">
// Your code here
</div>
</div>
Possible duplicate of: Center Form using Twitter Bootstrap
There are a couple ways to solve this but I really recommend to use bootstrap itself to do it.
What I recommend is using offsets. So if you want your form centered just use something like:
<div class="form-group row" id="SignupCreate">
<div class="col-sm-4 col-sm-offset-4">
<label>Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="col-sm-4 col-sm-offset-4">
<label>Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="col-sm-4">
<button type="submit">Submit</button>
</div>
</div>
</div>
You can tweak your offsets for xs, sm, md and lg accordingly, make sure to set offset to 0 if you don't want offset in a particular view.
Now for your styles, you are giving css a SignUpCreate id when in fact is SignupCreate, remember css selectors are case sensitive.
Also keep in mind for the future that when using bootstrap you should try as much to stick to the framework and use all its features instead of coding your own CSS, and when you do, a good thing to keep in mind is that CSS uses "points" to know which styles are more relevant, I recommend checking Specifics on CSS Specificity
So let's say you want to style something that has padding right and left, I would avoid using a row or column element to do this and would add a second container div to "respect" bootstrap styles.
I hope this answer is helpful :)
There is also a good answer here: Center a column using Twitter Bootstrap 3
UPDATE:
With boostrap 4.5^ you can center any item using d-flex justify-content-center on the parent, if you also want to align the items vertically (relative to the parent's height) simply add align-items-center.
I'm trying to make a form using bootstrap, and I want it to be perfectly aligned, like this one
I have this structure:
.w100x100 {
width: 100% !important;
}
<form class="form-inline" method="get" action="index.php">
<div class="form-group col-md-10">
<div class="input-group w100x100">
<select class="form-control" name="myform">
<option>Option</option>
</select>
</div>
</div>
<br>
<div class="form-group col-md-5">
<div class="input-group w100x100">
<input class="form-control" placeholder="input text"></input>
</div>
</div>
<div class="form-group col-md-5">
<div class="input-group w100x100">
<input class="form-control" placeholder="input text"></input>
</div>
</div>
and is working fine, except for that I don't know how to put a hyphen between both inputs. I don't know what else to try.
Any clue?
After many trial and errors, I found a solution. It's so simple that I don't know how I didn't see it before.
I put this div between the columns:
<div class="guion">-</div>
And make it float to the left.
.guion {
float: left;
}
Try adding a div between the two forms which contains a hyphen and give it say 10% then the other two divs you already have 45% each.
I have a form and I want to keep 2 or 3 controls in line in the same row, for example:
label1
r1_ctrl1 r1_ctrl2 r1_ctrl3
label2
r2_ctrl1 r2_ctrl2 r2_ctrl3
I tried to do it this way:
<form class="form-horizontal" role="form">
<label...>
<div class="form-group">
<select .../>
<a ... />
</div>
</form>
and it does not work.
I also tried:
<form class="form-horizontal" role="form">
<label...>
<div class="form-group">
<div class="controls form-inline"
<select .../>
<a ... />
</div>
</div>
</form>
And also no result.
The only working method is Html table, but the result is really ugly. Please advise.
If you want controls on the same row you shouldn't use:
.form-horizontal
but
.form-inline
http://getbootstrap.com/css/#forms-inline
This is what .form-horizontal does:
Individual form controls automatically receive some global styling. All textual , , and elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
And this is what .form-inline does:
Add .form-inline to your for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
I would take advantage of Bootstrap's flexible grid layout:
<div class="row">
<form>
<div class="col-xs-12">
<h3>Heading 1</h3>
</div>
<div class="col-xs-4 form-group">
<label for="input1">
<input id="input1" class="form-control" value="Control 1"></input>
</label>
</div>
<div class="col-xs-4 form-group">
<label for="input2">
<input id="input2" class="form-control" value="Control 2"></input>
</label>
</div>
<div class="col-xs-4 form-group">
<label for="input3">
<input id="input3" class="form-control" value="Control 3"></input>
</label>
</div>
</form>
</div>
Demo
Notice that I've changed your label to a heading. Each input should have its own label (with an appropriate for attribute) for accessibility. In this demo, the for attributes aren't strictly necessary as the labels wrap the inputs.
I have added a 2 column layout to my contact form.
the only thing is it does not display in 2 columns but single columns.
my html is:
<div id="container">
<div id="column1">
<h1>You can talk to me. I don't bite...</h1></div><br><br>
<h5>You can contact me by the form opposite or by one of the following:</h5><br><br>
<img src="/icons/mail.png" name="mail">kevin#kh.co.uk
</div>
<div id="column2">
<form action="mail.php" method="POST">
<p>Name*</p> <input type="text" name="name">
<p>Your Company Name</p> <input type="text" name="name">
<p>Email*</p> <input type="text" name="email">
<p>Telephone*</p> <input type="text" name="email">
<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
<small>Fields marked with a * symbol are required. </small>
<input type="submit" value="Send"><input type="reset" value="Clear">
</form>
</div>
</div>
and my css is:
#container {
float: left;
width: 98%;
position:relative;
}
#column1, #column2 {
width: 50%;
float: left;
position:relative;
}
please can someone tell me where I am going wrong?
thank you.
Kev
I found my problem.
my closing div tag for <div id="column1"> was not at the end of my column 1 content.
thanks for all your help.
Your HTML is invalid. You have too many closing tags. Remove the one after the closing tag and it will be fine:
See Fiddle
You have a closing div tag on the same line as the H1, It shouldnt be there so remove it.
Check this fiddle http://jsfiddle.net/WT6zC/
<div id="container">
<div id="column1">
<h1>You can talk to me. I don't bite...</h1><br><br>
<h5>You can contact me by the form opposite or by one of the following:</h5><br><br>
<img src="/icons/mail.png" name="mail">kevin#kh.co.uk
</div>
<div id="column2">
<form action="mail.php" method="POST">
<p>Name*</p> <input type="text" name="name">
<p>Your Company Name</p> <input type="text" name="name">
<p>Email*</p> <input type="text" name="email">
<p>Telephone*</p> <input type="text" name="email">
<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
<small>Fields marked with a * symbol are required. </small>
<input type="submit" value="Send"><input type="reset" value="Clear">
</form>
</div>
</div>
You have not written code properly.
extra
</div>
here is the fiddle