Hi,

You could try to move your code from Global.asax into InitialozationModule

Hi Angela,

Please find the steps below to implements display options for Content Areas.

Step1 

Add the below classes 

public class DisplayOptionWithCss : DisplayOption

{
public DisplayOptionWithCss() { }
public DisplayOptionWithCss(string id, string name, string tag, string iconClass, string cssClass)
{
this.Id = id;
this.Name = name;
this.Tag = tag;
this.IconClass = iconClass;
this.CssClass = cssClass;
}
public string CssClass { get; set; }
}

step2 

public class ContentAreaRendererWithDisplayOptionWithCss : ContentAreaRenderer
{
private readonly DisplayOptions _displayOptionsOwn;
private readonly IContentRepository _contentRepositoryOwn;
public ContentAreaRendererWithDisplayOptionWithCss()
: this(EPiServer.ServiceLocation.ServiceLocator.Current.GetInstance<IContentRenderer>(), EPiServer.ServiceLocation.ServiceLocator.Current.GetInstance<TemplateResolver>(), EPiServer.ServiceLocation.ServiceLocator.Current.GetInstance<ContentFragmentAttributeAssembler>(), EPiServer.ServiceLocation.ServiceLocator.Current.GetInstance<IContentRepository>(), EPiServer.ServiceLocation.ServiceLocator.Current.GetInstance<DisplayOptions>())
{
}
public ContentAreaRendererWithDisplayOptionWithCss(IContentRenderer contentRenderer, TemplateResolver templateResolver, ContentFragmentAttributeAssembler attributeAssembler, IContentRepository contentRepository, DisplayOptions displayOptions)
: base(contentRenderer, templateResolver, attributeAssembler, contentRepository, displayOptions)
{
_displayOptionsOwn = displayOptions;
_contentRepositoryOwn = contentRepository;
}

public string DefaultChildrenCssClass { get; set; }
protected override void RenderContentAreaItem(HtmlHelper htmlHelper, ContentAreaItem contentAreaItem, string templateTag, string htmlTag, string cssClass)
{
ViewContext viewContext = htmlHelper.ViewContext;
DefaultChildrenCssClass = viewContext.ViewData["defaultchildrencssclass"] as string;
IContent content = contentAreaItem.GetContent(this._contentRepositoryOwn);
if (content == null)
{
return;
}

//var templateModel = this.ResolveTemplate(htmlHelper, content, templateTag);

base.RenderContentAreaItem(htmlHelper, contentAreaItem, templateTag, htmlTag, " " + cssClass +Convert.ToString(content.Property["CssClass"].Value));


}

protected override string GetContentAreaItemTemplateTag(HtmlHelper htmlHelper, ContentAreaItem contentAreaItem)
{
DisplayOption displayOption = LoadDisplayOption(contentAreaItem);
if (displayOption != null && !string.IsNullOrEmpty(displayOption.Tag))
{
return displayOption.Tag;
}
return this.GetContentAreaTemplateTag(htmlHelper);
}

protected override void BeforeRenderContentAreaItemStartTag(System.Web.Mvc.TagBuilder tagBuilder, EPiServer.Core.ContentAreaItem contentAreaItem)
{
var displayOption = LoadDisplayOption(contentAreaItem) as DisplayOptionWithCss;

if (displayOption != null && !string.IsNullOrEmpty(displayOption.CssClass))
{
tagBuilder.AddCssClass(displayOption.CssClass);
if (displayOption != null)
tagBuilder.Attributes["data-displayOption"] = displayOption.Id;
}
else
AddNonEmptyCssClass(tagBuilder, DefaultChildrenCssClass);
}

protected DisplayOption LoadDisplayOption(ContentAreaItem contentAreaItem)
{
string displayOptionId = null;
if (contentAreaItem.RenderSettings != null && contentAreaItem.RenderSettings.ContainsKey(EPiServer.Core.Html.StringParsing.ContentFragment.ContentDisplayOptionAttributeName))
displayOptionId = "" + contentAreaItem.RenderSettings[EPiServer.Core.Html.StringParsing.ContentFragment.ContentDisplayOptionAttributeName];
if (string.IsNullOrEmpty(displayOptionId))
return null;
return _displayOptionsOwn.Get(displayOptionId);
}
}

step3

Intialization module

[InitializableModule]
[ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
public class ContentAreaDisplayOptionInitialization : IInitializableModule
{
public void Initialize(InitializationEngine context)
{
//Add initialization logic, this method is called once after CMS has been initialized
var options = ServiceLocator.Current.GetInstance<DisplayOptions>();

options
.Add(new DisplayOptionWithCss(ContentAreaTags.Col20, "Full width", "", "col20 LayoutGrid","columns twenty"))
.Add(new DisplayOptionWithCss(ContentAreaTags.Col15, "75% width", "", "col15 LayoutGrid", "columns fifteen"))
.Add(new DisplayOptionWithCss(ContentAreaTags.Col14, "66% width", "", "col14 LayoutGrid", "columns fourteen"))
.Add(new DisplayOptionWithCss(ContentAreaTags.Col10, "50% width", "", "col10 LayoutGrid", "columns ten"))
.Add(new DisplayOptionWithCss(ContentAreaTags.Col6, "33% width", "", "col6 LayoutGrid", "columns six"))
.Add(new DisplayOptionWithCss(ContentAreaTags.Col4, "25% width", "", "col5 LayoutGrid", "columns five"));

}

public void Preload(string[] parameters) { }

public void Uninitialize(InitializationEngine context)
{
//Add uninitialization logic
}
public static class ContentAreaTags
{
public const string Col4 = "four";
public const string Col6 = "six";
public const string Col10 = "ten";
public const string Col14 = "fourteen";
public const string Col15 = "fifteen";
public const string Col20 = "twenty";
}
}

step4

Add the CSS styles in client resource  folder .

@media only screen and (min-width:768px) {
.columns {
margin-left: 1.0101%;
float: left;
}

.columns:first-child, .alpha {
margin-left: 0;
}

.one {
width: 4.0404%;
}

.two {
width: 9.09091%;
}

.three {
width: 14.14141%;
}

.four {
width: 19.19192%;
}

.five {
width: 24.24242%;
}

.six {
width: 29.29293%;
}

.seven {
width: 34.34343%;
}

.eight {
width: 39.39394%;
}

.nine {
width: 44.44444%;
}

.ten {
width: 49.49495%;
}

.eleven {
width: 54.54545%;
}

.twelve {
width: 59.59596%;
}

.thirteen {
width: 64.64646%;
}

.fourteen {
width: 69.69697%;
}

.fifteen {
width: 74.74747%;
}

.sixteen {
width: 79.79798%;
}

.seventeen {
width: 84.84848%;
}

.eighteen {
width: 89.89899%;
}

.nineteen {
width: 94.94949%;
}

.twenty {
width: 100%;
}
}

If you are using Bootstrap v3 - this package may become handy. 

http://nuget.episerver.com/en/OtherPages/Package/?packageId=EPiBootstrapArea