Making button go full-width

Question

I want a button to take up the full width of the column  but having difficulties      lt div class  span9 btn-block  gt       lt button class  btn btn-large btn-block btn-primary  type  button  gt Block level button lt  button gt   lt  div gt    How do I make the button as wide as the column

User · Answer

I would have thought this would be the most bootstrap-esque way of doing things:

<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>

All I'm doing is adding the class col-xs-12 to the button.

User · Answer

I simply used this    lt div class  col-md-4 col-sm-4 col-xs-4  gt   lt button type  button  class  btn btn-primary btn-block  gt Sign In lt  button gt   lt  div gt

User · Answer

Why not use the Bootstrap predefined class input-block-level that does the job    lt a href     class  btn input-block-level  gt Full-Width Button lt  a gt   lt  -- BS2 -- gt   lt a href     class  btn form-control  gt Full-Width Button lt  a gt   lt  -- BS3 -- gt    lt  -- And let s join both for BS     -- gt   lt a href     class  btn input-block-level form-control  gt Full-Width Button lt  a gt    Learn more here in the Control Sizing  section

User · Answer

Bootstrap v3  amp  v4  Use btn-block class on your button element  Bootstrap v2  Use input-block-level class on your button element

User · Answer

In Bootstrap 5  the class btn-block doesn t work anymore  But instead  you can add the class w-100 to the button to make it as wide as its container   x000D   x000D   lt script src  https   cdn jsdelivr net npm bootstrap 5 0 0-beta2 dist js bootstrap bundle min js  gt  lt  script gt   lt link href  https   cdn jsdelivr net npm bootstrap 5 0 0-beta2 dist css bootstrap min css  rel  stylesheet    gt    lt div class  row  gt  lt div class   col-5   gt               lt a class  btn btn-outline-primary w-100    href      gt  lt span gt Button 1 lt  span gt  lt  a gt    lt  div gt  lt div class  col-5   gt                lt a class   btn btn-primary w-100 weiss   href      gt  lt span gt Button 2 lt  span gt  lt  a gt    lt  div gt  lt  div gt  x000D   x000D   x000D

User · Answer

You should add these styles to a CSS sheet  div  no-padding     padding 0     button  full-width    width 100       display block    only if you re having issues     Then change add the classes to your code   lt div class  span9 btn-block no-padding  gt       lt button class  btn btn-large btn-block btn-primary full-width  type  button  gt Block level button lt  button gt   lt  div gt    I haven t tested this and I m not 100  sure what you want  but I think this will get you close

User · Answer

The question was raised years ago  with the older version it was a little hard to get   but now this question has a very easy answer   lt div class  quot btn btn-outline-primary btn-block quot  gt Button text here lt  div gt

User · Answer

use    lt div class  btn-group btn-group-justified  gt         lt  div gt    but it only works for  lt a gt  elements and not  lt button gt  elements   see  http   getbootstrap com components  btn-groups-justified

User · Answer

lt div class  col-md-9  gt       lt button class  btn btn-block btn-primary  type  button  gt Block level button lt  button gt   lt  div gt    In Bootstrap 3  this should be all you need  I believe btn-large was overriding the width of btn-block

User · Answer

The width of the button is defined by the button text  So if you want to define the width of the button you can use a defined width by using pixel in the css or if you want to by responsive use a percentage value

User · Answer

Bootstrap   CSS Use col-12  btn-block  w-100  form-control or width 100   x000D   x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 1 3 css bootstrap min css  rel  stylesheet   gt             lt button class  btn btn-success col-12  gt               class  col-12            lt  button gt                 lt button class  btn btn-primary w-100  gt               class  w-100            lt  button gt             lt button class  btn btn-secondary btn-block  gt               class  btn-block            lt  button gt                      lt button class  btn btn-success form-control  gt               class  form-control            lt  button gt                      lt button class  btn btn-danger  style  width 100   gt               style  width 100             lt  button gt  x000D   x000D   x000D

[css] Making button go full-width?

Examples related to css

Examples related to twitter-bootstrap

Examples related to html

Examples related to responsive-design