The issue is in v2 and v3 changes in Bootstrap library. Bootstrap v3 has fluid layout (grid system for mobile, tablet, desktop and super duper screens). What we dd was to make changes in ContentArea renderer to add necessary styles for various screen sizes based on some kind of logic. The logic currently is hardcoded - but it can follow predefined rule-set, e.g., col-lg-X, col-md-Y. It means that if block takes X part of the screen on large desktops, it may take only Y on medium screen (tablets), etc. So it really depeds case by case.

Maybe you can provide more details about the issue then could be more precise and not flying around :)

Thanks for your answer!

I will give you some code examples:

Here is a page that has 2 columns for blocks:

<div class="content">
    <div id="content" class="container">
        <div class="row">
            <div class="col-md-8">
                @Html.PropertyFor(m => m.CurrentPage.BlockLeftColumnBlock, new { Tag = "span8" })
            </div>
            <div id="sidebar-right" class="col-md-4 sidebar hidden-print">
                @Html.PropertyFor(m => m.CurrentPage.BlockRightColumnBlock, new { Tag = "span4" })
            </div>
        </div>
    </div>
</div>

When put in some dummy block into these 2 content areas then we get following html:

<div class="content">
    <div id="content" class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="block linkblock span4">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">Test 1</h3>
                        </div>
                        <ul class="nav nav-list">
                            <li><a href="#">Test 1</a></li>
                        </ul>
                    </div>
                </div>
                <div class="block linkblock span4">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">Test 2</h3>
                        </div>
                        <ul class="nav nav-list">
                            <li><a href="#">Test 2</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="sidebar-right" class="col-md-4 sidebar hidden-print">
                <div class="block linkblock span4">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">Test 3</h3>
                        </div>
                        <ul class="nav nav-list">
                            <li><a href="#">Test 3</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

The left content area will get the 2 blocks in 2 rows instead of 1... And for those blocks that have an alternative wide view we only get the narrow version... The way we have registered the wider version in our TemplateCoordinator.cs is like this:

viewTemplateModelRegistrator.Add(typeof(CalendarReaderBlock), new TemplateModel
{
    Name = "CalendarReaderBlockWide",
    Tags = new[] { "span8", "span12" },
    AvailableWithoutTag = false,
    Path = BlockPath("CalendarReaderBlockWide.cshtml")
});

As you can see we use "spanX" instead of "col-md-X" but we have actually replaced every occurance of spanX with col-md-X where found in the readable code (maybe there is more in some dll's?) and tried witout success (and with some weird results...)

So the main issue is that we don't get any balanced result... In the content areas where 2 blocks should render side by side on the same row, these are actually rendered on two different rows... And also we have problem with the content area using the standard (narrow) version instead of the wider version...

All the code that is used for balancing and content area rendering is standard alloy which we haven't edited.

Any ideas?

I would start by being absolutely 100% sure that all instances of spanX are replaced by col-md-X. spanX is obsolete in bootstrap 3 and will not work. There are no spanX in the dlls, as it is used only in the Alloy Templates.

An easy way to find these is by using the regular expression option in the VS search

http://screencast.com/t/GFjQIH105Sub

This package may become handy :)

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