I want to place button beside input text
※ example [input text][button]
And button size should be fixed.
Even though the window size change, button size should be fixed and should be beside input text.
Below is my code.
<div class="form-group row">
<div class="col-sm-2">
<label>...</label>
</div>
<div class="col-sm-8">
<input type="text">
</div>
<div class="col-sm-2">
<button type="button"></button>
</div>
</div>
This code makes button move when window size is small.
And also makes button small, so that unavailable to see value inside button.
I want to know how to code as I expect.
If you want the layout for mobile devices you can use col-xs-2 col-xs-8 col-xs-2 (if you are using bootstrap 3) if you are using bootstrap 4 you can use only col-2 col-8 col-2. But if your screen size is small, grid makes your button small according to your screensize.
As the previous one did not work,
Please try this.
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-append">
<button class="btn btn-success" type="submit">Go</button>
</div>
</div>
hope this one helps.
Here the class i've used is from bootstrap. This will solve your problem
<form style="margin-left: 100px;" >
<div class="form-group">
<label for="uname">Email</label>
<input type="email" class="form-control" name="email" placeholder="Enter your email" style="width: 30%">
</div>
<button type="submit" name="submit" value="Submit" class="btn btn-lg btn-primary btn-block" style="width: 20%;">Log In</button><br>
</form>
Related
I am using Bootstrap 3 and I stuck on some form formatting.
E.g. I want to have 3 inline forms (each with label, text input and button) so they elements (label, text input, button) will be all perfectly matching (in column?)
If you look at this fiddle example you can see, that I almost achieved this by setting col-xs-6 to each form-group. But this makes too big space between input and submit button and also break too soon when resizing (and also when I try to align whole form set to left, everything is broken).
So is there any way to align this form elements instead of this?
<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Keyword weight</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
This fiddle might help you. The entire layout can be put into container and each form can be given a margin and text-align css properties.
And I dont think there is a need for text-right and col-xs-6 to be included, instead you can use container to restrict the max-width and make it more responsive as shown in the fiddle.
Why not just give a width to your label? If you put the three elements into the same column then you can just make the label inline-block and give it a width (you may need to use the full page link in the snippet below to see this working)
.form-group > label {
display: inline-block;
vertical-align: middle;
width: 9em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Keyword weight</label>
<input type="text" class="form-control" id="exampleInputName2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
I use twitter bootstrap and its cover example as the base. I added a few input fields there and would like to have second (email) to be located in the middle (i.e. horizontally aligned). I've tried to add .center-block and .text-center to different div elements, but it didn't help. What should be the solution?
Here is the code:
<p class="lead">Some other text to demonstrate something else</p>
<div class="lead">
<div class="form-group">
<div class="text-center center-text">
<div class="input-group input-group-lg">
<input type="email" class="form-control" id="email">
</div>
</div>
</div>
<button type="button" class="btn btn-lg btn-secondary" id="analyze" data-loading-text="Wait...">Analyze</button>
</div>
and here is the jsfiddle.
remove class input-group like below:
<div class="input-group-lg">
<input type="email" class="form-control" id="email">
http://jsfiddle.net/fwz0w44n/
I have small buttons on either side of a input text box. It displays OK at desktop screen widths. But around 700 pixels all three objects wrap to separate rows. I've tried putting them into a row and column . That only made things worse; didn't display inline even at wide screen widths.
<div class="form-inline">
<div class="row">
<div class="col-xs-9">
<button id="mnBlue" type="button" class="btn btn-warning glyphicon glyphicon-arrow-down"></button>
<div class="form-group">
<label class="sr-only">Blue Quantity</label>
<input class="form-control" id="QuantityEdit_Blue" name="QuantityEdit.Blue" type="number" value="" />
<button id="plBlue" type="button" class="btn btn-success glyphicon glyphicon-arrow-up"></button>
</div>
</div>
</div>
</div>
<div class="form-group form-inline">
<label class="control-label">Quantity</label>
<div class="input-group">
<button id="mnRed" type="button" class="btn btn-warning glyphicon glyphicon-arrow-down"></button>
<input class="form-control" id="QuantityEdit_Red" name="QuantityEdit.Red" type="number" value="" />
<button id="plRed" type="button" class="btn btn-success glyphicon glyphicon-arrow-up"></button>
<span class="field-validation-valid text-danger" data-valmsg-for="QuantityEdit.Red" data-valmsg-replace="true"></span>
</div>
</div>
The top buttons and text box in the linked screen capture shows the display I'm trying to achieve on a mobile phone sized screen. The bottom shows what is happening at mobile screen widths.
Flickr: Example Screen Capture
I have this problem with all the labels/inputs in my code. When my browser is in full screen it works fine, but when I minimize it even a bit, the input field steps over the label.
How do I avoid this?
<form class="form-horizontal">
<div class="form-group">
<label class="col-xs-1 control-label" for="input-username">Username:</label>
<div class="col-xs-4">
<input id="input-username" class="form-control" type="text" placeholder="Username.." />
</div>
</div>
Here's a jsfiddle for an example http://jsfiddle.net/2MdFf/
PS: Same goes for buttons: http://jsfiddle.net/9q949/
<div id="user-edit-buttons" class="form-group">
<div class="col-xs-1">
<button type="button" class="btn btn-danger" onclick="cancelUserEdit()">Avbryt</button>
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-success" onclick="saveUser()">Lagre</button>
</div>
</div>
This is precisely why Bootstrap offers col sizing for multiple screens widths. Your column contents are overflowing their containers due to the sizing of those elements.
<form class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 col-sm-3 col-md-2 col-lg-1 control-label" for="input-username">Username:</label>
<div class="col-xs-4">
<input id="input-username" class="form-control" type="text" placeholder="Username.." />
</div>
</div>
They expect you to use different column sizes to make your elements work well in the different screen sizes.
I have this html:
<button type="submit" class="btn btn-default pull-right" id="loginBtn" >Login</button>
The addition of pull-right makes button cut off from bottom:
How can I fix this?
Make sure it's inside a Bootstrap form-group..
<form class="form col-md-12 center-block">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg pull-right">Login</button>
</div>
</form>
Demo: http://bootply.com/106344
Bootstrap 3 button class "btn" adds display: inline-block, which "Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box" (http://www.w3schools.com/cssref/pr_class_display.asp). A way around this would be to try the class "clearfix" around the parent (as was explained above). You could also try wrapping the button in a div:
<div class="pull-right"><button></button></div>