The goal of a Bootstrap site is to deliver a mobile view that is so easily navigable that it never leaves the user yearning for a tiny shrunk down desktop experience on their phone. Still, despite a developers best intentions, some users just want what they want. And we should give it to them. We’re not designing sites so that we may enforce our will on others, but to provide content that users find easy to view, and some users have different preferences than others.

Luckily, we can easily provide both worlds, and default to a responsive view with the hopes that they will find it so convincing they’ll never need the desktop view.

Here’s a little snippet of code that I like to put on websites. You can see it in action on: http://kylemitofsky.com/

Add two toggles to your page.

<!-- Desktop / Mobile Footer -->
<div id="DesktopMobileFooter" class='h_center'>
    <hr/>
    <div class="MobileToggle">
        View <a id="DesktopSite" href="#" >Desktop</a> | <strong>Mobile</strong> Site
    </div>
    <div class="MobileToggle" style="display:none;">
        View <strong>Desktop</strong> | <a id="MobileSite" href="#" >Mobile</a> Site
    </div>
</div>

Then add the following JavaScript:

$(".MobileToggle a").click(function () {
    var viewport = ($(this).attr('id') === "MobileSite") ?
                    'width=device-width, initial-scale=1.0' :
                    'width=1200';
    $("meta[name=viewport]").attr('content', viewport);
    $(".MobileToggle").toggle();
    return false;
});

NOTE: As AJ pointed out in the comments, for this solution to work (and Bootstrap in general) make sure you’ve included the tags from Bootstrap’s Basic Template, specifically the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Hello Boston Code Camp!

Here are some resources to supplement my talk on Bootstrap 3 talk titled:
Pulling Your Website Up By Your Twitter Bootstraps

Here are some powerpoint slides:

Here is a working version of the website from the presentation:
http://kylemitofsky.com/BootstrapPresentation/

The entire code sample was published to GitHub here:
https://github.com/KyleMit/BootstrapPresentation

You can get Bootstrap here (and also read their great documentation):
http://getbootstrap.com/

You can style Bootstrap here:
http://bootswatch.com/

I’m really excited that every step of the demo can is actually a commit into the GitHub repository. I wrote an article about using using revision control to demo live coding changes, but here’s the meat of it. If you fork the repository on github and open it up it powershell, then you can step through every commit with these commands:

git config --local alias.child-sha "!git rev-list HEAD..master | tail -n 1"
git config --local alias.initial-commit "!git rev-list --all | tail -n 1"

git checkout master
git checkout $(git initial-commit)
git checkout $(git child-sha)

The ASP.NET MVC project template comes with Bootstrap scaffolding by default. And Bootstrap comes with default styling for active navbar links. So you might find it a little odd that the ASP.NET bootstrap template does not style the active menu item by default.

It can, it just seems as if this functionality wasn’t included out of the box:

If you plan on utilizing the bootstrap’s powerful navigational layout, you should definitely add styling for the current page. It helps users keep track of where they are within the application and assists with navigation.

To do so, we can add the active class dynamically on the shared layout by checking the current routing data. Here’s how:

Markup

When you create a new ASP.NET Web Application using MVC, the project should already contain some default pages and navigational links in the navbar. The navbar is defined as part of the shared layout in the Views folder. Your Solution Explorer should look like this:

In the _layout.vbhtml file, you should find the following markup:

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li>@Html.ActionLink("Home", "Index", "Home")</li>
        <li>@Html.ActionLink("About", "About", "Home")</li>
        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
    </ul>
</div>

In order to highlight the current tab in the Bootstrap Navbar, the <li> element needs to be given the class named active. As an example, just try hard coding it in on any one of the current links:

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class="active">@Html.ActionLink("Home", "Index", "Home")</li>
        <li>@Html.ActionLink("About", "About", "Home")</li>
        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
    </ul>
</div>

This should look like the screenshot from above. But what we’d really like to do, is generate the active class dynamically for each li depending on the current page. We’ll insert the string active with an extension method called IsActive that will take in parameters for the Controller and Route.

