Hi I am trying to center 2 input boxes in a row by adapting an example I saw here that was used for 1. I am trying to use span to get the 2 boxes together but they remain on top of each other and anchored left. Can someone help?
<div class="row">
<div class="center-block col-md-12" style="float: left; display: inline">
<button type="button" class="btn btn-primary register">
<span>
<div class="input-group">
<input type="Email" class="form-control" placeholder="Email" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="Password" class="form-control" placeholder="Password" aria-describedby="basic-addon1">
</div>
</span>
</button>
</div>
This is what I think you are trying to do:
<div class=".container-fluid">
<div class="row panel panel-default panel-heading">
<div class="col-md-offset-3 col-md-4">
<div class="input-group">
<input type="Email" class="form-control" placeholder="Email" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<input type="Password" class="form-control" placeholder="Password" aria-describedby="basic-addon1">
</div>
</div>
</div>
</div>
Here is the JSFiddle demo
Note that you are setting two textboxes within a button, which is wrong
Also, the size of your screen matters as the controls would stack on top of each other in case the screen size decreases.
Related
Note: Using bootstrap
Here is what I am going for:
Code:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<style>
.jumbotron
{
margin-top: 20px;
}
.input-group, textarea
{
margin-bottom: 10px;
}
</style>
<body>
<div class = "container">
<div class = "jumbotron text-center">
<h2>Form</h2>
</div>
<form>
<div class = "row">
<div class = "col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">First Name:</span>
<input type="text" class="form-control" placeholder="First Name" aria-describedby="basic-addon1">
</div>
</div>
<div class = "col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Last Name:</span>
<input type="text" class="form-control" placeholder="Last Name" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class = "row">
<div class = "col-md-2">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Age:</span>
<input type="text" class="form-control" placeholder="Age" aria-describedby="basic-addon1">
</div>
</div>
<div class = "col-md-2">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Gender:</span>
<input type="text" class="form-control" placeholder="Gender" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class = "row">
<div class = "col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Email Address:</span>
<input type="text" class="form-control" placeholder="Email Address" aria-describedby="basic-addon1">
</div>
</div>
<div class = "col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Phone Number:</span>
<input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class = "row">
<div class = "col-md-8">
<textarea class="form-control" rows="3" placeholder = "Additional comments"></textarea>
</div>
</div>
<div class = "row">
<div class = "col-md-2">
<button type="button" class="btn btn-default btn-lg">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
Demo fiddle
I'm trying to place an image alongside my form as shown in figure 1.
I've tried various ways: ie. columns within columns, fluid containers etc.
Using these ways has resulted in the text boxes getting shorter and a big margin between the form and image.
It seems that the rows take up 100% width of the container and width can't be adjusted by using CSS
Any ideas on how to do this?
Also how would I center the form? Can't seem to do that also using methods that work with other elements
You just need a nested row structure. The outer columns are wrappers for the form structure and the image. The inner columns that contain your form themselves add up to 12.
Fiddle
Note that I've converted all columns to XS for the demo, and that the two short ones don't fit well at small screen sizes.
.row > div {
margin: 5px 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<div class="container">
<div class="jumbotron text-center">
<h2>Form</h2>
</div>
<div class="row">
<div class="col-xs-8">
<form>
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">First Name:</span>
<input type="text" class="form-control" placeholder="First Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Last Name:</span>
<input type="text" class="form-control" placeholder="Last Name" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Age:</span>
<input type="text" class="form-control" placeholder="Age" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-xs-3">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Gender:</span>
<input type="text" class="form-control" placeholder="Gender" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Email Address:</span>
<input type="text" class="form-control" placeholder="Email Address" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Phone Number:</span>
<input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<textarea class="form-control" rows="3" placeholder="Additional comments"></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<button type="button" class="btn btn-default btn-lg">Submit</button>
</div>
</div>
</form>
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://placehold.it/800x600" />
</div>
</div>
</div>
You should use Bootstrap's grid classes and divide your <form> section and image section into two parts.
Look at this Codepen.
Hope this helps!
I let you here a fiddle working.
.jumbotron {
margin-top: 20px;
}
.input-group,
textarea {
margin-bottom: 10px;
}
img{width:100%}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="jumbotron text-center">
<h2>Form</h2>
</div>
<form>
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">First Name:</span>
<input type="text" class="form-control" placeholder="First Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Last Name:</span>
<input type="text" class="form-control" placeholder="Last Name" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Age:</span>
<input type="text" class="form-control" placeholder="Age" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Gender:</span>
<input type="text" class="form-control" placeholder="Gender" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Email Address:</span>
<input type="text" class="form-control" placeholder="Email Address" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Phone Number:</span>
<input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<textarea class="form-control" rows="3" placeholder="Additional comments"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-default btn-lg">Submit</button>
</div>
</div>
</div>
<div class="col-md-3">
<img src="http://txtbits.com/wp-content/uploads/2015/07/bootstrap.png">
</div>
</div>
</form>
</div>
The thing here is that you should understand that Bootstrap use a grid system made by 12 columns. When you declare a row, you have to keep in mind that it has 12 gaps to fill with your columns.
To implement a layout like yours, you shouldn't try to fit an element, like your image, which takes several rows height. In spite of that, it's better to create two columns, one for the inputs and another one for the image. Then inside the filed's column, just add as many rows as you need and fill then with the necessary columns, always keeping in mind that you have to fill 12 gaps.
You just have to take one row and two columns(or you can add divide manually with col-6) and bootstrap will adjust its width andenter image description here with div, you can add one form and your image each side and it will pop up perfectly.
I'm trying to create a simple form using Bootstrap 3 where people can sign up for a small event.
On this form, they should also be able to indicate if they want one or more T-shirts, and which size(s) they want to order.
I'm not new to HTML, CSS and Javascript, but I am quite new to Bootstrap. Also while I'm a programmer by day, I'm mainly writing REST services so my design skills are fairly limited.
Using w3schools and other tutorial sites I have arrived at this:
<div class="form-group form-group-sm">
<p class="help-block">Please select the number of T-shirts per size you would like to order.</p>
<label class="col-xs-1" for="shirt-s">S</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-s">
</div>
<label class="col-xs-1" for="shirt-m">M</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-m">
</div>
<label class="col-xs-1" for="shirt-l">L</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-l">
</div>
<label class="col-xs-1" for="shirt-xl">XL</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-xl">
</div>
<label class="col-xs-1" for="shirt-xxl">XXL</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-xxl">
</div>
<div class="col-xs-2"> </div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
See jsfiddle:
https://jsfiddle.net/tonvanbart/83nbny8h/5/
Not the prettiest in the world, but I can live with it. My main question is: why is the 'submit' button not in it's own row but inlined after the input fields? At first I thought I had to get to a total of 12 columns and I only had 10. But adding a 2-column div with a non-breaking space didn't help, and adding a <br> tag had no effect either.
Also, while I can live with this (it's for an informal, small group of people who know each other well) if anybody could give me a pointer on how to get the T-shirt size indicators closer to their respective input fields, that would be great. Thank you in advance.
Feel free to let me know if you need more information.
Here's the fixed code:
https://jsfiddle.net/ccx9x7om/1/
I added the following CSS
.row .form-group label, .row .form-group input {
display: inline-block;
}
.row .form-group input {
width: 50%;
}
button {
margin: 25px;
}
In order to use bootstrap's columns properly, you need to wrap them in a row, and wrap all rows inside either a .container or a .container-fluid. I moved the labels inside their respective .col-xs-2 then wrapped everything in the needed aforementioned divs.
Another way you could do this is by nesting your columns as to split the form in half which will greatly reduce the screen space it's using and bring your inputs closer while remaining responsive across viewports.
This is simply following the container/row/column layout that Bootstrap generally follows. See Nesting Columns.
*Note: The form-group class isn't necessary, it simply adds padding around your inputs.
See working Snippet at FullPage.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form>
<h2>Order a Shirt</h2>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="name">Name</label>
<input type="password" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Email address (never shown)">
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-s">S</label>
<input class="form-control" type="text" id="shirt-s">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-m">M</label>
<input class="form-control" type="text" id="shirt-m">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-l">L</label>
<input class="form-control" type="text" id="shirt-l">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-xl">XL</label>
<input class="form-control" type="text" id="shirt-xl">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-xxl">XXL</label>
<input class="form-control" type="text" id="shirt-xxl">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label>Order Now</label>
<button type="submit" class="btn btn-success btn-block btn-submit">Submit</button>
</div>
</div>
<div class="col-xs-12">
<p class="help-block">Please select the number of T-shirts per size you would like to order.</p>
</div>
</div>
</div>
</div>
</form>
</div>
I am trying to center a form in the center of the page, but everytime I center the col, the contents get pushed to the left side of that col. I want the form to be the full width of the col-md-6 and that col centered in the middle of the page.
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div class="col-md-2">Your Name:</div>
<div class="col-md-4">
<input type="text" name="uname" class="form-control" required="" placeholder="Your Name">
</div>
</div>
<div class="row">
<div class="col-md-2">Your Email:</div>
<div class="col-md-4">
<input type="email" name="email" class="form-control" required="" placeholder="Email Address">
</div>
</div>
<div class="row">
<div class="col-md-2">Your Company:</div>
<div class="col-md-4">
<input type="text" name="company" class="form-control" required="" placeholder="Company Name">
</div>
</div>
<div class="row">
<div class="col-md-2">Your Contact:</div>
<div class="col-md-4">
<input type="email" name="contactemail" class="form-control" required="" placeholder="Email Address">
</div>
</div>
<div class="row">
<div class="col-md-2">Choose file(s):</div>
<div class="col-md-4">
<input name="files" type="file" id="files" multiple="multiple" class="form-control" required="">
</div>
</div>
<div class="row">
<div class="col-md-2">
<h5></h5>
</div>
<div class="col-md-4">
<input id="sbmtBtn" type="submit" name="submit" value="Upload" class="btn btn-primary btn-lg btn-block">
</div>
</div>
http://www.bootply.com/OiRABZIff0
Add col-md-offset-3 before col-md-2.
Have a look at the bootply here
Also not that col should be defined within rows and rows should be encapsulated within container, so I modified the html structure a bit as well.
Change your
<div class="col-md-6 col-md-offset-3">
to
<div class="col-md-7 col-md-offset-4">
I have edited. check out this help you.
http://www.bootply.com/QnYcyyIh2V
I am using ChartJS to place a responsive chart within a div. I am also using bootstrap, so the div class is grid focused (ex. md-9). The chart keeps expanding beyond the div. I was considering overflow: hidden on the div but don't want to lose any data from being shown. Here is a link to my development site. Any assistance is appreciated:
http://investingcalculator.azurewebsites.net
My current HTML code:
<div class="budgetcalcsection">
<div class="row">
<div class="col-sm-3 col-md-2">
<div class="inputtext">
Current Balance
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" id="currentbalance" class="form-control" placeholder="0">
</div>
</div>
<div class="inputtext">
Interest Rate
<div class="input-group">
<span class="input-group-addon">%</span>
<input type="number" id="interestrate" class="form-control" placeholder="0">
</div>
</div>
<div class="inputtext">
Monthly Contributions
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" id="monthlycontribution" class="form-control" placeholder="0">
</div>
</div>
<div class="inputtext">
Years Contributing
<div class="input-group">
<span class="input-group-addon">+</span>
<input type="number" id="yearscontributing" class="form-control" placeholder="0">
</div>
</div>
<div class="">
<input class="btn btn-default" type="submit" id="calculate" value="Calculate">
</div>
<div class="">
<input class="btn btn-default" type="submit" id="reset" value="Reset">
</div>
<div class="inputtext">
Ending Balance
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" id="endingbalance" class="form-control" placeholder="0" readonly>
</div>
</div>
</div>
<!-- Investing Chart -->
<div class="col-sm-9 col-md-10">
<canvas id="canvas"></canvas>
</div>
</div>
</div>
The problem stems from the fact that ChartJS doesn't take into account that the display-box on your elements is border-box. It is sizing the chart to the full width of the div without taking into account the padding.
In order to fix it, just put a div without any bootstrap column classes inside your column and target that with ChartJS.
I'm trying to have on the same line: text, search box and the button "Locate", but the following code seems not working because what I get is: the text "Map for network..." aligned with the input box while the "Locate" button is below the input box. Any suggestion?
<div style="border-color:#FCD229; margin-bottom:0px" class="panel panel-primary">
<!-- Default panel contents -->
<div style="border-color:#FCD229; background-color:#FCD229"class="panel-heading">
<div class="input-group">
<label class="control-label col-lg-8">Map for Network<p class="badge"><?php echo $net_name ?></p></label>
<div class="form-horizontal col-lg-4">
<input id="marker_id" name="address" class="form-control input-sm" type="text" placeholder="node name..">
<span class="input-group-btn">
<button type="submit" class="btn btn-default btn-sm">Locate</button>
</span>
</div>
</div>
</div>
</div>
JSFiddle "Answer"
To cut to the chase - you can look at the result of my tests on JSFiddle: http://jsfiddle.net/eThej/. NOTE - Bootstrap is responsive so you need to make the window with the preview large enough or the controls will wrap to the next line. This is intentional to allow for forms to work on smaller screens (responsive design).
Explanation / Notes
I believe the following example (pulled from the bootstrap site) does something like what you are looking for:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
I took your code and applied a few changes to it and got a similar result. First - you are looking for a form with a class of "form-inline". Second, if you are using a column layout I think you probably want "md" columns and not "lg" columns. Finally I think you div's aren't nested correctly. It isn't pretty but I applied these few changes and got much closer to what I think you want. The following is that result:
<div style="border-color:#FCD229; margin-bottom:0px" class="panel panel-primary">
<!-- Default panel contents -->
<div style="border-color:#FCD229; background-color:#FCD229" class="panel-heading">
<form class="form-inline">
<div class="col-md-4">
<label class="control-label">Map for Network</label>
<p class="badge">Test</p>
</div>
<div class="col-md-8">
<div class="form-group"><input id="marker_id" name="address" class="form-control input-sm"
type="text" placeholder="node name.." />
</div>
<button type="submit" class="btn btn-default">Locate</button>
</div>
</form>
</div>
</div>
Again, not a perfect answer but I think it should get you on the right track. Best of luck!
This code seems to be more suitable for what I had in mind.
<div style="border-color:#FCD229; margin-bottom:0px" class="panel panel-primary">
<!-- Default panel contents -->
<div style="border-color:#FCD229; background-color:#FCD229"class="panel-heading">
<label class="control-label col-lg-8">Map for Network Test</label>
<div class="input-group input-group-sm">
<input id="" type="text" class="form-control" placeholder="Node Name">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Locate</button>
</span>
</div><!-- /input-group -->
</div>
</div>