Are you using EPiServer 7 or 7.5?

Ah sorry, 7.5.

In Alloy Templates MVC for EPiServer 7.5 you can find the DependencyResolverInitialization. Here you can see that the ContentAreaRenderer is replaced with AlloyContentAreaRenderer.

The AlloyContentAreaRenderer overrides the method GetContentAreaItemCssClass and adds the Tag given when rendering the block.

On the start page, the tag comes from "Display Options" which is a new feature in 7.5 where you can let the Editor set the Tag in the same way as you use the Tag when rendering Content with Partial Views.

If you open Global.asax.cs you can see that three Display Options are added: Full, Wide and Narrow that are represented by the three Tags "span12", "span8" and "span4".

The Teaser Blocks on the start page are added to the Content Area with the Narrow Display Option, hence they are rendered with the span4 tag (the tag name is also used as css class in this implementation).

Thank you Alf for a great explanation! I will look in to the code and try to understand it! :)

Do so, you can read more on Display Options in the Documentation Section.

One more question, where would i add the code shown in the link?

What i want is to be able to add three blocks in a row like on the alloy start page.

In Alloy it is added in Global.asax.cs in Application_Start, but I would recommend that you try to add it in an initialization module

If you will eventually upgrade to Bootstrap v3 - this may come handy :)

http://www.tech-fellow.net/2014/02/bootstrap-aware-episerver-content-area-render/

I must say i find it quit hard knowing which of all classes i need to implement my self, and what in those classes, in order to be able to put block next to each other. DependencyResolverInitialization, AlloyContentAreaRenderer, ContentAreaRenderer and so on...

ContentAreaRenderer comes from the EPiServer API.

AlloyContentAreaRenderer inherits ContentAreaRenderer but contains some special features.

DependencyResolverInitialization is responsible to replace the ordinary ContentAreaRenderer with the Alloy Template AlloyContentAreaRenderer.

You need to create your own ContentArea Renderer that inherits from ContentAreaRender. And similar to the AlloyContentAreaRenderer, you override the GetContentAreaItemCssClass method and make sure that it returns a css class of your choice.

You also need to create an InitializableModule that also implements the IConfigurableModule Interface (similar to DependencyResolverInitialization) that performs container.For<ContentAreaRenderer>().Use<NAME-OF-YOUR-OWN-CONTENTAREARENDERER>();

Nobody said life would be easy :)

In AlloyContentAreaRenderer, in the GetCssClassForTag method, why is there no span4?

I thought there would be a case "span4" return Narrow?

switch (tagName.ToLower())
            {
                case "span12":
                    return "full";
                case "span8":
                    return "wide";
                case "span6":
                    return "half";
                default:
                    return string.Empty;
            }

In Alloy Template, the Tag itself is span#, where # represents a number.

If you look in GetContentAreaItemCssClass you will see the following string.format

string.Format("block {0} {1} {2}", GetTypeSpecificCssClasses(contentAreaItem, ContentRepository), GetCssClassForTag(tag), tag)

Say that your Tag has the value span12, the output of the string format might be something like this:
"block NothingInteresting full span12"

Say that your Tag has the value span4, the output of the string format might be something like this:
"block NothingInteresting  span4"

The word block is part of the string,
{0} is replaced with the value from GetTypeSpecificCssClasses and is not really interesting in this case,
{1} is replaced with GetCssClassForTag will return a word if Tag is span12, span8 or span6 - otherwise it will return an empty string.
The last part, {2}, is your Tag. And again, the Tags in Alloy are span#

It's working now. I will do some debugging so that i really understand the code. Thank you for your patiens Alf, it really mean a lot to me!