We can use our extension method to insert the active class on the appropriate action link like this:

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class='@Html.IsActive("Home", "Index")'>
            @Html.ActionLink("Home", "Index", "Home")
        </li>
        <li class='@Html.IsActive("Home", "About")'>
            @Html.ActionLink("About", "About", "Home")
        </li>
        <li class='@Html.IsActive("Home", "Contact")'>
            @Html.ActionLink("Contact", "Contact", "Home")
        </li>
    </ul>
</div>

Extension Method

If you don’t already have one, create a folder in your project named Utilities and add a static class (or Module in VB) named Utilities or Extensions.

Then, we’ll add an extension method called IsActive ontop of the HtmlHelper class. We’ll use this to return the active class if the passed in controller text and action text match the current route.

To programmatically determine the current controller and action, we’ll use the ViewContext property on our HtmlHelper object. The ViewContext exposes, among other things, a property containing the RouteData which contains a collection of URL parameter values and default values for the route in its Values property.

The whole thing should look like this:

public static class Utilities
{
    public static string IsActive(this HtmlHelper html, 
                                  string control,
                                  string action)
    {
        var routeData = html.ViewContext.RouteData;

        var routeAction = (string)routeData.Values["action"];
        var routeControl = (string)routeData.Values["controller"];

        // both must match
        var returnActive = control == routeControl &&
                           action == routeAction;

        return returnActive ? "active" : "";
    }
}

Finally, in order for your view to access this method, you’ll have to make sure you import the namespace into your view using the razor syntax like this:

@using YourProjectName.Utilities

Run your project and the current page should be highlighted!

Closing Remarks

You’ll notice that the login pages do not highlight when you navigate to the default account pages provided. See if you can use the info here to modify the _loginPartial page in the Shared Layout section. If you get stuck, you can look at the full demo below.

Chris Way has a great blog post on Setting the active link in a Twitter Bootstrap Navbar in ASP.NET MVC. He comes up with a single method to generate the <li> element and the <a> element nested inside of it since there is largely redundant routing info. I’ve opted away from that for maximal flexibility as it locks you into a single method for producing links, but it does provide a terser inline syntax if that’s all you need to do.

Also, a lot of the basis for this code was taken from the StackOverflow question How to add active class to Html.ActionLink in ASP.NET MVC

Source Code:

You can view the full working solution on GitHub in both VB and C#

https://github.com/KyleMit/CodingEverything/tree/master/MVCBootstrapNavbar

---

Permalink to article - Published with markdown via stackedit.io

Do you really want to make a side navbar look just like the one from the Bootstrap Documentation pages? Then this is the article for you.

In addition to really liking the bootstrap library, I have to say that I really enjoy the presentational style of their documentation page. I think it’s a great idea to show off the big picture of a document, while automatically expanding each section when appropriate. It’s especially helpful for long documents that require a lot of scrolling. Unfortunately, they don’t specifically outline how their documentation pages are put together. But since they’re just delivering HTML/CSS/JS, we can reverse engineer how they put it together. Here are the results of dissecting Bootstrap’s Doc’s side nav bar.

Simple Content

This really works best with some content to scroll through, so let’ just start by making a bunch of blocks with unique ID tags, that are nested into sections, that we can visually see.

Here’s how:
Create a few blocks that look like this. Copy and paste it, but every time you see the letter A, replace it with B, C, and so on.

<section id="GroupA" class="group">
    <h3>Group A</h3>
    <div id="GroupASub1" class="subgroup">
        <h4>Group A Sub 1</h4>
    </div>
    <div id="GroupASub2" class="subgroup">
        <h4>Group A Sub 2</h4>
    </div>
</section>

Then style the blocks to give them a little bit of spacing. This is just so we don’t have to wade through hundreds of lines of lorem ipsum (yuk!).

