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 div
s 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
Fixed Element in Transform Translate Container Not Working
What Does The * CSS Operator Do? Are There Any Other CSS Operators
CSS Selector: How to Style Items [1-2][5-6][9-10] etc by Pair
How to Change a Div Padding Without Affecting The Width/Height
Touchmove Pointer-Events: None CSS Doesn't Work on Chrome for Android 4.4/Chromeview
Insert Ruby in HTML Class=" " Property
Bootstrap Jumbotron Under Nav Bar
How to Set This Div to Be The Minimum Possible Width to Display Its Floating Contents
How to Make The UI-Select More Bootstrap
Asp.Net Mvc: How to Use Razor Variable in CSS File
HTML5 Video Background Color Not Matching Background Color of Website - in Some Browsers, Sometimes
CSS Layout That Fills Available Space
How to Use Tick/Checkmark Symbol (✓) Instead of Bullets in Unordered List
Why Is There Excessive Whitespace with Facebook Mobile Comments Plugin
CSS Layout for Footer at Bottom with Dynamic Ajax Content Changing Height of Page