CODEWITHSUNDEEP
twitter-bootstrap
Losbear
Losbear

Reputation: 3315

Bootstrap: Collapse tab list to dropdown

I created a page with twitter bootstrap that contains 2 columns using the grid system. On the left side, I have a stacked pill list (using class .nav-stacked). When the page's width is under 768px the right column with the content falls under the stacked pills and the stacked pills fill up the full width, which I like.

What I need is when the page is under 768, the stacked pills collapse and shows the toggle button (button with 3 lines). How can I accomplish this? I feel like i'm missing a class or something, heh

The code in it's most basic form:

<div class="row">
    <div class="col-sm-4">
        <ul class="nav nav-pills nav-stacked">
            <li role="presentation" class="active"><a href="/link.html">Link 1</a></li>
            <li role="presentation"><a href="/link.html">Link 2</a></li>
            <li role="presentation"><a href="/link.html">Link 3</a></li>
        </ul>
    </div>
    <div class="col-sm-8">
        MY CONTENT GOES HERE
    </div>
</div>

Thanks guys

Upvotes: 1

Views: 3975

Answers (1)

Chris Pratt
Chris Pratt

Reputation: 239380

Check out the following CodePen (Full page view, better for testing the responsive functionality). Is that what you're looking for?

Code for posterity:

HTML

<div class="row">
    <div class="col-sm-4">
        <button type="button" class="btn btn-default xs-toggle" data-toggle="collapse" data-target="#pills">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <ul class="nav nav-pills nav-stacked xs-collapse" id="pills">
            <li role="presentation" class="active"><a href="/link.html">Link 1</a></li>
            <li role="presentation"><a href="/link.html">Link 2</a></li>
            <li role="presentation"><a href="/link.html">Link 3</a></li>
        </ul>
    </div>
    <div class="col-sm-8">
        MY CONTENT GOES HERE
    </div>
</div>

CSS

.xs-collapse {
  display: none;
  visibility: hidden;
}

@media (min-width: 768px) {
  .xs-toggle {
    display: none;
    visibility: hidden;
  }
  .xs-collapse {
    display: block;
    visibility: visible;
  }
}

/* Styles for toggle button (optional) */

.xs-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}

.xs-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}

.btn-default.xs-toggle .icon-bar {
  background-color: #888;
}

So basically what this does is recreate the style used for the navbar toggle functionality in a more generic format. The classes xs-toggle and xs-collapse have been created to signify the toggle functionality taking effect on screen sizes < 768px (the same as the xs classes in Bootstrap use by default). You could therefore expand this to other responsive widths by adding the appropriate sm, lg, etc. style versions. The rest of the style is for the toggle button itself. It's a special case scenario in Bootstrap for the navbar only. You could drop these and make the button look however you like.

Upvotes: 2

Related Questions