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>
Related
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>
I am trying to layout a form in a panel and have a lot of trouble with the formatting.
I don't seem to be able to put a line break between the Save button and the E-mail label. I have tried moving it down using <p> tags. I have tried using form-inline and form-horizontal but only makes things worse.
Alternatively I would like to place the Save button directly next to the textbox but again can't seem to achieve this.
A jsfiddle for an example https://jsfiddle.net/omyuzuu3/.
<div class="col-sm-4" id="leftCol">
<div class="panel panel-default">
<div class="panel-body">
<strong>Account Details</strong><p>
<hr>
<form class="form" method="post" >
<div class="form-group">
<label for="exampleInputName2">Username</label><p>
<input name="txtUsername" type="text" class="form-control" placeholder="<?php echo $user->loadUser()->username; ?>">
</div>
<div class="form-group">
<button type="submit" name="btnSaveUsername" class="btn btn-primary btn-sm pull-right">Save</button>
<p>
</div>
<div class="form-group">
<p>
<label for="exampleInputName2">E-mail</label><p>
<input name="txtEmail" type="text" class="form-control" placeholder="<?php echo $user->loadUser()->email; ?>">
</div>
<div class="form-group">
<button type="submit" name="btnSaveEmail" class="btn btn-primary btn-sm pull-right">Save</button>
</div>
</form>
</div>
</div>
</div>
you use float:right on the save button.
Float element is out of the normal flow, so its container's height does not account for the floating element
screenshot: https://i.imgur.com/xdvP23p.png
Add the clearfix property to floating element's container would fix the issue
screenshot: https://i.imgur.com/HiNC61Q.png
Bootstrap already contains .clearfix class for adding clearfix css properties
What is clearfix ?
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/
Here is my bootstrap code
<div class="input-append" align="center">
<input type="text" name="q" class="span2 search-query" placeholder="Snipp or Tag"
/>
<button type="submit" class="btn">Search</button>
<button class="btn btn-primary active"><i class="icon-white icon-plus"></i> plus</button>
<button class="btn btn-primary active"><i class="icon-white icon-bullhorn"></i> Goto</button>
</div>
And here is a jsfiddle
How give top-padding and how to give some space in between the buttons and move the plus and goto button to right side
add another div for those 2 buttons and give float:right
And for gap between them give margin
button{margin-right:6px}
DEMO UPDATED
if you want to float right you use the built in class "pull-right"
<div class="pull-right">...</div>
and for search more looking one will be
<form class="form-search">
<div class="input-append" >
<input type="text" class="span2 search-query input-large" placeholder="search posts,users..">
<button type="submit" class="btn"><i class="icon-search"></i></button>
</div>
and for keeping distance you can use margin
margin:10px