• 0

Guide to getting LESS working with Twitter Bootstrap in MVC 5


Question

What a pain in the ass to figure out when many of the other guides are for older versions or use dead projects.  I'm throwing this up in case anyone else wants to get LESS in MVC5.

 

What I'll be using:

Visual Studio 2013 Professional (Express versions probably work fine)

Web Essentials 2013 (A free extension, not required but nice to have)

Twitter Bootstrap (Just awesome)

 

So... LET THE FUN BEGIN

 

1.  Start with a new project then go to nuget and let's download what we need.  If you are unfamiliar with nuget, its an awesome package management service.

Go to Tools > Library Package Manager > Manage NuGet Packages for solution...

 

2.  Since Visual Studio 2013's release, there are already updates you can run on your project.

Click Updates and for the purpose of this guide, update:

> jQuery

> Microsoft ASP.NET Web Optimization Framework

> ANTLRv3

 

After this is done  Click Online on the left side then in the search box type "Bootstrap Less Source".  The current version is 3.0.2.

 

You'll see in the dependencies that LESS will also be installed. Install it.

 

Next, search for Bundle Transformer: LESS, Install this.

 

Finally, we need a javascript engine.  Bundle Transformer will give you a head up about this and give you two options.  Either MSIE or V8.  I'll be installing V8 because it sounds cool.

 

Search for V8 and the first one should be "JavaScript Engine Switcher for .Net: V8", install it.

 

3.  Associate V8 with Bundle Transformer (BT).

BT needs to know which engine to use so it can compile your LESS files.  So in your solution, scroll to the bottom and open "Web.Config".  If your config file looks like hell, Visual Studio has the best button of any IDE.  Click Edit > Advanced > Format Document.  SURPRISE! VS retabbed the structured XML!

 

To associate add the <less> block:

<bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
    <less useNativeMinification="false" ieCompat="true" strictMath="false" strictUnits="false" dumpLineNumbers="None">
      <jsEngine name="V8JsEngine" />
    </less>
    <core>
      <css>
        <minifiers>
          <add name="NullMinifier" type="BundleTransformer.Core.Minifiers.NullMinifier, BundleTransformer.Core" />
        </minifiers>
        <translators>

Save it.

 

4. Creating your bundles

Bundles are the new Jesus of the internet.  They simply make life easier.  For certain types like .js, MVC allows wildcards which is awesome.

 

Go to App_Start > BundleConfig.cs

 

First we need to type in our using statements so the file knows which libraries to use.

using System.Web.Optimization;
using BundleTransformer.Core.Builders;
using BundleTransformer.Core.Orderers;
using BundleTransformer.Core.Transformers;

In the BT documentation there is another way to build your bundles but for the purpose of this, I'll be doing it the long way.

 

Now everything inside the scope of RegisterBundles, delete (This is entirely optional.)

 

Now within the same scope, create new instances of variables.

            // Variables
            bundles.UseCdn = true;
            var nullBuilder = new NullBuilder();
            var cssTransformer = new CssTransformer();
            var jsTransformer = new JsTransformer();
            var nullOrderer = new NullOrderer();

Next, associating our scripts

            // JavaScript

            // jQuery
            var jquery = new Bundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js");
            jquery.Builder = nullBuilder;
            jquery.Transforms.Add(jsTransformer);
            jquery.Orderer = nullOrderer;

            bundles.Add(jquery);

            // Modernizr
            var modernizr = new Bundle("~/bundles/modernizr").Include(
                "~/Scripts/modernizr-2.6.2.js");
            modernizr.Builder = nullBuilder;
            modernizr.Transforms.Add(jsTransformer);
            modernizr.Orderer = nullOrderer;

            bundles.Add(modernizr);

            // Scripts
            var js = new Bundle("~/bundles/js").Include(
                "~/Scripts/bootstrap.min.js",
                "~/Scripts/myScripts.js");
            js.Builder = nullBuilder;
            js.Transforms.Add(jsTransformer);
            js.Orderer = nullOrderer;

            bundles.Add(js);

            // POST: Validation
            var jqueryVal = new Bundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate.unobtrusive.min.js",
                "~/Scripts/jquery.validate.min.js");
            jqueryVal.Builder = nullBuilder;
            jqueryVal.Transforms.Add(jsTransformer);
            jqueryVal.Orderer = nullOrderer;

            bundles.Add(jqueryVal);

