2

I can work this around, but I feel I don't understand something entirely. I'm used that whenever you apply display:block; to an element it will automatically go full width. However, when I apply d-block class to bootstrap 4 button (.btn) it does not go full width unless I add width:100%; css property or .w-100 class.

I know that .btn-block class allows to make button full width, but this is not ideal, when you only want your button to be full width on certain breakpoint.

EDIT:

For those who asked for code: https://codepen.io/samaxe/pen/LYERYxq

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Sam Axe
  • 437
  • 1
  • 8
  • 25
  • 1
    Please post your code. It's hard to know why without knowing what the button is contained in – Carol Skelly Dec 12 '19 at 18:39
  • 1
    There must be some other CSS which is causing this... `` is full width using bootstrap-4 – Akber Iqbal Dec 12 '19 at 21:59
  • @Zim see edit, added code pen – Sam Axe Dec 13 '19 at 13:57
  • 1
    I don't think this is a Bootstrap issue. This is how button (and input, select, etc...) behave as explained here: https://stackoverflow.com/questions/4567988/what-is-it-in-the-css-dom-that-prevents-an-input-box-with-display-block-from-ex – Carol Skelly Dec 13 '19 at 14:12

1 Answers1

3

As explained here buttons (like input, select, image, etc...) have intrinsic sizing from the element itself.

But, if you wanted to make the Button width responsive without using the grid columns, you can put it inside a flexbox container.

For example, here's 100% width on medium and down (auto width on lg and up)...

   <div class="p-5 d-flex">
        <button type="button" class="btn btn-primary flex-grow-1 flex-lg-grow-0">button</button>
   </div>

Codeply demo

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624