I'm trying to expand the submit button so that it is the size of the password field. I am using the code btn-block but it's not working.
<div class="container">
<div class="row" style="margin-top:60px;">
<div class="col-md-4 col-md-offset-4">
<div class="span12" style="text-align:center; margin: 0 auto;">
<form class="form-horizontal" style="width: 400px; margin: 0 auto;" method="post">
<fieldset>
<h3 style="color:dimgray;" class="sign-up-title">
Bem-vindo de volta! Efetue seu login
</h3>
<hr class="colorgraph">
<legend>
Efetue seu login
</legend>
<div style='display:none'>
<input type='hidden' name='csrfmiddlewaretoken' value='ImQqDNXbmiVQKGo3OsZlrepAzwfAu70B' />
</div>
<tr>
<th>
<label for="id_username">
Usuário:
</label>
</th>
<td>
<input id="id_username" type="text" name="username" maxlength="30" />
</td>
</tr>
<tr>
<th>
<label for="id_password">
Senha:
</label>
</th>
<td>
<input type="password" name="password" id="id_password" />
</td>
</tr>
<div class="buttonHolder">
<input type="submit" value="Entrar" class="btn btn-large btn-success btn-block" id="submit-login"/>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
In Bootstrap 5.0.x, btn-block is depreciated, and to get a full width button you can use a grid system and use col-12 in the button class.
you can check out the documentation from bootstrap documentation page
People from google, just add w-100 to your button to make it full width (the way btn-block used to work):
<button type="submit" class="btn btn-primary w-100">Login</button>
Works once you add w-100 to the button class.
<button type="submit" class="btn btn-primary w-100">Login</button>
Why not follow the official documentation of Bootstrap 5
Just add d-grid class in outer div
d-grid
Full syntax
<div class="row mb-3">
<div class="d-grid">
<button class="btn btn-primary">Submit</button>
</div>
</div>
The btn-block class is a combination of display: block and width: 100%, so we must use the d-block w-100 classes. Of course, if it is necessary to use display: block, otherwise w-100 is enough
<div class="buttonHolder">
<input type="submit" value="Entrar" class="btn btn-large btn-success w-100 d-block" id="submit-login"/>
</div>
Use "col-12" or use "w-100". Both will work at making a button full width relative to it's container.
I had the same problem but my btn-block wasn't working within a modal.
This was because the button was in bootstrap 4's footer. Once I moved it to the modal's body, it worked just fine. I hope this might help someone.
try to use w-100 inside class
like that <button type="submit" class="btn btn-primary w-100">Login</button>
set the display value to inline-block and it should work.
I had the same Issue where btn-block was not working in bootstrap 4, in a modal-body.
the Issue was that it was inside in a column <div class="col-xs-12"> and that parent element was not filling the expected 100%. The fix was to replace the col-xs-12 with col so the parent looks like this after the fix <div class="col-xs-12">.
The root cause is that the styling is using flexbox.
To have better understanding see the documentation for bootstrap 4 here... Bootstrap 4 Grid Documentation
For the solution of the above, you should add the col class to the buttonHolder or replace buttonHolder with col completely
btn-block refer to their parent( div with class="buttonHolder"), which their size fit with "Entrar" word.
<div class="buttonHolder">
<input type="submit" value="Entrar" class="btn btn-large btn-success btn-block" id="submit-login"/>
</div>
So, delete their div (div with class="buttonHolder") and Button with btn-block can have same size with the password field.
You can use the .col-bg-12 class and it will work the same as block.
I had this same problem but using this solved it so hopefully it will be helpful to you too.
The simple method will be just give col-12 to the btn class
U can use class=btn h-100, class=btn col-12 or in div tag d-grid``
You can use this method in Bootstrap version 5
<div class="w-100">
<button class="btn btn-primary w-100" type="button">Button</button>
</div>
just add col-12 to the class.
btn-block doesn't work with bootstrap5
Or maybe try the following:
Confirm
Related
I was experimenting with my newly acquired knowledge of Vue and Bootstrap when I ran on a behaviour that I couldn't explain.
<div class="col-sm-4" class="text-center">
<p v-html="mensagem"></p>
<button v-for="tipo in tiposJogadas" class="btn btn-primary" #click="escolhe(tipo)">{{ tipo }}</button>
<div class = "row">
<div class = "column-sm-12" class="text-center">
<button class="btn btn-danger" #click="reset()">Reiniciar</button>
</div>
</div>
</div>
Renders three buttons on glued on the other. Whileas if I replace the v-for statement for three button statements like this:
<div class="col-sm-4" class="text-center">
<p v-html="mensagem"></p>
<button class="btn btn-primary" #click="escolhe('pedra')">Pedra</button>
<button class="btn btn-primary" #click="escolhe('papel')">Papel</button>
<button class="btn btn-primary" #click="escolhe('tesoura')">Tesoura</button>
<div class = "row">
<div class = "column-sm-12" class="text-center">
<button class="btn btn-danger" #click="reset()">Reiniciar</button>
</div>
</div>
</div>
It renders everything perfectly. I don't understand why, since when I inspect the final elements in both scenarios they are the same.
I wasn't gonna ask, but I also couldn't manage to center the red reset button. Since I'm already asking a question, it'd be nice to know why what I've tried doesn't work as well.
Because the line returns in the HTML are adding whitespace between the buttons. v-for isn't. v-for is rendering the same as...
<div class="col-sm-4">
<p v-html="mensagem"></p>
<button class="btn btn-primary" #click="escolhe('pedra')">Pedra</button><button class="btn btn-primary" #click="escolhe('papel')">Papel</button><button class="btn btn-primary" #click="escolhe('tesoura')">Tesoura</button>
<div class="row">
<div class="column-sm-12">
<button class="btn btn-danger" #click="reset()">Reiniciar</button>
</div>
</div>
</div>
You could add a margin-right (mr-1) to each button...
<button v-for="tipo in tiposJogadas" class="btn btn-primary mr-1" #click="escolhe(tipo)">{{ tipo }}</button>
https://www.codeply.com/go/pXOPYAA8St
I'm trying to implement input field with additional options similar to gmail search box. You can see it on the screenshots below.
When you click on a caret sign then additional form is shown up:
Currently, I'm struggling with making a nice looking form shown after clicking on the caret sign. Anyone knows how to achieve that with Bootstrap?
Here is a jsfiddle link:
https://jsfiddle.net/x1sfs9xb/1/
<div class="container">
<div class="row">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<form action="#" class="form-horizontal">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-3 control-label" for="name">Input 1</label>
<div class="col-sm-9">
<input class="form-control" id="name" name="input1" type="text" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-3 control-label" for="name">Input2</label>
<div class="col-sm-9">
<input class="form-control" id="name" name="input2" type="text" />
</div>
</div>
</div>
</div>
<p>
<input class="btn action-button pull-right" name="commit" type="submit" value="Save">
</p>
</form>
</li>
</ul>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</div><div class="row">
<div class="col-md-12">
<h1>Some content</h1>
</div>
</div>
</div>
You can achieve that by using a little CSS and JS:
CSS (your dropdown menu is relative to input-group-btn so you have to change position of that to static - now your dropdown menu is related to the input-group):
.input-group-btn {
position: static;
}
.dropdown-menu {
left: 0;
}
JS (get width of the input and assign it to your dropdown menu, also change it on browser resize):
var inputWidth = $('.form-control').outerWidth();
$('.dropdown-menu').css('width', inputWidth);
$(window).resize(function () {
inputWidth = $('.form-control').outerWidth();
$('.dropdown-menu').css('width', inputWidth);
});
JSFIDDLE
I want to create somthing that in bootsrap:
[colorpicker | input box | button] [toggle button]
I have used:
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Send</button>
<button class="btn btn-default">Users</button>
</span>
</div>
However, I don't know what colorPicker for bootstrap I should use (only 9 colors pickers) and how to add it on left side.
Any help is welcome.
Fiddle: http://jsfiddle.net/5B5v5/
Since I think you're saying you want a color picker with just 9 color options, I would go with a dropdown instead of a fully baked color-picker plugin... like so:
<div class="form-inline">
<div class="input-group">
<div class="input-group-btn">
<!-- COLOR PICKER -->
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><span style="color:cyan" class="glyphicon glyphicon-tint"></span> Cyan</li>
<li><span style="color:blue" class="glyphicon glyphicon-tint"></span> Blue</li>
<li><span style="color:magenta" class="glyphicon glyphicon-tint"></span> Magenta</li>
<li>...more...</li>
</ul>
<!-- END COLOR PICKER -->
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div>
<button class="btn btn-primary" type="button">Send</button>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-user"></span></button>
</div>
</div>
DEMO: http://www.bootply.com/ecziRvg9Jg
If you do find a true color picker that lets you do 9 colors only, attach it to the button I commented in the code.
Weird issue. When the button that launches the modal window is located inside the form div, the modal window fails to launch. Chrome says
"Resource interpreted as Script but transferred with MIME type text/x-js:"
I already put a type for the source js but it didnt help. I also moved the call to earlier on in the page and that didnt work. The really weird part is, if I move the button outside of the form div, the modal opens just fine with no issue. Has anyone experienced this and can point me in the right direction. Thanks in advance
Edit: Here is the code(I cut out the content)
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<label for="companyName">Company Name</label>
<input type="text" class="form-control" id="companyName" placeholder="Company Name">
</div>
<div class="form-group">
<label for="chainCode">Chain Code</label>
<input type="text" class="form-control" id="chainCode" placeholder="Chain Code">
</div>
<div class="form-group">
<label for="nCode">N-Code</label>
<input type="text" class="form-control" id="nCode" placeholder="N-Code">
</div>
<button type="submit" class="btn btn-success">Search</button>
<button class="btn btn-warning" data-toggle="modal" data-target="#advancedModal"> Advanced
<span class="glyphicon glyphicon-cog"></span>
</button>
</form>
<!-- Advanced Modal -->
<div class="modal fade" id="advancedModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Advanced Options</h4>
</div>
<div class="modal-body">
<form role="form" id="myForm" method="post">
<div class="form-group">
</form><!-- end advanced form -->
</div><!-- end modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data- dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div><!-- end modal-footer -->
</div><!-- end modal content -->
</div><!-- end modal dialog large -->
</div><!-- end Advanced Modal -->
</div><!-- End Form Container -->
somehow it seems to me, that bootstrap gets confused with the button in the form somehow.
so try using
<a class="btn btn-warning" data-toggle="modal" data-target="#advancedModal">
Advanced <span class="glyphicon glyphicon-cog"></span>
</a>
instead of
<button class="btn btn-warning" data-toggle="modal" data-target="#advancedModal">
Advanced <span class="glyphicon glyphicon-cog"></span>
</button>
It should work, and looks just the same.
I am trying to create a search form, something like below..
http://tinypic.com/r/2py0scy/8
I am new to front end development and confused if an in-line form or a input group should be used?
The issue with inline forms is I am unable to size the input box (width) so any pointer there would also be really helpful.
Thanks!
Code Update
from home.HTML
<form class="form-inline" role="form">
<input class="form-control input-lg" type="text" placeholder="Discover">
<button type="button" class="btn btn-danger btn-lg">Go</button>
</form>
from the layouts - application.html.erb
<div class="container">
<%= yield %>
</div>
To play with the width in Bootstrap, see the grid system and the use the columns:
For instance, if you want a form on the right and the width at the 50% of the container, you can do:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6">
This is div on the left
</div>
<div class="col-xs-12 col-md-6">
<form class="form-inline" role="form">
<input class="form-control input-lg" type="text" placeholder="Discover">
<button type="button" class="btn btn-danger btn-lg">Go</button>
</form>
</div>
</div>
</div>
The previous code, is designed to change the behavior on small devices.
You can use both depending on what you're trying to accomplish. Bootstrap is well-documented, did you read their documentation regarding forms ? http://getbootstrap.com/css/#forms
By default input items are 100% width in bootstrap (e.g. they fill the containing element they are in). For instance:
<input type="text" class="form-control" placeholder="Text input">
would result in a 100% width input field and
<style>
.smallwidth {max-width: 200px;}
</style>
<div class='smallwidth'><input type="text" class="form-control" placeholder="Text input"></div>
would result in a 200px width input field, because it is restricted by the outer div I put around it.