One way would be to create a display template to render the content area.

1. Create a new .cshtml template in the folder: Views > Shared > DisplayTemplates
2. Call to the new template when rendering the page. e.g. @Html.PropertyFor(f => f.CurrentPage.MainContentArea, "MyAreaDisplayName")

"MyAreaDisplayName" relates to the name of the .cshtml file created.

If you need to do this I would suggest creating your own ContentAreaRenderer (if you haven't already) and overriding RenderContentAreaItem like this:

public class MyContentAreaRenderer : ContentAreaRenderer
{
    protected override void RenderContentAreaItem(HtmlHelper htmlHelper, ContentAreaItem contentAreaItem, string templateTag, string htmlTag, string cssClass)
    {
        htmlHelper.RenderContentData(contentAreaItem.GetContent(), true, templateTag);
    }
}

As a word of warning though - without the wrapping element, the editing UI isn't great (you can't drag blocks around, choose display options, etc.). The better option is to accept that there will be a wrapping element and add the appropriate classes to make it work with your front end.

As an alternative which keeps the edit functionality you might want to render the wrappers when in edit mode and remove them when the rest of the time like this:

protected override void RenderContentAreaItem(HtmlHelper htmlHelper, ContentAreaItem contentAreaItem, string templateTag, string htmlTag, string cssClass)
{
    if (PageEditing.PageIsInEditMode)
    {
        base.RenderContentAreaItem(htmlHelper, contentAreaItem, templateTag, htmlTag, cssClass);
    }
    else
    {
        htmlHelper.RenderContentData(contentAreaItem.GetContent(), true, templateTag);
    }
}

You'll still have issues though in that the rendering will be inconsistent between views so I'd still recommend trying to work with the wrapping elements if at all possible.

you can take a look at this package (it actually has almost nothing in common with Bootstrap anymore :) https://github.com/valdisiljuconoks/EPiBootstrapArea

Thanks Paul!

I rather like the opt in version Episerver already has implemented with HasContainer, so I made some changes.

    public class CustomContentAreaRenderer : ContentAreaRenderer
    {
        protected override void RenderContentAreaItem(HtmlHelper htmlHelper, ContentAreaItem contentAreaItem, string templateTag, string htmlTag, string cssClass)
        {
            if (IsInEditMode(htmlHelper) || ShouldRenderChildrenWrappingElement(htmlHelper))
            {
                base.RenderContentAreaItem(htmlHelper, contentAreaItem, templateTag, htmlTag, cssClass);
            }
            else
            {
                htmlHelper.RenderContentData(contentAreaItem.GetContent(), true, templateTag);
            }
        }

        protected virtual bool ShouldRenderChildrenWrappingElement(HtmlHelper htmlHelper)
        {
            bool? flag = (bool?)htmlHelper.ViewContext.ViewData["haschildrencontainer"];
            return flag ?? true;
        }
    }

Usage:

@Html.PropertyFor(x => x.CurrentPage.ContentArea, new { HasContainer = false, HasChildrenContainer = false })

You can try this way:

1. Install package

PM > Install-Package EPiBootstrapArea

2. OR Render content area property like below:

@Html.PropertyFor(m => m.MyCOntentArea,
new
{
   HasContainer = false,
   HasItemContainer = false,
   HasEditContainer = false
})