How to make Bootstrap 'List group' responsive
You can do this with a bit of media query. In overiding the collapse
class when the screen size is different of XS
.
Bootply : https://www.bootply.com/L5BYCOwsZG
CSS :
@media screen and (min-width: 768px) {
.custom-collapse .collapse {
display:block;
}
}
HTML :
<div class="custom-collapse">
<button class="collapse-toggle visible-xs " type="button" data-toggle="collapse" data-parent="custom-collapse" data-target="#side-menu-collapse">
<span class="">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="list-group collapse" id="side-menu-collapse">
<li class="list-group-item dropdown-toggle">Cras justo odio</li>
<li class="list-group-item dropdown-toggle">Dapibus ac facilisis in</li>
<li class="list-group-item dropdown-toggle">Morbi leo risus</li>
<li class="list-group-item dropdown-toggle">Porta ac consectetur ac</li>
<li class="list-group-item dropdown-toggle">Vestibulum at eros</li>
</ul>
</div>