Bootstrap + Mvc - Fixing the Navbar

Code Dive

I am continuing my series on using Twitter’s Bootstrap CSS and JavaScript library with the Asp.Net Mvc 4 Framework. Here’s the rest of the series, and today’s instalment of the video is here:

User “arun” wrote in on my previous post, asking about a problem with the rendering of the navbar when the responsive design elements kicked in. I fired up the project to see what was amiss.  What I found when I made the browser more narrow was this:

imageimage

What’s with that white space?  Here’s what we _really _want:

imageimage

Yay! No whitespace! How did we make it happen? Turns out it’s quite easy, just make your layout header look like this:

    <style>
        body { padding-top: 60px; / 60px to make the container go all the way to the bottom of the topbar / }
        .aligntobottom { bottom:0; position:absolute; }
    </style>

@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Content/Bootstrap")</pre>

Notice that we’re moving the Bootstrap library below the body padding style so that we can get around a CSS conflict.

Don’t forget to watch the video above for a gem in there on getting the authentication bits going!

What’s Next?

For next steps, here’s some things to try out:

  • Check out the other instalments in this series
  • Download the RTM version of the Mvc 4 Framework and build the site out with posts from the series
  • Follow me @CanadianJames to find out when new articles/videos are posted in this series SmileSmile

 

Catch you on the next post, thanks all for your comments and questions!