.group {
    background: yellow;
    width: 200px;
    height: 500px;
}
.group .subgroup {
    background: orange;
    width: 150px;
    height: 200px;
}

Simple Layout

Now we need to create a two column layout for our page. We can put the sample body content on the right and the navbar on the left. We can do this with the Bootstrap Grid System, by placing both columns inside of a div with class='row' and specifying the column widths for all devices with col-xs-*. Finally when we scroll down, we want the content to freely scroll, but have the navigation bar remain in the same place, so we’ll use position: fixed to pin it to the top. It should look something like this:

<div class="row">
    <!--Nav Bar -->
    <nav class="col-xs-3">
        <div class="fixed">
            Nav Placeholder<br/>
            Stays on Top!
        </div>
    </nav>
    <!--Main Content -->
    <div class="col-xs-9">
        <section id="GroupA" class="group"></section>
        <section id="GroupB" class="group"></section>
        <section id="GroupC" class="group"></section>
    </div>
</div>

Simple Navlist

Before we even add any bootstrap, we need a bare bones list of links that will navigate to content on the page. This provides a nice tree structure, but no formatting. The links have bulky bullets in front of them and are very brightly colored.

<ul id="sidebar">
    <li>
        <a href="#GroupA">Group A</a>
        <ul>
            <li><a href="#GroupASub1">Sub-Group 1</a></li>
            <li><a href="#GroupASub2">Sub-Group 2</a></li>
        </ul>
    </li>
    <!-- Same for Group B & C -->
</ul>

Converting List to Nav

In order to make the links look more like navigation controls, and less like a list of groceries, we can use the set of Nav classes provided by Bootstrap. In order to use any nav class, you must also attach the .nav base class to that element as well. To make sure the list stays vertical, we want to also add the class .nav-stacked to each ul element.

<ul class="nav nav-stacked fixed" id="sidebar">
    <li>
        <a href="#GroupA">Group A</a>
        <ul class="nav nav-stacked" >
            <li><a href="#GroupASub1">Sub-Group 1</a></li>
            <li><a href="#GroupASub2">Sub-Group 2</a></li>
        </ul>
    </li>
    <!-- Same for Group B & C -->
</ul>

Let’s pause to look at just these changes because a lot has changed visually even though we haven’t added much code. The set of nav classes help strip out some of the default formatting associated with unordered lists and instead renders the links much like menu bars. The elements now all align all the way on the left because .nav sets padding-left: 0;. We’ve removed the underline with text-decoration: none;, removed some of the list formatting with list-style: none;, and softened the colors a bit with color: #428bca;. The nav-stacked floats all the elements to the left so they ‘stack’ on top of each other.

Formatting the Nav Bar

The final change to the markup is just to add the class bs-docs-sidebar to the top nav column div to help identify it in CSS. We can do the rest in CSS and JavaScript.
First, let’s give the navbar a little breathing room by giving it margins on the top, left, and bottom:

