In case you didn't know, Visual Studio is an incredibly powerful development environment! It's easy to be cynical about Microsoft's drag and drop demos - but the out of the box solution and project templates really help to get developers up and running with the minimum amount of fuss.
Which is fantastic - apart from when those templates get in the way and cause you to spend a long time scratching your head, before you then realise that you need to unwind the template a little.
The ASP.NET MVC5 template did exactly that for me recently.
When you new up an MVC project in Visual Studio, as well as the MVC framework itself the template brings along a host of other technologies too, such as: Json.NET, Modernizr, jQuery and Bootstrap.
Bootstrap has become ubiquitous on the web these days - but I still love it. Having spent many years in the past hand-crafting HTML, CSS and JavaScript across browsers and for multiple screen sizes, I still find it to be super convenient, easy to use and good looking!
So: a new MVC project in Visual Studio comes with a simple starter website that has a few Views and a Controller (no Model). And it looks fine:
And this is great, until you start adding your own pages, when - as I did - you start finding that Bootstrap doesn't work as you'd expect - and as the documentation says it should. Form controls, for instance, don't lie on the page as you think they ought to...
The culprit is the Site.css file - which (ahem) tweaks Bootstrap defaults to make the out of the box website behave nicely:
In particular the body and input definitions were causing unexpected results - so my advice: "nuke 'em from orbit - it's the only way to be sure".
Or in other words - delete these definitions - and you should find Bootstrap behaves as expected!
P.S. - I'm a long time Visual Studio user, but relatively new to MVC. I fooled around with it a few years ago and ran into this exact same problem back then. That's why I'm writing this down now...
Which is fantastic - apart from when those templates get in the way and cause you to spend a long time scratching your head, before you then realise that you need to unwind the template a little.
The ASP.NET MVC5 template did exactly that for me recently.
When you new up an MVC project in Visual Studio, as well as the MVC framework itself the template brings along a host of other technologies too, such as: Json.NET, Modernizr, jQuery and Bootstrap.
Bootstrap has become ubiquitous on the web these days - but I still love it. Having spent many years in the past hand-crafting HTML, CSS and JavaScript across browsers and for multiple screen sizes, I still find it to be super convenient, easy to use and good looking!
So: a new MVC project in Visual Studio comes with a simple starter website that has a few Views and a Controller (no Model). And it looks fine:
And this is great, until you start adding your own pages, when - as I did - you start finding that Bootstrap doesn't work as you'd expect - and as the documentation says it should. Form controls, for instance, don't lie on the page as you think they ought to...
The culprit is the Site.css file - which (ahem) tweaks Bootstrap defaults to make the out of the box website behave nicely:
In particular the body and input definitions were causing unexpected results - so my advice: "nuke 'em from orbit - it's the only way to be sure".
Or in other words - delete these definitions - and you should find Bootstrap behaves as expected!
P.S. - I'm a long time Visual Studio user, but relatively new to MVC. I fooled around with it a few years ago and ran into this exact same problem back then. That's why I'm writing this down now...
Comments
Post a Comment