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!

  • http://floppi.net Florian Sauer

    Your 30-day-bootstrapping-adventure is a great idea! Thanks for that.
    Definitely will follow work along.

    best wishes from Vienna, Austria,
    Flo.

  • http://tuts.behamooz.com Tutorial

    thanks .very good idea!

  • http://pharma-mix.com 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)

    • james.chambers

      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

  • 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

    • james.chambers

      Hey that’s wonderful to hear, thanks for following along Robert!

      • 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

        • james.chambers

          Best. Comment. Evar.

          Thanks Robert. :)

          Cheers,
          -jc

  • Pingback: Diving into .NET « Cornelius Concepts()

  • Pingback: Reading Notes 2014-06-30 | Matricis()

  • 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

    • james.chambers

      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

  • Pingback: Vadym Bobyr's Blog | Bootstrapping Mvc for the Next 30 Days()

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

  • francisco

    Hi James, first thanks for you excellent blog

    And my question is, i finished the 30 day and just bought a template in https://wrapbootstrap.com/, but i dont have idea how to implement in a site.

    do you have an other tutorial for explain how you can use a template from https://wrapbootstrap.com/?

    thanks in advanced

    • james.chambers

      Hi, thanks for following along! I do offer one approach to adding themes to the site here:
      http://jameschambers.com/2014/06/day-23-choosing-your-own-look-and-feel/

      That should help some. Basically, you should be able to just replace the default assets (JS, images, CSS) with the ones from the theme you purchased. You don’t need to do everything I suggest in Day 23.

      Cheers,
      -jc

  • 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

  • Pingback: Resources | cherylhartman()

  • Pingback: An Interesting List of Development Stuff (July 2014) - Rion.IO()

  • JoeyEff

    I’m behind the curve, but I’m looking forward to this series. Thank you for posting all this information!

    • james.chambers

      You bet! Enjoy! If you have any questions along the way, feel free to ask!

  • http://www.returnsmart.blogspot.com Roberto

    Hi James,

    I found this resource simply great for starters in MVC. Really useful and I’m sharing your blog from my site.

    Thanks a lot and looking forward seeing more posts here!
    Roberto.