jQuery should always go first.  Next Styles.  What's nice about this is at compile time it automatically minifies the CSS.

            // Styles
            var css = new Bundle("~/bundles/css").Include(
                "~/Content/bootstrap/bootstrap.less");
            css.Builder = nullBuilder;
            css.Transforms.Add(cssTransformer);
            css.Transforms.Add(new CssMinify());
            css.Orderer = nullOrderer;

            bundles.Add(css);

Finally, we tell the bundles to optimize.

            BundleTable.EnableOptimizations = true;

Ok so let's run our project quick!

 

OH GOD WHAT HAPPENED?!!!  ohhh the humanity!  The styles are dead!!  ohhhhhh!!!!!!!!!

 

Hang on!  On to step 5!

 

5. Associate our bundles with the layout

Go to Views > Shared > _Layout.cshtml

 

In the header add:

    <!-- styles -->
    @Styles.Render("~/bundles/css")
    <!-- /styles -->
    @Scripts.Render("~/bundles/modernizr")

and down on the bottom of the body add:


    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/js")

Compile the project again and whaddya know LESS WORKS!  Now you can configure your variables using LESS and save time!

 

KNOWN ISSUES:

 

Google is not happy with query strings.

2 Bad requests atm, tomorrow may have update.

Modernizr is not production version, get that at their website.

 

FINALLY:

If anyone knows some better solutions or fixes.  DO TELL!

7 answers to this question

Recommended Posts

  • 0

I thought less was the 'opposite of more':

Less  is  a program similar to more (1), but it has many more features.  Less does not have to read the entire input file before starting, so with large input files it starts up faster than text editors like vi (1).  Less uses termcap (or terminfo on some systems), so  it  can run  on  a  variety  of  terminals.  There is even limited support for hardcopy terminals.  (On a hardcopy terminal, lines which should be printed at the top of the screen are prefixed with a caret.)

Commands are based on both more and vi.  Commands may be preceded by a decimal number, called N in the descriptions below.  The number  is used by some commands, as indicated.
  • 0

Hello, Kalint!

Thanks for a great guide! But there is one problem: is not recommended to use the `CssMinify` and `JsMinify` classes together with a Bundle Transformer. I will not explain why it should not do, because I have written about this in the documentation. As most simple solution to this problem I recommend to install the BundleTransformer.MicrosoftAjax package.

  • 0
  On 07/12/2013 at 11:49, Taritsyn said:

Hello, Kalint!

Thanks for a great guide! But there is one problem: is not recommended to use the `CssMinify` and `JsMinify` classes together with a Bundle Transformer. I will not explain why it should not do, because I have written about this in the documentation. As most simple solution to this problem I recommend to install the BundleTransformer.MicrosoftAjax package.

Hm... I will look into this!

