I am looking to create a simple signup form, but for some reason with my code the input does not adapt to bootstraps form-control-lg class so it will not match the size of my button when I am using default bootstrap CSS, can anyone help?
<div class="container">
<form class="form-inline">
<div class="form-group">
<div class="row col-md-5">
<input class="form-control form-control-lg" type="url" placeholder="Your Site URL">
</div>
</div>
<button type="submit" class="btn btn-success btn-lg" id="urlInput">TRY IT NOW</button>
</form>
</div>
Try adding the input-lg class to your input
<input class="form-control input-lg" type="url" placeholder="Your Site URL">
You can try using form-group-lg on the parent div instead
<div class="form-group form-group-lg">
<div class="row col-md-5">
<input class="form-control" type="url" placeholder="Your Site URL">
</div>
</div>
Related
I started bootstrap very recently. I want to create email/ password validation in one row on my rails app:
email? | password? | OK
Right now, I have a code working for just an email and OK button in one row:
email? | OK
<div class="col-lg-12 text-center v-center">
...
<form class="col-lg-12">
<div class="input-group input-group-lg col-sm-offset-4 col-sm-4">
<input type="text" class="center-block form-control input-lg" title="Enter your email." placeholder="email?">
<span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button">OK</button></span>
</div>
</form>
</div>
and
.v-center {
margin-top:7%;
}
I tried adding a password on the code above:
...
<div class="input-group input-group-lg col-sm-offset-4 col-sm-4">
<input type="text" class="center-block form-control input-lg" title="Enter your email." placeholder="email">
<input type="text" class="center-block form-control input-lg" title="Enter your password." placeholder="password">
<span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button">OK</button></span>
...
But it ended up looking like this:
email?
| OK
password?
What is missing?
It looks like bootstrap's .center-block has display: block; in it. If you want elements to appear side-by-side, they generally need a display of inline or inline-block in the css (there are a few other ways, but both those are arguably the most common/simplest).
Here is code for this: The trick is to use "form-inline" class in the form tag
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
My form looks great with Twitter Bootstrap 3 but I don't want it to look like this:
And more like this:
I was able to make my button group on another page do this with btn-group-vertical btn-group-lg btn-block class. But I didn't yet find anything that does the same with form controls in Bootstrap 3.
My form code:
<!-- login form box -->
<form name="loginform" method="post" action="index.php" role="form">
<div class="form-group col-lg-3">
<label for="login_input_username" class="sr-only">Username</label>
<input type="text" id="login_input_username" name="user_name" class="form-control input-lg" placeholder="Enter username" required />
</div>
<div class="form-group col-lg-3">
<label for="login_input_password" class="sr-only">Password</label>
<input type="password" id="login_input_password" name="user_password" class="form-control input-lg" class="form_control" placeholder="Enter password" autocomplete="off" required />
</div>
<div class="form-group col-lg-3">
<button type="submit" name="login" class="btn btn-block btn-success btn-lg"><span class="glyphicon glyphicon-log-in"></span> Login</button>
</div>
<div class="form-group col-lg-3">
// here I display the alert box
</div>
</form>
You are wrapping your form fields in a col-lg-3, making them only 3 columns wide. Remove that class from the .form-group div.
That will make them stretch to the size of the form.
BaddieProgrammer, I have set up a Fiddle here to view two options and how they will look.
Both do what you are wanting here to stretch the form across the screen.
The green container has full width all bar the lg size.
The blue container uses Bootstrap classes to give you more control and a better look when viewed on all screen sizes.
Hope the top option will give you a better idea for how Bootstrap can work here for you.
Here is the normal size Fiddle so you can look through the code.
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 bg-primary block">
<!-- login form box -->
<form name="loginform" method="post" action="index.php" role="form">
<div class="form-group col-lg-12">
<label for="login_input_username" class="sr-only">Username</label>
<input type="text" id="login_input_username" name="user_name" class="form-control input-lg" placeholder="Enter username" required />
</div>
<div class="form-group col-lg-12">
<label for="login_input_password" class="sr-only">Password</label>
<input type="password" id="login_input_password" name="user_password" class="form-control input-lg" class="form_control" placeholder="Enter password" autocomplete="off" required />
</div>
<div class="form-group col-lg-12">
<button type="submit" name="login" class="btn btn-block btn-success btn-lg"><span class="glyphicon glyphicon-log-in"></span> Login</button>
</div>
<div class="form-group col-lg-12">
<!-- here I display the alert box -->
</div>
</form>
</div>
I would suggest instead of using the classes "form-group col-lg-3",
use this class "form-group col-lg-12". It should then fill the entire grid width.
This is my code: http://www.bootply.com/iR1SvOyEGH
<form>
<div class="form-group">
<label for="inputEmail">Company Name</label>
<input type="text" class="form-control">
<span class="input-group-addon">.test.com</span>
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Update</button>
</form>
My understanding is the input-group-addon should sit inline with the input box and be to the right but instead it sits below the input box taking up 100% width.
Can anyone please tell me where I have gone wrong.
The Bootstrap documentation states that the input-group-addon class must be used within a input-group, while you are using a form-group.
<form>
<label for="inputEmail">Company Name</label>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.test.com</span>
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Update</button>
</form>
See this for a demo: http://jsfiddle.net/TLtQU/3/
EDIT: The input-group should not include the label, the label should be outside of the input-group for proper results.
I want to align TextBox which will be used as Searchbox and button.
Problem is when I use inline form class on div the textbox is loosing its width.
<div class="col-lg-6">
<input type="text" id="test" name="city" class="form-control input-lg" placeholder="E.g. Manchester">
<div class="form-inline">
<div class="form-group ">
<input type="text" id="city" name="city" class="form-control input-lg" placeholder="E.g. Manchester">
<input type="button" value="Search" class="form-control btn-lg"/>
</div>
</div>
</div>
what I'm missing here..
here is a good solution for you:
Screenshot:
Code:
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="E.g. Manchester" />
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="E.g. Manchester" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
Result:
http://jsfiddle.net/j9EdZ/
You might be best using the col-md-* values here, e.g.:
<div class='col-lg-6'>
<form class='form'>
<div class='row'>
<div class='form-group'>
<div class='col-md-10'>
<input class='form-control input-lg' type='text' placeholder='E.g. Manchester'>
</div>
<div class='col-md-2'>
<input type='button' class='form-control btn btn-block' value='Search'>
</div>
</div>
</div>
</form>
</div>
Text-box is not loosing its width you can check here.
CODE : http://jsfiddle.net/Jaysinh/awYm3/
As per the Bootstrap documentation of Form you have to set the width of the element. Default is 100 % wide.
Requires custom widths
Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
Here, check this out.
Demo
HTML
<div class="col-lg-6">
<form class="form-horizontal" role="form">
<div class="form-group">
<input type="text" id="test" name="city" class="form-control input-lg" placeholder="E.g. Manchester" />
</div>
<div class="form-inline">
<div class="form-group ">
<input type="text" id="city" name="city" class="form-control input-lg" placeholder="E.g. Manchester" />
<input type="button" value="Search" class=" btn btn-lg btn-default" />
</div>
<div class="form-group "></div>
</div>
</form>
</div>
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>