Making Button Go Full-Width

Make a button fill the full width of container element?

Add the "box-sizing: border-box" property to all elements. The width and height properties include the padding and border, but not the margin. This will ensure your measurements across elements are correct and take into account the padding. display: block and width: 100% is the correct way to go full width but you need to remove the left/right margin on the button as it pushes it outside the containing element.

* {
    box-sizing: border-box
} 

.container {
    background-color: #ddd;
    padding: 10px;
    margin: 0 auto;
    max-width: 500px;
}

.button {
    background-color: #bbb;
    display: block;
    margin: 10px 0;
    padding: 10px;
    width: 100%;
}

for more information on the box-sizing property, read the MDN docs.

Prevent button from taking up the full width of its container

Try using width: auto;

const SmallButton = styled(StyledButton)`
  display: inline-flex;
  flex-grow: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
  border-radius: 16px;
  height: 28px;
  min-width: 50px;
  width: auto;
  padding: 0 16px;
`

This should wrap to the text only.

Make buttons take the full width of that row and split it evenly

There are multiple ways to skin this cat.

The bootstrap way:

This solution uses the built-in bootstrap grid system to accomplish the result you're looking for.
Remove the inline styling from your container div and replace it with bootstrap's row class. Then wrap each contained button inside divs with the class col-lg-6.

<div class="row">
  <div class="col-lg-6">
    <button onclick="updateLog('8014', '' )" class="btn btn-option btn-solidfood">lt;/button>
  </div>
  <div class="col-lg-6">
    <button onclick="updateLog('8014', ''  )" class="btn btn-option btn-solidfood">lt;/button>
  </div>
</div>

Result:

It looks clean require no additional css or overrides. However you are stuck with the bootstrap default column gap between buttons which may not be desirable.

Incidentally, if at all possible, I highly recommend upgrading to bootstrap 4 instead of 3, as it's much more flexible to tweaking this kind of thing without having to resort to writing more css.

Custom CSS way:

If you want more control over the gap between the buttons, bootstrap may not be your best bet.

This is similar to the solution above from Cervus Camelopardalis and uses the :first-child and :last-child pseudo-classes.

Remove the inline style from the container element and instead give it a descriptive class name. I chose "double-btn" but use whatever makes the most sense to you.

HTML:

<div class="double-btn">
  <button onclick="updateLog('7997', '' )" class="btn btn-option btn-solidfood">lt;/button>
  <button onclick="updateLog('7997', ''  )" class="btn btn-option btn-solidfood">lt;/button>
</div>

In your CSS, add a rule for this class to set display: flex.
Then add another rule targeting any .btn's that are children of this class, removing the default bootstrap margin.
Then add one last set of rules targeting the :first-child and :last-child pseudo-classes of those .btns, setting the margin-right and margin-left to half of your desired gap, respectively. I chose a ten pixel gap here, but with this approach you can change it whatever looks best to you.

CSS:

.double-btn {
  display: flex;
}
.double-btn .btn {
  margin: 0;
}
.double-btn .btn:first-child {
  margin-right: 5px;
}
.double-btn .btn:last-child {
  margin-left: 5px;
}

Result:

From here, you can adjust the above margin-right and margin-left values to change the size of the gap between buttons.

how to make buttons extend to full width in mobile view while not end pc using bootstrap?

Add this class mobile to label(Menu list) & a tag(Sub,Reg).

@media (max-width: 800px) {
.mobile {
display: flex;
flex-direction: column;
align-items: center;
}
}

This will make them vertical when screen-width<=800px, change the vaue if you need to.

Make a button fill the whole width and (!) extend its container's size

Testing on Firefox 42 (which seems to be the only browser currently exhibiting this issue), my suggestion is to use min-width rather than width.

So in your example, change this declaration block should work:

div.btn1 button { min-width: 100% }

Here's an updated JSFiddle to demonstrate. Hope this helps! Let me know if you have any questions.

Why Bootstrap btn needs width:100% to make bootstrap button go full width? shoudn't display:block; make button full width by default?

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

---

Related Topics