This topic is now closed to further replies.
  • Posts

    • That's nice and all. but I generally just stick with Lutris paired with 'ge-proton' (which gets updated fairly often (June 1st was last update) as the 'ge-proton' entry in Lutris uses stuff here... https://github.com/GloriousEggroll/proton-ge-custom/releases ) and the like to play my games. p.s. if a person wants to stick with a specific version from that link you can download a specific version and extract it to "~/.local/share/lutris/runners/proton/". then select it in Lutris options on game shortcut is the basic idea. because by default the standard 'ge-proton' entry will automatically get updated which can occasionally cause issues even though it's usually fine. but manually setting it on a specific version will prevent the standard updates on 'ge-proton' from messing with it on a particular game you may have issues with if that gets updated etc. one good example of the 'ge-proton' updates messing with a game in particular is the 'offline' version of RDR2 1491.50 as I setup a specific version there and after removing the 'vulkan-1 (native)' entry in 'Wine configuration' (if you don't remove this the game flat out won't start up) is when the 'ge-proton' updates, it will restore that 'vulkan-1 (native)' entry and prevent the game from working. you can always remove the entry on the RDR2.exe in Wine configuration specifically after updates, but doing that everytime that updates will get old quickly. hence, keeping it on a specific GE Proton version stops me from having to mess with it as then you just adjust it once and you are done with it. also, when using 'bat' files to start a game (like Hitman: WoA for example using Peacock etc) I had some issues with GE Proton after '9-27', so I got the game locked to '9-27' (April 1st) instead of the current '10-4' (June 1st).
    • Sam Altman says AI could soon help with discovering new knowledge by Hamid Ganji OpenAI is currently at the forefront of developing powerful AI models, while its ChatGPT product is rewriting our traditional way of looking for new information. The company's CEO, Sam Altman, now says AI could even help humans discover new knowledge. He also described AI agents as junior employees. Speaking at the Snowflake Summit 2025, Altman boasted that AI agents can act like junior employees, saying, "You hear people that talk about their job now is to assign work to a bunch of agents, look at the quality, figure out how it fits together, give feedback, and it sounds a lot like how they work with a team of still relatively junior employees." OpenAI CEO also added AI agents could help humans discover new knowledge in "limited cases" or "figure out solutions to business problems that are kind of very non-trivial." While the use of AI for scientific discovery is still viewed with skepticism, the technology has proven its capabilities for new discoveries in several cases. For example, the Microsoft Discovery platform, designed for accelerating scientific research and development by AI agents, was recently able to discover a new chemical for cooling data centers in just 200 hours, a process that normally takes years to research and complete by humans. AI firms are also shifting their focus toward developing AI agents capable of performing various tasks. OpenAI recently unveiled Codex, which contains AI agents for helping programmers write and debug code. According to Altman, OpenAI engineers are already using Codex. As AI agents become more intelligent, more employees should be concerned about losing their jobs. Companies have already started replacing some specific roles with AI. For example, Duolingo has replaced its contract workers with AI, while Shopify managers need to provide reasons why AI cannot handle a job before seeking approval for new hires. Via: Business Insider
    • I personally don't think there will be many survivors past the ESU date, but I can be wrong🙂 >Firefox still supports Windows 7 (until the end of August), which will be just over 16 years since release. Well, yes, but it's an ESR version, which kind of doesn't count as fresh for me. So the last mainline version of Firefox with W7 support was 115, which was released in 2023, exactly around the W7 ESU expiration.
    • Hey, sounds like it’s definitely time for an upgrade. The R7000 had an excellent run! If you want lots of wired ports and future-proofing, the Asus RT-BE88U is a killer choice. It’s got 2x 10GbE, 4x 2.5GbE, and handles WiFi 7 like a champ. Super fast, stable, and the ASUS firmware is solid with loads of features. The TP-Link BE900 is also great, sleek design, strong performance, and a combo 10G port (RJ45/SFP+), but it has fewer wired ports than the Asus. Netgear RS700S is powerful too, but the firmware isn’t as flexible and only has one 10G port. It might feel familiar from your R7000. If wired ports are a big deal, maybe adding a 2.5G or 10G switch later gives you more options. My vote is RT-BE88U all the way.
    • WhatsApp beta users can now craft their own AI chatbots - here's why you might want one by Paul Hill Since the end of 2022, tech companies, and even non-tech companies, have been clamoring to pile AI into their services. Despite what many people say about not liking AI, plenty of people are still using it every day, making it a key offering. Not only that, but for public companies like Meta, the inclusion of AI does very well with investors, so that’s another reason it’s being added. While the most common chatbot people talk about is ChatGPT, which is pretty faceless, there is demand for AI chatbots with a face, this is why people use tools like Character.ai and Replika. One of the only big tech firms that has gone down this route is Meta, which lets you create and share AI characters. To date, some of Meta’s apps, like Messenger, allow you to chat with these AI personas but you can’t do that yet in the stable version of WhatsApp. The company is now testing it with the Android Beta and when it’s ready, it should make a more seamless experience across Meta’s applications. Many of the popular bots that people use including ChatGPT, Gemini, and DeepSeek are faceless and offer the same tone out of the box. To be fair to Gemini, it does allow all users to create Gems now, and they actually offer a bit more flexibility than just creating characters to talk to like in Messenger. The chatbots in Messenger have the benefit of being in the Messenger app, which most people use and giving them a personality and making them feel like an “AI person” fits better in Messenger. Whether we really need these AI bots in Messenger is still up for debate. It’s quite a new feature and some people may find some good uses for them, but as mentioned, they don’t seem as flexible, or provide as detailed responses as custom bots made on Poe or Gemini Gems. They are definitely for having casual conversations with. WhatsApp's new AI chatbot creator We’ve known that the chatbot feature was coming to WhatsApp for a long time already. WhatsApp beta for Android 2.25.1.26, released in January, included the feature for some beta testers. With the latest WhatsApp beta for Android 2.25.18.4, it seems like WhatsApp is trialing the feature with members of the public, suggesting its release is imminent. Screenshots of the app, obtained by WABetaInfo show that you can describe your AI, select its personality, its traits, its image and more. The process seems to be the same as the process already available in Messenger. One of the nice things that Meta provides when creating these AI bots is templates and suggestions such as the attitude of the bot or the instructions for the bot. This is the same as in Messenger and allows you to get started chatting with your custom bots faster. In terms of sharing, you have the option to make the bots private, share them with friends (at least in the case of Messenger and presumably WhatsApp), or share them publicly. If you make something specific for your needs then the private option would be best, while bots with mass appeal could be set to public. Creating bots in WhatsApp is straightforward once you have access to the AI Studio. During the creation process you’ll need to name your AI, define its personality, choose a tone, design an avatar (some will be made for you with Meta’s AI), and create a catchy tagline to attract users if you ever set it to public. Much of the information will be pre-filled based on the initial details you provide about the AI’s role and personality. Some ideas for bots that you can create include a motivational coach, a travel recommendation AI, or a daily planner. While setting up these AI bots is easy to do, users may find their actual benefits limited. Besides the nagging feeling that you’re socializing with a clever bit of code, Meta seems to truncate the answers of these bots so they don’t rattle on, but depending on what you want them to do, you may need them to give a lengthy response, but they won’t. What personalized AI chatbots could offer If you are looking for an AI that chats to you conversationally like real people do, then this could be the feature you’re looking for. The fact that you can personalize bots with specific traits is something you can’t do as easily in apps like ChatGPT and Gemini and the fact that they have an avatar makes them more connectable too. Two of the defining features of Meta’s AI implementation is the ability to create custom AIs with a unique personality and to share them publicly. If you are having difficulty thinking of what a bot could be instructed to do, you can easily find community bots and interact with those instead and may find they provide some value. While these bots could be interesting for some people, they do carry the same risks as other AIs and that is that they can hallucinate. There was also a case in the UK where a man had been encouraged by his Replika to break into Buckingham Palace with a crossbow to kill the then head of state. Similar issues to this could result from Meta’s AI chatbots in time. Potential pitfalls While the feature is pretty interesting there are some things to be aware of. Firstly, the feature is still in beta on WhatsApp so you may run into issues and things could change once it’s finally released. Meta also states that it uses your interactions to improve its AI services, for this reason it is essential not to share personal information as Meta could read it. While Meta does limit the creation of bots that go against its standards, the company also warns that bots can output harmful content, so this could be dangerous for impressionable people who end up acting on what an AI has said with negative outcomes. What to watch for next It’s not clear when these AI chatbots will be available in the stable channel but given that a wider rollout is underway among beta users perhaps we are not too far off. For most people, this is not going to be a must-have feature, just a nice to have. We’ve been using WhatsApp to chat with friends for years, so clearly the app is just fine without the inclusion of AI, but when it’s available, people may be able to get more value out of the app. When the feature launches for all users, bots should be discoverable in the same way they are on Messenger where they’re categorized by category allowing users to begin chats easily. It remains to be seen how users will interact with this feature in the long-run. Last year, we reported that Meta was looking to give bots profiles on its social networks and this was met by somebacklash in our comments section.
  • Recent Achievements

    • Enthusiast
      Epaminombas went up a rank
      Enthusiast
    • Posting Machine
      Fiza Ali earned a badge
      Posting Machine
    • One Year In
      WaynesWorld earned a badge
      One Year In
    • First Post
      chriskinney317 earned a badge
      First Post
    • Week One Done
      Nullun earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      186
    2. 2
      snowy owl
      130
    3. 3
      ATLien_0
      129
    4. 4
      Xenon
      119
    5. 5
      +FloatingFatMan
      93
  • Tell a friend

    Love Neowin? Tell a friend!