Align columns in Bootstrap. The first tile needs to be large

Question

I want to create a group of tiles using Bootstrap 3. On the page load, I get a list of names from server and I do a foreach on the names to create a grid. For now I have achieved the tiles all to be equal size. And it looks like this.

But what I really need is

The first tile needs to be col-6, the remaining col-6 need to be occupied by four of them, and then all the remaining will be col-3.

How could I do this dynamically when the data is been looped through?

This is my existing code, where the tiles are of equal size.

@foreach (var blogmaster in Model.Content.Children.Where(p => p.DocumentTypeAlias.Equals("blog")))
{
    foreach (var blog in blogmaster.Children)
    {
        <div class="col-md-3">
            <div style="background-color: #@blog.GetPropertyValue("backgroundColor"); height: 250px; margin-right: 5px">
                <h4 style="padding-top: 32px; padding-left: 10px; font-weight: 300;">@blog.Name</h4>
            </div>
        </div>
    }
}

Answer 1

NB: My Umbraco code may contain errors. But I hope I convey the idea that you can use.

1) You can improve your layout

1. Calculate the height of the large block considering the gap between two rows of small blocks.

2. You do not need nested blocks, because you have calculated the height of the large block and all the blocks are floated left.

Please check the layout:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.blog > div {
  padding: 0;
  padding-top: 5px;
}
@media (min-width: 992px) {
  .blog > div {
    padding-right: 5px;
  }
}
.blog > .col-md-3 > div {
  background: lightblue;
  height: 250px; 
}
.blog > .col-md-6 > div {
  background: orange;
  height: 505px; /* = 2 * col-md-3 + padding-top */
}
.blog h4 {
  font-weight: 300;
  margin-top: 0;
  padding-left: 10px; 
  padding-top: 32px; 
}

<div class="container-fluid">
  <div class="row blog">
    <div class='col-md-6'><div><h4>@blog.Name</h4></div></div>
    
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>

    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
  </div>
</div>

2) If only the first block has to be large

@foreach (var blogmaster in Model.Content.Children.Where(p => p.DocumentTypeAlias.Equals("blog"))) 
{
    var isFirst = true;

    foreach (var blog in blogmaster.Children) 
    {

        <div class="col-md-@(isFirst ? 6 : 3)">
            <div style="background-color: #@blog.GetPropertyValue("backgroundColor");">
                <h4>@blog.Name</h4>
            </div>
        </div>

        isFirst = false;
    }
}

3) If you need to repeat a large block

@foreach (var blogmaster in Model.Content.Children.Where(p => p.DocumentTypeAlias.Equals("blog"))) 
{
    var i = 0;

    foreach (var blog in blogmaster.Children) 
    {

        <div class="col-md-@(i % 9 == 0 ? 6 : 3)">
            <div style="background-color: #@blog.GetPropertyValue("backgroundColor");">
                <h4>@blog.Name</h4>
            </div>
        </div>

        i++;
    }
}

4) If you need a large block on the right side too

Apply the float: right property to the second large block when the screen width becomes 992px or more. I've defined a new special class .pull-md-right for this purpose. It's an analogue of the .pull-right class.

Please check new layout:
jsfiddle  •  codepen

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.blog > div {
  padding: 0;
  padding-top: 5px;
}
@media (min-width: 992px) {
  .blog > div {
    padding-right: 5px;
  }
  .pull-md-right {
    float: right !important;
  }
}
.blog > .col-md-3 > div {
  background: lightblue;
  height: 250px; 
}
.blog > .col-md-6 > div {
  background: orange;
  height: 505px; /* = 2 * col-md-3 + padding-top */
}
.blog h4 {
  font-weight: 300;
  margin-top: 0;
  padding-left: 10px; 
  padding-top: 32px; 
}

<div class="container-fluid">
  <div class="row blog">
    <div class='col-md-6'><div><h4>@blog.Name</h4></div></div>
    
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>

    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>

    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-6 pull-md-right'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>

    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
    <div class='col-md-3'><div><h4>@blog.Name</h4></div></div>
  </div>
</div>

And the code can be like this.

@foreach (var blogmaster in Model.Content.Children.Where(p => p.DocumentTypeAlias.Equals("blog"))) 
{
    var i = 0;

    foreach (var blog in blogmaster.Children) 
    {

        if (i % 18 == 0)
        {
            <div class="col-md-6">
        }
        else if (i % 18 == 11)
        {
            <div class="col-md-6 pull-right">
        }
        else 
        {
            <div class="col-md-3">
        }

                <div style="background-color: #@blog.GetPropertyValue("backgroundColor");">
                    <h4>@blog.Name</h4>
                </div>
            </div>

        i++;
    }
}