I have a btn-toolbar inside my panel-body, and would like to:
Center the set of buttons
Ensure that on mobile view, three buttons are on top, three are on the bottom.
There are a lot of similar questions out there, and I have tried various potential solutions, but nothing seems to work (text-align: center, margin: 0 auto, etc.). Any help would be appreciated.
http://codepen.io/kli96/pen/vydMgW
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-toolbar">
<button type="button" class="btn btn-primary" id="btn2016">2016</button>
<button type="button" class="btn btn-primary" id="btn2015">2015</button>
<button type="button" class="btn btn-primary" id="btn2014">2014</button>
<button type="button" class="btn btn-primary" id="btn2013">2013</button>
<button type="button" class="btn btn-primary" id="btn2012">2012</button>
<button type="button" class="btn btn-primary" id="btn2011">2011</button>
<button type="button" class="btn btn-primary" id="btn2010">2010</button>
</div>
</div>
</div>
</div>
</div>
</div>
To make sure the buttons are centers you can set the container of the buttons to display: inline-block and that container with text-align: center.
You have 7 buttons, but with the above changes they look ok on mobile.
Here is the CSS you need:
.panel-body {
text-align: center;
}
.btn-toolbar {
display: inline-block;
}
.btn-toolbar .btn {
margin-bottom: 5px;
}
Check the codepen:
http://codepen.io/anon/pen/MbQRrY
Related
I am trying to make a simple example where I have a row and inside that row is columns. One column is for the name of the left-hand side and on the right-hand side is the three buttons that exist. However, I am having issues placing the buttons properly on the right side as well as spacing them at an appropriate distance. I tried using the max-width in my CSS but I just ended up screwing up the project even more. Below is my HTML/CSS file:
#submitGPBtn {
margin-right: 30px;
}
<div class="row">
<div>
<h4> Group Pattern Test</h4>
</div>
<div class="mx-auto">
<button class="btn btn-primary">Save</button>
</div>
<div class="mx-auto">
<button class="btn btn-primary">Close</button>
</div>
<div class="ml-auto">
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
You would want to use a btn-toolbar to group your buttons in-line.
#submitGPBtn {
margin-right: 30px;
}
<div class="row">
<div class="col">
Group Pattern Test
</div>
<div class="col">
<div class="btn-toolbar">
<button class="btn btn-primary">Save</button>
<button class="btn btn-primary">Close</button>
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
</div>
This question has been answered well here. But here's an example below, add float-right class to your button bar, you can put a breakpoint in the class like float-sm-right but float-right works on any viewport width.
#submitGPBtn {
margin-right: 30px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col">
Group Pattern Test
</div>
<div class="col">
<div class="btn-toolbar float-right">
<button class="btn btn-primary">Save</button>
<button class="btn btn-primary">Close</button>
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
</div>
In bootstrap ml-auto is fine to align buttons to the right, but you should apply it only to the first item after the "offset".
I added ml-1 to space the other buttons and a lightyellow background just to show where the container ends.
My personal suggestion when you use bootstrap is to code inside a container, you can't set its size to what you want but it prevents stretching in wide monitors.
.container {
background-color: lightyellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col text-left">
<h4> Group Pattern Test</h4>
</div>
<button class="btn btn-success ml-auto">Save</button>
<button class="btn btn-success ml-1">Close</button>
<button class="btn btn-success ml-1" id="submitGPBtn">Submit</button>
</div>
</div>
I am relatively new to web development in general and am having a layout crisis: I have a container-fluid that has a row split into two *col-md-6*s. Within a col-md-6 I want to be able to position elements horizontally. As shown in my code/picture; I am trying to make a simple div that is 95% the height of the button-group and shows up next to it...however it is showing up below it and is very short (I want it to be as tall as the button group). What is the protocol for sizing/positioning elements next to each other in Bootstrap like this?
<div class="container-fluid">
<div class="row">
<div class="col-md-6" style="background-color: lightcyan">
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Quick Select</button>
<button type="button" class="btn btn-primary">Show in Depth</button>
<button type="button" class="btn btn-primary">Delete Product</button>
</div>
<div id="prod_view">
yo
</div>
CSS:
#prod_view{
background: lightcoral;
width: 69%;
height: 95%;
margin-left: 23%;
border: solid;
}
What it looks like now:
I want the "yo" box to be more rectangular and to the right of the button group.
Here's a flex layout that will do that. You can use the justify-content property to affect the horizontal alignment, and align-items will affect the vertical alignment. Here's a visual guide for flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.custom-row {
display: flex;
justify-content: space-between;
}
.custom-row > div:last-child {
width: 69%;
}
#prod_view {
height: 95%;
background: lightcoral;
border: solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 custom-row" style="background-color: lightcyan">
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Quick Select</button>
<button type="button" class="btn btn-primary">Show in Depth</button>
<button type="button" class="btn btn-primary">Delete Product</button>
</div>
<div>
<div id="prod_view">
yo
</div>
</div>
</div>
</div>
</div>
Another way is with a single flexbox class. Add it to the row and col-md-6:
.flex {
display: flex;
}
<div class="container-fluid">
<div class="row flex">
<div class="col-md-6 flex" style="background-color: lightcyan">
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Quick Select</button>
<button type="button" class="btn btn-primary">Show in Depth</button>
<button type="button" class="btn btn-primary">Delete Product</button>
</div>
<div id="prod_view">
yo
</div>
</div>
</div>
</div>
http://www.codeply.com/go/wvCRJ0ufEB
In Bootstrap 4, flexbox is default so there is no need for the extra class.
I have two buttons and I would like to swap them using float. How can I do it?
<div class="modal-footer">
<button type="button" class="btn btn-default">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>
Thank you. Any help would be appreciated.
With additional CSS, you could float the cancel button to the right.
.modal-footer .btn-default {
float:right
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" charset="utf-8">
<div class="modal-footer">
<button type="button" class="btn btn-default">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>
or
You can use one of the helper classes on the first button --- pull-right.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" charset="utf-8">
<div class="modal-footer">
<button type="button" class="btn btn-default pull-right">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>
You may additionally need to add a clearfix depending on other content in the modal.
Using flexbox:
You can use the flexbox property order. Like the property name suggests, it changes the order of flex-items.
More info here.
Code Snippet:
.modal-footer {
display: flex;
justify-content: flex-end;
}
.modal-footer .btn:last-of-type {
order: -1;
}
<div class="modal-footer">
<button type="button" class="btn btn-default">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>
.right {
float: right;
}
.left {
float: left;
}
<div class="modal-footer">
<button type="button" class="right btn btn-default">Cancel</button>
<button type="button" class="left btn btn-primary" data-dismiss="modal">Delete</button>
</div>
you can also use
order: 1 and order: -1
.modal-footer {
display: -webkit-flex; /* Safari */
display: flex;
}
.first {
order: 1
}
.second {
order: 2
}
<div class="modal-footer">
<button type="button" class="second btn btn-default">Cancel</button>
<button type="button" class="first btn btn-primary" data-dismiss="modal">Delete</button>
</div>
read CSS order property
I have a bootstrap sidebar that contains a couple buttons. Unfortunately, it looks very ugly and I want each button to be the same size.
These buttons are contained in a sidebar and will be stack vertically. I want to avoid setting a pixel number for each button. Here is the jfiddle
https://jsfiddle.net/66bk2rfc/
HTML
<div id="reading-sidebar" class="col-xs-3 panel-default">
<div id="reading-sidebar-title" class="panel-heading">Options
<button type="button" class="btn btn-xs btn-default pull-right" id="reading-sidebar-hide-btn"><i class="glyphicon glyphicon-remove"></i></button>
</div>
<div id="reading-sidebar-contents" class="panel-body">
<ul class="sidebar-button-list">
<button type="button" id="pre-reading-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Pre Readings</button><br>
<button type="button" id="passage-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Passage</button><br>
<button type="button" id="post-reading-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Post Readings</button><br>
<button type="button" id="media-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Media</button><br>
<button type="button" id="question-btn" class="btn btn-default pull-left"><i class="glyphicon glyphicon-minus"></i> Questions</button>
</ul>
</div>
</div>
The "bootstrap" way to do this would be to use btn-block on your button elements. Like so:
<button type="button" class="btn btn-primary btn-lg btn-block">Full-width Button</button>
You can also just surround them with <div class="btn-group-lg btn-group-vertical">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="reading-container" class="col-xs-6">
<div id="reading-sidebar" class="col-xs-3 panel-default"></div>
<div id="reading-sidebar-contents" class="panel-body">
<div class="btn-group-lg btn-group-vertical">
<button type="button" id="pre-reading-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Pre Readings</button>
<button type="button" id="passage-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Passage</button>
<button type="button" id="post-reading-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Post Readings</button>
<button type="button" id="media-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Media</button>
<button type="button" id="question-btn" class="btn btn-default"><i class="glyphicon glyphicon-minus"></i> Questions</button>
</div>
</div>
</div>
If I get your question right. Do you mean this:
#reading-sidebar-contents .btn{
width:200px;
}
Here is fiddle: https://jsfiddle.net/66bk2rfc/6/
I changed your fiddle to match a solution. You can give your sidebar a width of 100%. Then you can just make your buttons 80% with one line of css and make them stay in the middle with the margin:0 auto. If you want to adjust your size of the buttons, you can easely change it with just the one line. You could also add the text-align:left, set a font-size for all the buttons,... for better styling to the buttons.
#reading-sidebar
{
width:80%;
margin:0 auto;
}
#reading-sidebar-contents button
{
width:100%;
margin:0 auto;
}
Link: https://jsfiddle.net/66bk2rfc/1/
I suggess You to do it like this:
.btn {
width: 100%;
height: 56px;
padding-left: 2% !important;
}
.btn i {
left: 10px;
width: 10%;
top: 25%;
height: 50%;
}
.btn.pull-left {
text-align: left;
}
Also if you just want only these affect to sidebar buttons, add
#reading-sidebar .btn { } ETC...
If you want it not 100% width and centered, You should do it like this,
.btn { width: 80%; margin-left: 10%; }
That will make it centered easily. :)
Made this Bootply example and I'm wondering how can I get the same width for normal button and a button group consisting of 3 buttons.
Tried it with an css extension but I don't think that is the correct way in sense of the bootstrap grid system.
I know that there is something like .btn-group-justified but using of that class also changes the first ("<") and last element (">") width, but they should be fixed.
Any ideas?
.menu_button {
min-width: 170px;
max-width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default menu_button">First</button>
</div>
<div class="btn-group">
<button class="btn btn-default menu_button">Second</button>
</div>
<div class="btn-group">
<button class="btn btn-default"><</button>
<button class="btn btn-default menu_button">3rd</button>
<button class="btn btn-default">></button>
</div>
<div class="btn-group">
<button class="btn btn-default"><</button>
<button class="btn btn-default menu_button">4th</button>
<button class="btn btn-default">></button>
</div>
</div>
</div>
</div>
How's this?
I created a separate class for grouped buttons so that they could have separate stylings.
SIDE NOTE
Bootstrap buttons are styled to be responsive as the viewport changes. So styling them as you did may work, but may not be responsive unless you add your own media queries in CSS to change the size of them as the viewport changes.
.menu_button {
min-width: 170px !important;
max-width: 200px !important;
}
.menu_button_grouped {
min-width: 104px !important;
max-width: 134px !important;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default menu_button">First</button>
</div>
<div class="btn-group">
<button class="btn btn-default menu_button">Second</button>
</div>
<div class="btn-group">
<button class="btn btn-default"><</button>
<button class="btn btn-default menu_button_grouped">3rd</button>
<button class="btn btn-default">></button>
</div>
<div class="btn-group">
<button class="btn btn-default"><</button>
<button class="btn btn-default menu_button_grouped">4th</button>
<button class="btn btn-default">></button>
</div>
</div>
</div>
</div>
I hope this helps!
.buttons-group {
min-width: -webkit-fill-available;
justify-content: space-evenly;
}
.button-group {
width: -webkit-fill-available;
}