css html javascript jquery twitter-bootstrap

How to expand a Bootstrap 3 dropdown when viewing on desktop?

My aim is to use a Bootstrap 3 dropdown to display links at mobile screen size and use a list to display the same links when the screen is bigger (desktop and tablet size).

Dropdown markup:

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
<span class="caret"></span>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>

List markup:

<ul class="list-inline">

My thoughts were to use the responsive utility classes to display and hide the markup via media queries. For example:

<ul class="list-inline visible-xs-block">

However, this approach would mean a whole bunch of links are hidden and I’m not entirely convinced hiding links in this way is a great approach. How can I achieve my aim without hiding links?

Here is a demo of what I’m trying to achieve:


Media Queries ?


@media screen and (min-width: 768px) {
.dropdown button{
#mylist {
position: relative;
#mylist li{

Fiddle :