Day 0: Bootstrapping Mvc for the Next 30 Days

In the coming weeks you’ll see a wide range of topics, tips, tricks and the ins-and-outs of working with the Bootstrap library and CSS framework with Asp.Net’s MVC Framework.  This page will serve as the curated index of all posts for the month.

These posts will focus on using three key bits that are pre-requisites for the month: Visual Studio 2013, MVC 5 and Bootstrap.  Along the way we’re going to make use of jQuery and even have a look at leveraging Knockout.js to make the client development a little less mundane.

Expect to start simple but be ready for a daily dose of content, presumably with something new for you each day, or at least a new twist on something you might be familiar with. Bring your  willingness to try a bit of code, and I’ll try to bring some awesome.

Shameless plug: If you’re looking for professionally designed themes to replace your palette, you can help out this blogger (me!) by purchasing one over at {wrap}bootstrap. They have a selection of great looking Bootstrap themes. A very affordable alternative to taking the time to create your own theme. Check out Day 23 for more information on creating a site where users can choose which theme they see.

I’m assuming you’re a dev with some web experience. I’ll try to include some helpful links where content might be new or if questions come up. Thanks for joining along!

The 30 Day Breakdown

Warming Up

Enhancing Our Views

Exploring Bootstrap

Special Announcement!

Adding Some Sparkle

So, You’ve Got People Logging In

Wrapping Up With Some More Bootstrap

If you’d like a copy of the completed project, please be sure to check out the repo with the final version of this series’ code on GitHub.

Happy Coding!

17 thoughts on “Day 0: Bootstrapping Mvc for the Next 30 Days

  1. Dave

    Great series. Some really useful stuff here.
    What I’d like to see is how we can best use MVC Bootstrap templates when we are targetting IE8 as our main browser (Bootstrap 3.0+ isn’t supported for IE8).
    What polyfills / tweaks / changes do we have to make in order to still get a reasonable experience?

    (We build web apps for NHS-UK where the most common browser by far is still IE8)

    Reply
    1. james.chambers Post author

      Thanks Dave, I think that the following shims (taken from the Bootstrap site) are your best bet to get a working site with Bootstrap:

      <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
      <![endif]-->

      Hope this helps. -jc

      Reply
  2. Robert

    Thanks for doing this series James. I can’t tell you how much I’ve been enjoying sitting down in the evening and working through the days article. Embarrassingly I’ve been working with asp.net MVC with bootstrap for the past year and a half and have still managed to have a ‘ah ha’ moment with nearly every article.

    Thanks
    Robert

    Reply
      1. Robert

        So…does 27 Canadian days = 30 US Days? I’m always confused by this conversion stuff ;-)

        Just kidding, looking forward to when you’re able to finish this up

        Robert

        Reply
  3. Pingback: Diving into .NET « Cornelius Concepts

  4. Pingback: Reading Notes 2014-06-30 | Matricis

  5. Beta

    Thank you very much for your nice series.
    I wanted to ask if you’d able to provide a solution for cases when we integrate these bootstrap themes we want to keep left vertical submenu open once clicked.
    I provided a link of a such template, when i integrate on MVC once i click on submenu it redirects to the particular page but the submenu gets closed.

    http://thevectorlab.net/flatlab/calendar.html

    Thanks once again

    Reply
    1. james.chambers Post author

      Hi Beta,

      If you inspect the source at the link you provided, you’ll notice that there is a class applied to the container called “sidebar-closed”. When removed, the sidebar is displayed.

      You could easily store the user selection (as we did with the themes) either in their profile, as a claim, or even in session (and you could make a good argument for session, in this case).

      When you load a new page, the _layout.cshtml partial would either render the class, or not.

      Hope this helps!

      Cheers,
      -jc

      Reply
  6. Pingback: Vadym Bobyr's Blog | Bootstrapping Mvc for the Next 30 Days

  7. Pingback: An Interesting List of Development Stuff (July 2014) | rionscode

  8. Shane

    James

    I have just found this blog series and am looking forward to working my way through it. It is programmers such as yourself that make our community great. I hope that one day I am in a position of such knowledge and experience so that I can give back as you are doing.

    Thankyou for taking the time to present these musings.

    regards

    shane

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Powered by sweet Captcha