Does anyone have any ideas of how to create a two panel modal. So for example one side would be a login form or something and the other side would be a list of what users get. Or one side would be a physical contact information div and the other side would be an email contact form. I tried to do two divs under the modal div tag and have one pull-left the other pull-right with each span5 or span6 but it didn't work. I ask because I have this issue. Also can anyone tell me why my contact form has so much space between the label and the input box? Go to scoopclassifieds.com (not trying to plug my site, can't post pics yet) and click contact us. I have placed the html mark up blow
<div class="modal hide fade" id="contactForm" aria-hidden="true">
<div class="modal-body">
<form action="" method="post" class="form-horizontal">
<div class="control-group">
<label class="control-label">Email:</label>
<div class="controls">
<input type="text" name="email" id="email" class="input" />
</div>
</div>
<div class="control-group">
<label class="control-label">Subject:</label>
<div class="controls">
<input type="text" name="subject" id="subject" class="input" />
</div>
</div>
<div class="control-group">
<label class="control-label">Message:</label><br/><br/>
<div class="controls">
<textarea rows="5" class="input span4" name="message" id="message"></textarea>
</div>
</div>
<div class="control-group"><div class="controls"><input type="submit" name="contactUs" id="contactUs" class="btn" value="Contact Us" /></div></div>
</form>
</div>
</div>
Sorry if the code is so horribly formatted. I used cpanel text editor to develop it. I know its a bad idea but I had to do it as fast as possible to provide a live example.
Try putting a row-fluid inside the modal-body, and then 2 span6 inside that..
<div class="modal-body">
<div class="row-fluid">
<form class="span6">
</form>
<div class="span6">
</div>
</div>
</div>
You may also want to increase the default width of the modal..
.modal {
width:45%;
left:45%;
}
Demo on Bootply: http://bootply.com/69517
Related
I can't make out the convoluted logic behind where <label> elements are actually placed. I want a form with two rows. I want a label for each row, and then an input box after that. I would like the responsive behavior that when the viewport gets narrow, the label appears just above the input. When wide the label is left and the input right.
Works OK most of the time, but sometimes the <label> behaves so strange and I struggle trying to just get a simple two row form to work. Here is the sample:
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="well">
<div class="form-group">
<label class="col-md-2 control-label">
Reminder
</label>
<div class="col-md-5 container">
<input type="text" class="form-control"/>
</div>
<div class="col-md-5 container">
Minutes before meeting
</div>
</div>
<!-- Form Control TYPE Begin -->
<div class="form-group">
<label class="col-md-2 control-label">Type</label>
<div class="col-md-10">
<div class="radio radio-primary">
<label>
<input type="radio" value="1"
class="form-control">
Circle Meeting
</label>
<label>
<input type="radio" value="2"
class="form-control">
Operational Meeting
</label>
</div>
</div>
</div>
</div>
<body>
I just spent 15 minutes making this selfstanding, so you should be able to put this in a file and load it directly into a browser.
The result is that instead of putting the label on the left, it is put in the row above (in that DIV) instead of in the DIV that the label is declared in. I have tried a number of manipulations, but the label seems to want to "jump" out of the DIV it is defined in, and into the DIV before it, and that messes up the layout of both DIV tags which are meant to be rows in a form.
See that the "Type" label does NOT appear on the left edge, but rather floating in the previous DIV and with the last element within that DIV.
Also the layout of the radio buttons and the labels on them are very inconvenient.
I would very much appreciate if someone can explain what is going on, and how to avoid this in the future. (Not just a solution to this case, but an explanation that will allow me to avoid future cases as well.)
This should fix it; Set the form and fields tags around your form; some class changes
<div class="well">
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-md-2 control-label" for="textinput">
Reminder
</label>
<div class="col-md-5">
<input type="text" name="textinput" class="form-control"/>
</div>
<div class="col-md-5">
Minutes before meeting
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Type</label>
<div class="col-md-10">
<label class="radio-inline" for="radios-1">
<input type="radio" name="radios" id="radios-1" value="1">
Circle Meeting
</label>
<label class="radio-inline" for="radios-2">
<input type="radio" name="radios" id="radios-2" value="2">
Operational Meeting
</label>
</div>
</div>
</fieldset>
</form>
</div>
I am using bootstrap and I have a container with a login form.
However, I want to align this form to the left side of the page. However, using float left makes it look ugly and also makes the form input smaller, as you can see here:
http://codepen.io/anon/pen/xZGOjR
<div class="container">
<div class="form-container">
<form class="form-horizontal" name="form" role="form" >
<fieldset>
<div class="form-group">
<div class="btn-icon-lined btn-icon-round btn-icon-sm btn-default-light">
</div>
<input type="email" class="form-control input-lg input-round text-center" placeholder="Email" ng-model="user.email" name="email" ng-required autofocus>
</div>
<div class="form-group">
<div class="btn-icon-lined btn-icon-round btn-icon-sm btn-default-light">
</div>
<input type="password" class="form-control input-lg input-round text-center" placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-round btn-block text-center">Log in</button>
</div>
</fieldset>
</form>
</div>
</div>
How can I make it so the form input is to the left side without looking ugly?
To do it the bootstrap way. You could add a column width to the form <div class="form-container text-center col-xs-3">
Here is your original example tidied up a bit http://codepen.io/anon/pen/XXbKvN
Bootstrap uses a 12 column grid system so that everything is nicely laid out on the page. For more info have a look here http://getbootstrap.com/css/#grid-options
You can use width: 350px; to the .form-container class.
It can better, if you can upload your design. screenshot.
I am doing a school project and I need to make a sign in page. I have found this code, but it is not showing up in the center of the page. It is showing up on the left side of the page. Well, the first part is showing up on the left side and the second part is showing up on the right side. I need the right side below the left side after it is centered.
Here is my code:
<div class="container">
<div class="row">
<!-- left half of the page -->
<div class="col-xs-6">
<form class="form-signin" method="post" action="login.php">
<h2 class="form-signin-heading">Please sign in</h2>
<div class="form-group">
<label for="inputEmail">Email address</label>
<input type="text" name="emailaddress" id="inputEmail" class="form-control" placeholder="Email address" value="" required autofocus>
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
<!-- right half of the page -->
<div class="col-xs-6">
<h3>Not a member yet?</h3>
Join our club, it's the best!
</div>
</div>
</div>
What am I doing wrong? Should I add more code? Why is it showing up on the left side of my screen?
In the class part of the div element you want to center, write "centered".
For example, if you want to center the row, change
<div class="row">
to
<div class="row centered">
This is usually a preset style class in Bootstrap. If this doesn't work, you can also use a style setting:
<div class="row" style="text-align: center">
Simple solution:
<center>[code]</center>
Also <div class="centered"> is fine.
Here is my jsFiddle with full code example.
I would like:
The entire "page content" container (that is, the <h1> that starts "Sign in to..." as well as the entire <form> element) to be centered in the screen; and
The "Need help?" link needs to be left aligned, aligning with the submit button's left side
I am trying to style center the container via text-center. I am trying to align the link via text-left. Neither are working:
<div class="container">
<div class="row">
<div class="col-md-8 text-center">
<h1 class="strong-primary">Sign in to continue to Audit<b>Cloud</b>.</h1>
</div>
<div class="col-md-4 text-center">
<form role="form">
<div class="form-group">
<input type="email" class="form-control" id="signin-email" placeholder="Your email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="signin-password" placeholder="Password">
</div>
<button type="submit" class="btn form-control btn-lg btn-success">Sign in</button>
<div class="form-group">Need help?</div>
</form>
</div>
</div>
</div>
Any ideas?
You need to apply text-align:left; to the containing <div>. Instead of class="text-left, use style="text-align:left;. I put those changes into your fiddle:
http://jsfiddle.net/fjL4f2ew/1/
I have a row that is split down into various columns and sub-columns. In the proper example there are several more inputs but I've removed them for clarity as they're not needed for this example.
<form id="inputForm" class="form-inline" role="form">
<div class="row">
<div class="col-xs-4">
<label class="control-label">Primary Packaging:</label>
</div>
<div class="col-xs-6">
<label for="pack1Height" class="control-label">Height:</label>
<div class="input-group">
<input type="text" id="pack1Height" class="form-control small text-right" />
<span class="input-group-addon">mm</span>
</div>
</div>
<div class="col-xs-2">
<label class="control-label">Vol:</label>
<label class="control-label">999</label>
<label class="control-label">cm<sup>3</sup></label>
</div>
</div>
</form>
If you look at http://jsfiddle.net/53vu25ad/ you can see the issue as "Primary Packaging" and "Vol: 999 cm3" are not vertically aligned within the row - they're top aligned. Is there something I'm missing here?
(ps: On my form, the "height" label and the input element are on the same line, I have no idea why they're not in this jsfiddle, but it's not relevant to the question - I would still expect to see the two labels either side aligned vertically).
Using bleeding-edge not-yet-released Bootstrap v3.2.1: JS Fiddle
The trick is to use a dummy .form-control-static:
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Primary Packaging:</label>
<p class="form-control-static"> </p>
</div>
</div>
Well without using experimental bootstrap, the way I got around this was adding a simple custom class that matched the form-control element height of 34px.
By setting the row line-height to the same, it automatically valigns content.
.fixedRow {
line-height: 34px;
}
<div class="row fixedRow">
<div class="col-xs-4">
<label class="control-label">Primary Packaging:</label>
</div>
...
Updated jsfiddle: http://jsfiddle.net/53vu25ad/2/
Please find the updated jsfiddle
You may need to use the .form-group class for .form-inline
<form id="inputForm" class="form-inline" role="form">
<div class="form-group">
<label class="control-label">Primary Packaging:</label>
</div>
<div class="form-group">
<label for="pack1Height" class="control-label">Height:</label>
<div class="input-group">
<input type="text" id="pack1Height" class="form-control small text-right" />
<span class="input-group-addon fw1">mm</span>
</div>
</div>
<div class="form-group">
<label class="control-label">Vol:</label>
<label class="control-label">999</label>
<label class="control-label">cm<sup>3</sup></label>
</div>
</div>
</div>
</form>