/* sidebar */
.bs-docs-sidebar {
    padding-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

Next, we’d like to be able to apply different formating to parent level links and child links. CSS does not currently have a Parent Selector which could be used to differentiate the top level links with those nested below them. Instead, we can apply a style to all links inside of bs-docs-sidebar and then override that style for any list items that are children of two ul.nav elements.

/* all links */
.bs-docs-sidebar .nav>li>a {
    color: #999;
    padding: 4px 20px;
    font-size: 13px;
    font-weight: 400;
}

/* nested links */
.bs-docs-sidebar .nav .nav>li>a {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 30px;
    font-size: 12px;
}

For all links we’ll apply a grey color schema and a font-weight of 400. All links will be padded in at least 20 pixels, but those nested under two .nav elements will be indented 30px. Top level links will be slightly larger at 13px. And nested links will have much less padding on the top and bottom.

Using Scrollspy

To do the rest of the styling we’ll need to know whether a link is active. In order to do this, we can use a scroll spy on the page which will apply the .active class to the navigation list whenever a given element is scrolled into view.
Scroll spy is called on the element whose scrolling activity you want to monitor. Since you will probably be scrolling through the entire page, this should go on the body element.
The target of scrollspy is:

the ID or class of the parent element of any Bootstrap .nav component.

So we’ll target the #sidebar by passing in it’s parent: .bs-docs-sidebar

The offset represents the pixels to offset from top when calculating position of scroll. We’ll give it a running start of 40, so it can find the first nested child item of each group so that will be set as active as well.

$('body').scrollspy({
    target: '.bs-docs-sidebar',
    offset: 40
});

You are still in charge of styling any elements you would like to display. Scroll spy merely adds the active class. As of right now, it won’t look like it’s doing anything because we haven’t styled the elements yet. As a placeholder, just to see it working, let’s color active links purple. We’ll replace this with more sophisticated stuff next.

.bs-docs-sidebar .nav>.active>a {  color: #563d7c; }

Styling Active Links

Whenever an element is set to active (due to scrollspy) or is hovered or focused, we’ll apply some styles to the anchor. We’ll color it purple. We’ll make sure that it doesn’t have an underline or a grey box highlighting it. And we’ll add a purple flag on the left to help identify which items are active. To do this, we’ll apply a 2 pixel border to the left of the element.

Note: Because of the way the CSS box model works, when we add a 2px border to the left, the entire element shifts 2 pixels to the right, displaced by the border that previously took up zero pixels. One way to handle this is to shorten the padding we added by 2px every time the element is active. But I think a cooler trick is to just start off with a transparent 2px border so the object does not get resized when adding a colorful border

/* all links */
.bs-docs-sidebar .nav>li>a {
    /*add trasnparent border */
    border-left: 2px solid transparent;
}
/* active & hover links */
.bs-docs-sidebar .nav>.active>a, 
.bs-docs-sidebar .nav>li>a:hover, 
.bs-docs-sidebar .nav>li>a:focus {
    color: #563d7c;                 
    text-decoration: none;          
    background-color: transparent;  
    border-left: 2px solid #563d7c; 
}

Let’s also make active parent links have a very thick weight, and child links less so.
Remember: we’ll use the style we want for parent objects on all the links and then override it for nested links.

/* all active links */
.bs-docs-sidebar .nav>.active>a, 
.bs-docs-sidebar .nav>.active:hover>a,
.bs-docs-sidebar .nav>.active:focus>a {
    font-weight: 700;
}
/* nested active links */
.bs-docs-sidebar .nav .nav>.active>a, 
.bs-docs-sidebar .nav .nav>.active:hover>a,
.bs-docs-sidebar .nav .nav>.active:focus>a {
    font-weight: 500;
}

Collapsing Inactive SubGroups

One of my favorite features of the Bootstrap Navbar is that it automatically collapses subgroups that are not currently in view. This allows a lot of information to be available, but prevents a lot of noise when it’s not in use. To do this we’ll use the active flag on the parent group. To hide all subgroups, we’ll set display:none to all ul.nav elements that are children of other .nav elements. This will collapse all subgroups. Then we need to expand the active group by looking for a parent level nav with an .active child and set display:block on it’s child ul. So it will look like this:

/* hide all (inactive) nested list */
.bs-docs-sidebar .nav ul.nav {
    display: none;           
}
/* show active nested list */
.bs-docs-sidebar .nav>.active>ul.nav {
    display: block;           
}

And behave like this:

Wrap Up

So that’s it. You can have fun applying other styles as well. Bootstrap uses Affix to lock the navbar into place after scrolling past the header.
Also, they use media queries to collapse the navbar if the screen is below a certain size like this:

@media screen and (max-width: 500px){
    .bs-docs-sidebar {
        display:none
    }
}

The impetus for this article was actually a spice website that I was making to catalog my home spices. It uses the bootstrap side bar when space allows, but then converts into a top navbar for smaller screens. You can view the final page here:

http://kylemitofsky.com/Spices/

And you you can browse the source code here if you’re interested in how anything is done:

https://github.com/KyleMit/Spices/tree/gh-pages

Here’s the final fiddle. Feel free to play around with it, fork it, or leave me a comment below.

Update with Top NavBar:

Here’s a quick rundown of how to add a horizontal navbar to the example. The primary difficulty in adding any fixed position navbar to the top of the window is it will break all your anchor tags like so:

The first trick when adding a navbar is to displace everything on the page by the same number of pixels, that way nothing starts off hidden underneath the navbar. The standard implementation (even listed in the docs) is to just offset the entire document by placing a top margin or padding on the body element:

body { margin-top:50px; }

But as you can see from the previous example, this doesn’t solve the issue.

Why is that?

For more information, you can see my Stack Overflow answer to the question When navigating to #id, element is hidden under fixed position header, but here’s the gist of it. When the browser is told to navigate to a fragment identifier (#ID):

your browser always wants to scroll your anchor to the exact top of the window. If you set your anchor where your text actually begins, it will be occluded by your menu bar.

One way to overcome this is to make sure the content of your anchor element starts well after the element begins. To do this, we’ll need a basic understanding of the CSS box model. We’ll give the element some extra height at the top by setting the padding-top to about 50px, but since we don’t actually want each anchor element to have 50 pixels of overhead, we’ll also set the margin-top the the same amount, but negative.

Here’s an example, that hopefully makes the point more concrete:

By adding this CSS

.group, .subgroup {
    padding-top: 50px;
    margin-top: -50px;
}

We make the element grow 50 pixels taller, but ensure that the content stays in exactly the same place. Here’s a look at the example from the chrome developer tools:

Now when we scroll the top of the element to the top of the window, it will start 50 pixels before the content. Here’s a full example with a working top navbar

Update with Scrollable Navbar

To make the sidebar scrollable, you can add the following CSS:

.bs-docs-sidebar > ul {
    overflow-y: auto;
    height: 100%;
}

When content overflows it’s container, there are a couple different ways to handle it in css:

overflow: visible | hidden | scroll | auto

The default is to have the content remain visible. However, this poses problems when using an element with position:fixed because you cannot simply scroll through the window to bring the visible element into view.

You can use overflow: scroll to add a scrollbar to the div, but this will always be visible, even if unnecessary, and scrollbars should be avoided unless absolutely necessary. The better option is to use overflow: auto which will provide a scrollbar only if necessary. Since we’d rather wrap long horizontal text than scroll it, we’ll only apply this to the y-axis by using overflow-y: auto.

You’ll notice once this is in place it doesn’t do anything yet. That’s because we need to tell the container how large it is so it knows when any of its contents are taking up more space that it can provide. As a test, you can just throw in height: 100px and you’ll notice that the entire contents fits into a box that is 100px tall and you can scroll to get to the rest of it.

However, we don’t necessarily know how much space we want to allow the sidebar to consume. It’s going to depend on the space available in the window and how you’re site is laid out. In the simplest form, if we alloted the entire screen height to the sidebar, we could use height: 100%.

Note: Whenever you use height: 100% in CSS, you have to next ask yourself, “100% of what?” Often this is the parent element, but fixed position elements break the layout so 100% will automatically refer to the window size. If your sidebar does not start at the top of the window, 100% height will extend past the bottom of the screen and make the scrollbar difficult to manage. You can choose a height <100% or apply your own padding to the element, instead of its parent.

Here’s a demo with a scrollable sidebar:

You can look at my spice project for a demo in production using a scrollable sidebar

Update with Affix

In the spirit of the Bootstrap’s own use of their sidebar, you can use affix to help place the location as you scroll through the page. You’ll just need to add the affix to your sidebar like this:

$("#sidebar").affix({
    offset: {
      top: 60
    }
});

And then set some styling when the .affix class is in place (bootstrap will automatically add position:fixed so we just need to set the height:

#sidebar.affix {
    top: 20px;
}

Here’s a demo with an affixed sidebar: