How to design a custom grid using bootstrap 3 grid

Question

Is it possible to have a grid design like the image below with the use of bootstrap 3 framework ?

Note: Blocks are images ...

i have tried here is the example

<div class="container">
    <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4"> <a class="thumbnail" href="">Box 1</a></div>
        <div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 2</a></div>
        <div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 3</a></div>
        <div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 4</a></div>
        <div class="clearfix visible-md"></div>
    </div>
    <div class="row">
        <div class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4 col-md-4 col-md-offset-4"> <a class="thumbnail" href="">Box 5</a></div>
        <div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 6</a></div>
        <div class="clearfix visible-md"></div>
    </div>
    <div class="row">
        <div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 8</a></div>
        <div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 9</a></div>
        <div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 10</a></div>
        <div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 11</a></div>
        <div class="col-xs-2 col-sm-2 col-md-2"><a class="thumbnail" href="">Box 12</a></div>
        <div class="clearfix visible-md"></div>
    </div>
</div><!-- /.container -->

Answer 1

Try this...

<div class="container">
    <div class="row no-gutter">
        <div class="col-xs-4 col-xs-offset-1">
            <div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/600"></a></div>
            <div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
            <div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
        </div>
        <div class="col-xs-4">
            <div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
            <div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
            <div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/600x300"></a></div>
            <div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
            <div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
        </div>
        <div class="col-xs-2">
            <div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
            <div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
            <div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>  
        </div>
    </div>
</div><!-- /.container -->

CSS to override padding/margins etc..

.row.no-gutter [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

.row.no-gutter .thumbnail {
  margin-bottom: 0;
  padding: 0;
  margin-right: 0;
  margin-left: 0;
}

.row.no-gutter .thumbnail>img {
  width: 100%;
}

Demo: http://bootply.com/108971

Answer 2

Yes, you can achieve it by following this instructions:

1. Go to the bootstrap customize build page.
2. Go to Layout and grid system section.
3. Modify the @grid-columns from the default value 12 to the value that will work with your design, I think 15 will be great.
4. Also modify @grid-gutter-width from the default value 30px to be something like 15px, so can view good with your design "this value used to define the space between the columns".
5. Download your custom build to start your project which will be like this image:

hope this will help you.