For example I've made my button
<div class="btn btn-default">
Active
</div>
and it looks like the following
However I would like to have my button like this
How can I enlarge the width of the bootstrap button regardless of text size?
This question is related to
html
css
twitter-bootstrap
twitter-bootstrap-3
Use block level buttons, those that span the full width of a parent
You can achieve this by adding btn-block
class your button element.
Documentation here
You can add your own css property for button size as follows:
.btn {
min-width: 250px;
}
Just simply add to the class of the bootstrap code.
.login
{
width: 20%;
margin-top: 39.5%;
margin-left: 35%;
}
_x000D_
<button type="button" class="btn btn-outline-dark btn-lg login">Login</button>
_x000D_
bootstrap comes with clas btn-lg http://getbootstrap.com/components/#btn-dropdowns-sizing
<div class="btn btn-default btn-block">
Active
</div>
but if you want to have the button of the width of your column / container add btn-block
<div class="btn btn-default btn-lg">
Active
</div>
However this will expand to 100% so make surt ethat you will wrap your button in certain amount of columns e.g. then you know its always stays 3 columns until xs screen
<div class="col-sm-3">
<div class="btn btn-default btn-block">
Active
</div>
</div>
You can use btn-lg
, btn-sm
and btn-xs
classes for manipulating with its size.
btn-block
Also, there is a class btn-block
which will extend your button to the whole block. It is very convenient in combination with Bootstrap grid.
For example, this code will show a button with the width equal to half of screen for medium and large screens; and will show a full-width button for small screens:
<div class="container">
<div class="col-xs-12 col-xs-offset-0 col-sm-offset-3 col-sm-6">
<button class="btn btn-group">Click me!</button>
</div>
</div>
Check this JSFiddle out. Try to resize frame.
If it is not enough, you can easily create your custom class.
Source: Stackoverflow.com