My code looks like this:
<div class="row">
<div class="col-xs-4">
<a class="btn btn-default btn-block" href="#">1</a>
</div>
<div class="col-xs-4">
<a class="btn btn-default btn-block" href="#">2</a>
</div>
<div class="col-xs-4">
<a class="btn btn-default btn-block" href="#">3</a>
</div>
</div>
This gives me 3 buttons across which is what I want. What I would like to do is make the buttons taller. If at all possible I'd prefer not to specify heights in pixels so that it can scale to different screen sizes better. Could I perhaps specify the height as a ratio (of the width) or a percentage of screen height?
Thanks in advance.
The simple & best solution would be to add top and bottom padding.
.btn-block {
padding: 10% 0;
/* define values in pixels / Percentage or em. whatever suits
your requirements */
}
Use Bootstrap padding property p-. Documentation
<a class="btn btn-default btn-block p-3" href="#">1</a>
Actually, just use py-4 as an extra class on your button.
py-# adds padding on top and bottom at the same time, and you can choose how much by changing the number (I think the max is 4, but I might be wrong).
You can check all the options here (it works at least from Bootstrap 4 onwards).
Related
I have an app built in blazor for a shopping list.
The UI is composed of the default blazor template tab,
an Add Item button at the top and a Finished shopping button at the bottom.
Between the 2 buttons I want the remaining space to be taken up by a list of custom components.
I do not know how to get the height of the list set to the remaining space on the page.
Closest I have gotten is by setting the size of the list container to 100vh - 140pixels where 140pixels is the size of the buttons.
As the nav tab appears on the top for narrow screens and the left for wide screens I can't just hardcode in the value for it.
I would also prefer if this didn't rely on me hardcoding this as well.
I have tried setting the container height to 100% but that is just giving it no limit.
The list is in a div with the overflow-auto class from bootstrap.
The code
<body style="height:100%">
<div style="">
<div style="">
<button class="btn btn-primary" style="margin-bottom: 10px; width:100%;" #onclick="AddItem">Add Item <span class="oi oi-plus" style="margin-left: 5px;" aria-hidden="true"></span> </button>
</div>
<div class="overflow-auto" style="height: calc(100vh - 140px);">
#foreach (var item in _shoppingItems)
{
<ShoppingItemComponent Item="#item" DeleteItem="DeleteItem" BoughtToggle="UpdateItem" ></ShoppingItemComponent>
}
</div>
<div style="">
<button class="btn btn-primary" style="width:100%;" #onclick="ClearList">Shopping Done</button>
</div>
</div>
</body>
You can see it running here, although note I am fiddling with it there so it may not match exactly with the styling in this question.
https://smartshoppingapp.azurewebsites.net/
I have found some solutions around stack overflow around the problem, however I cannot get them working within my solution, I think all of the blazor boilerplate divs and bodies etc that wrap around my page are preventing the 100% height working as intended. i.e index.html and mainlayout.razor
Use bootstrap flex:
I un-wired your buttons to get it to work locally.
<div class="vh-100 d-flex flex-column align-items-stretch">
<button class="btn btn-primary">
Add Item <span class="oi oi-plus" style="margin-left: 5px;" aria-hidden="true"></span>
</button>
<div class="flex-fill overflow-auto">
#foreach (var item in _shoppingItems)
{
<ShoppingItemComponent Item="#item"
DeleteItem="DeleteItem"
BoughtToggle="UpdateItem" />
}
</div>
<button class="btn btn-primary">
Shopping Done
</button>
</div>
As a side note: When I am debugging these sort of issues I assign background colours to the divs to see what is really happening. That and inpecting the HTML with the browser tools.
This works fine, makes the button size 4
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
But the following doesn't work:
<div>
<button class="col-xs-4 btn btn-block btn-primary">Like</button>
</div>
Which doesn't make sense to me, since I thought the div was just a container and its styles/ classes are passed down to its elements.
col-xs-4 sets the current element's width to approximately 33% and btn-block sets the current element's width to 100%.
In this code parent element's width (div) is 33% (because of col-xs-4) and child element's width is 100% (because of btn-block).
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
In the next code, parent div's display is block and its width changes according to what is inside of it. And in child element (Button) it has both col-xs-4 and btn-block classes, but btn-block sets width:100% and disables col-xs-4 (width:33%) effect.
<div>
<button class="col-xs-4 btn btn-block btn-primary">Like</button>
</div>
If you remove btn-block you'll see col-xs-4 just works fine and sets width:33%
<div>
<button class="col-xs-4 btn btn-primary">Like</button>
</div>
I've created a fiddle for you.
In your first example, the div is given class "col-xs-4" and will therefore not change in size depending on what is inside the div.
In your second example, the div is not given any class and will therefore change in size, depending on what is inside the div.
The reason your second example doesn't work is because of your other classes also changes the button size. By reading the "col-xs-4" class first, the size is overruled by one of the other classes.
you can not apply col-xs-* or any with buttons but if you want to adjust the size of your button the refer this ->
https://www.w3schools.com/bootstrap/bootstrap_buttons.asp
I have three buttons and I want them to be on the same line, take all the space and every button has to be the same size.
And as soon as the window is too small to show every button at at least 170px width, I want every button to have their own line and take 100% of it.
I remember seeing websites that have navigation bars which work somewhat like this..
This is what my code currently looks like:
<div class="modal-body">
<button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button A</button><span></span>
<button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button B</button><span></span>
<button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button C</button>
</div>
The first part seems to work fine, but when the window gets too small, the buttons don't take 100% width on their line:
Is there a bootstrap way to achieve that? Or is a css hack necessary?
I would rewrite the HTML to look like this.
<div class="modal-body">
<div class="row">
<div class="col-lg-4 col-sm-12">
<button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
</div>
<div class="col-lg-4 col-sm-12">
<button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
</div>
<div class="col-lg-4 col-sm-12">
<button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
</div>
</div>
</div>
You will need to add a media query to css
button{
width: 170px
}
#media (max-width: 540px){
button{
width: 100%;
}
}
For best results add a parent class to button
if you are using Bootstrap then you should be able to use the 'col' CSS selector
you should be able to apply a container (or row) class depending how much of the screen you want to fill, then apply 'col-md-4 col-sm-12' (depending on the breakpoint you want it to go 100%) to all the buttons you shouldn't write the CSS inline like the example above use the bootstrap classes...
link to the bootstrap documentation http://getbootstrap.com/
Please refer to the Bootstrap grid system documentation to understand more about Col settings on different sizes.
http://getbootstrap.com/css/#grid
I am using Bootstrap and I came across the following error in displaying some buttons:
The HTML code is the following:
<div class="row" style="margin-top: 20px">
<div class="col-lg-6 text-left">
<button class="btn btn-primary profile-button">Save</button>
</div>
<div class="col-lg-6 text-right">
<button class="btn btn-primary profile-button">Reset</button>
</div>
</div>
The CSS for the custom class is:
.profile-button {
min-width: 125px;
}
The error only occurs when I am resizing the browser width. The screenshot attached is when the browser has half the width of the monitor (so 540px, given my resolution). I believe the display error starts at the 768px width value. The resolution I am currently using is 1920x1080.
I've tried wrapping the row inside a container div and also inside of a div that had both container and container-fluid classes.
Just add col-xs-6 class to both div
<div class="row" style="margin-top: 20px">
<div class="col-lg-6 col-xs-6 text-left">
<button class="btn btn-primary profile-button">Save</button>
</div>
<div class="col-lg-6 col-xs-6 text-right">
<button class="btn btn-primary profile-button">Reset</button>
</div>
</div>
DEMO
Bootstrap Grid
Bootstrap puts columns one under the other on smaller devices... It's likely that your columns are becoming full width and stacking, instead of staying at half the size. This is the standard behaviour.
If the buttons must remain side by side, I would recommend using your own classes and floating them, ensuring the max-width is 50%
I've this Bootstrap HTML markup:
<div class="container">
<div class="field col-md-6 col-md-offset-3">
<button type="button" class="btn btn-block btn-primary">Large button</button>
<button type="button" class="btn btn-primary">X</button>
</div>
</div>
I would like the large button to fill the column (col-md-6), therefore I've used btn-block. But I would like the X button to float right in the same line, taking a bit of the width of the Large button.
The X button should stay small, and the Large button should fill up the rest of the width.
How can I do that?
See my JSFiddle.
You'll want to use input groups to keep everything together.
http://getbootstrap.com/components/#input-groups
Extend form controls by adding text or buttons before, after, or on
both sides of any text-based . Use .input-group with an
.input-group-addon to prepend or append elements to a single
.form-control.
Buttons in input groups are a bit different and require one extra
level of nesting. Instead of .input-group-addon, you'll need to use
.input-group-btn to wrap the buttons. This is required due to default
browser styles that cannot be overridden.
Here is the modification I made to your fiddle.
http://jsfiddle.net/oayw7uhh/5/
All you need to do is surround both elements with a input-group-div
Then, wrap the X button in a span with the class input-group-btn.
https://jsfiddle.net/dennismadsen/oayw7uhh/
Your finished code is
<div class="container">
<div class="field col-md-6 col-md-offset-3">
<div class="input-group">
<button type="button" class="btn btn-block btn-primary">Large button</button>
<span class="input-group-btn">
<button type="button" class="btn btn-primary">X</button>
</span>
</div>
</div>
</div>