How can I increase the size of a bootstrap button

Question

For example I ve made my button   lt div class  btn btn-default  gt    Active  lt  div gt    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

User · Answer

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

User · Answer

bootstrap comes with clas btn-lg http   getbootstrap com components  btn-dropdowns-sizing   lt div class  btn btn-default btn-block  gt    Active  lt  div gt    but if you want to have the button of the width of your column   container add btn-block   lt div class  btn btn-default btn-lg  gt        Active      lt  div gt    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   lt div class  col-sm-3  gt                lt div class  btn btn-default btn-block  gt            Active              lt  div gt           lt  div gt

User · Answer

Default Bootstrap size classes  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    lt div class  container  gt       lt div class  col-xs-12 col-xs-offset-0 col-sm-offset-3 col-sm-6  gt           lt button class  btn btn-group  gt Click me  lt  button gt       lt  div gt   lt  div gt    Check this JSFiddle out  Try to resize frame   If it is not enough  you can easily create your custom class

User · Answer

You can add your own css property for button size as follows   btn       min-width  250px

User · Answer

Just simply add to the class of the bootstrap code   x000D   x000D   login   width  20   margin-top  39 5   margin-left  35     x000D   lt button type  button  class  btn btn-outline-dark btn-lg login  gt Login lt  button gt   x000D   x000D   x000D

User · Answer

You can try to use btn-sm  btn-xs and btn-lg classes like this    btn-xl       padding  10px 20px      font-size  20px      border-radius  10px      JSFIDDLE DEMO  You can make use of Bootstrap  btn-group-justified css class  Or you can simply add    btn-xl       padding  10px 20px      font-size  20px      border-radius  10px      width 50        Specify your width here     JSFIDDLE DEMO

[html] How can I increase the size of a bootstrap button?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3