I've been trying to align the span3 <div> next to each other but I keep getting them one above the other.
So, I want to have:
SPAN3 SPAN3
and instead I am getting:
SPAN3
SPAN3
I appreciate any help here, thank you very much!
<div class="container">
<div class="row-fluid" >
<div class="span3">
<form class="well" action="login.php">
<legend>Sign In</legend>
<div class="control-group">
</br><input name="username" type="text" placeholder="Enter your username" class="input-large"></br></br>
</div>
<div class="control-group">
</br><input name="password" type="password" placeholder="Enter your password" class="input-large"></br></br>
</div>
<div class="control-group">
<button type="submit" class="btn">Log in</button></br></br>
<a> OR </a></br></br>
<button type="button" class="btn btn-primary">New user? Register Here!</button>
</div>
</form>
</div>
<div class="span3">
<img src="someimage.jpg" alt="sijpg">
</div>
</div>
</div>
Had the same problem, the issue is in Bootstrap 3.0 - It has some bugs in its bootstrap.min.css file.
My suggestion - download 2.3.2, it will work just fine
.span3 { display:inline-block; }
That is?
Related
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.
I have the following HTML:
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" class="form-control" name="price" value="" placeholder="Price (optional)" style="width: 140px;">
</div>
<span class="btn btn-primary" onclick="update($(this));"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Update</span>
JSFIDDLE
It renders like this:
How can I get both inputs and the button on the same line? I've been messing with the CSS but can't seem to get it to work. I was able to get it working with a table, but I know a CSS solution would be "better."
You can use Inline Forms like in the Bootstrap Documentation found here:
https://getbootstrap.com/docs/3.4/css/#forms-inline
The 'form-inline' class is probably what you're looking for.
Solution 1 - Using the Grid
Use the Bootstrap’s predefined grid classes for arranging the form elements.
The grid gives you a better control over the width of the elements and scales better than the Inline Form solution.
<form>
<div class="form-row">
<div class="form-group col-md-7">
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
</div>
<div class="form-group col-md-3">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="price0" placeholder="Price (optional)">
</div>
</div>
<div class="form-group col-md-2">
<button type="submit" class="btn btn-primary" onclick="update($(this));"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Update</button>
</div>
</div>
</form>
Solution 2: Inline Form:
Use an Inline Form, as described by Bootstrap Inline Form Documentation.
You need to manually address the width and alignment.
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
</div>
<div class="input-group m-2">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="price" placeholder="Price (optional)">
</div>
<button type="submit" class="btn btn-primary m-2" onclick="update($(this));"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Update</button>
</form>
Running Example
This JSFiddle shows both solutions running.
The sample code and fiddle are updated for Bootstrap 4.
Use grid layout with xs phone size to force grid on responsive, the grid is divided into 12 cells so you'll need 3 x 4.
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
</div>
You could also have one of them bigger than the others:
<div class="row">
<div class="col-xs-7">
</div>
<div class="col-xs-3">
</div>
<div class="col-xs-2">
</div>
</div>
As long as they add up to 12.
Demo
Bootstrap Grid
In Bootstrap 4 you use multiple
<div class="col"></div>
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>
I already have one row
<div class="row input_section">
<div class="span3">
<h3>Origin</h3>
<p>Where is the orinin of the delivery? Use to calculate price of delivery</p>
</div>
<div class="span9 delivery_section">
<label><div>Address</div>
<input type="text" name="type" value=""/>
</label>
<label>
<button class="btn btn-primary" type="button">Verify</button>
</label>
<label><div style="width:100%;height:150px;border:1px solid black;"></div></label>
</div>
</div>
And I want to do the div size full in the span9 .
So,How can i write it?
straight from the bootstrap docs my friend
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
Check this jsFiddle
Bootstrap already have class form-inline to set into inline.
Use this in your existing div append this class="form-inline"
Replace this line
<div class="span9 delivery_section">
into
<div class="span9 delivery_section form-inline">
Already i use this, hope this help you!
Try this.
<div class="row input_section">
<div class="span3">
<h3>Origin</h3>
<p>Where is the orinin of the delivery? Use to calculate price of delivery</p>
</div>
<div class="span9 delivery_section">
<label>Address</label>
<div class="input-group">
<input class="form-control" type="text" placeholder="Address">
<div class="input-group-btn">
<button class="btn btn-primary" type="button"> Verify </button>
</div>
</div>
<div style="width:100%;height:150px;border:1px solid black;"></div>
</div>
</div>
If it doesn't seem to work, it probably because I'm using bootstrap 3.
label is inline element. And moreover in bootstrap to accept the width by default they have specified the display property as 'block'. Just override the code by placing the following code. Then you will done with your code.
label {
display:inline-block;
}