Switch from .btn-group to .btn-group-vertical when using a mobile device
I want to implement a bootstrap toolbar button as shown on getbootstrap.com with additional behavior: all group buttons should automatically switch to vertical mode when mobile is in use.
The most suitable solution, in my opinion, looks like this:
.myClass {
@media (max-width: 760px) {
&:extend(.btn-group-vertical all);
}
@media (min-width: 761px) {
&:extend(.btn-group all);
}
}
Unfortunately the code doesn't work. As far as I understood, only classes in the same media space can be extended this way.
Is it possible to solve the problem without using JS?
source to share
You can create your own group of vertical buttons. Add your custom class .btn-vertical
(or whatever you want to call it) to .btn-group
.
You technically only need the CSS below, but when the button group changes to vertical orientation you are left with the first left border of the buttons and the last buttons on the right rounded, which is visually unattractive. See the Jsfiddle for the complete CSS.
body {
text-align: center;
padding-top: 50px;
background-color: grey;
}
@media (max-width: 768px) {
.btn-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
.btn-vertical > .btn,
.btn-group > .btn {
position: relative;
float: left;
}
.btn-vertical > .btn,
.btn-vertical > .btn-group,
.btn-vertical > .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
.btn-vertical > .btn-group > .btn {
float: none;
}
.btn-vertical>.btn+.btn,
.btn-vertical>.btn+.btn-group,
.btn-vertical>.btn-group+.btn,
.btn-vertical>.btn-group+.btn-group {
margin-top: -1px;
margin-left: 0;
}
.btn-vertical>.btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-vertical>.btn:first-child:not(:last-child) {
border-top-right-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-vertical>.btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.btn-vertical>.btn-group:not(:first-child):not(:last-child)>.btn {
border-radius: 0;
}
.btn-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,
.btn-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
body {
background-color: lightblue;
}
}
.btn-group.btn-group-lg .btn {
border-radius: 0;
border: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="media-change">
<div class="container">
<div class="btn-group btn-group-lg btn-vertical">
<button type="button" class="btn btn-primary">Sample</button>
<button type="button" class="btn">Sample</button>
<button type="button" class="btn btn-danger">Sample</button>
<button type="button" class="btn btn-warning">Sample</button>
<button type="button" class="btn btn-success">Sample</button>
<button type="button" class="btn btn-default">Sample</button>
</div>
</div>
</div>
source to share