Magazine style grid with Bootstrap

Question

I want to make a magazine style website and preferably with Bootstrap (if that's possible). I want it to look like this:

Can anyone tell me if it's possible to make something like this with Bootstrap? If not maybe someone can tell me if there is a good alternative. Thanks in advance.

score 1 · Accepted Answer · answered Mar 13 '18 at 08:56

make it like this:

<div class="container">
    <div class="row">
        <div class="col-sm-6"></div>
        <div class="col-sm-6"></div>
    </div>
    <div class="row">
        <div class="col-sm-8">
            <div class="row">
                <div class="col-sm-12"></div>
            </div>
            <div class="row">
                <div class="col-sm-12"></div>
            </div>
        </div>
        <div class="col-sm-4"></div>
    </div>
    <div class="row">
        <div class="col-sm-12"></div>
    </div>
</div>

You may have to set height for the col-sm-8's to make it look exactly same.

Thanks for you answer, I'll take a look at it – Baspa Mar 13 '18 at 08:59 — Baspa, Mar 13 '18 at 08:59

Kabiru Wahab · Answer 2 · 2018-03-13T09:09:13.793

Bootstrap Grid is used to create fluid layout uses a series of containers, rows, and columns to layout and align content. In these example the html layout can look as follow.

 <style>
.box{
    display: block;
    position: relative;
    width: 100%;
    height: 200px;
}
.left{
    float: left;
 }
 .right{
    float: right;
 }
</style>
<div class="row">
  <div class="row">
    <div class="col-sm-6 box">

    </div>
    <div class="col-sm-6 box"></div>
  </div> 
  <div class="row">
     <div class="col-sm-8 right box">

    </div>
    <div class="col-sm-8 right box">

    </div>
    <div class="col-sm-4 left box">

    </div>
  </div> 
  <div class="row">
    <div class="col-sm-12 box">

    </div>
  </div>  
</div>

Almost all of your CSS can be replaced with built-in classes in Bootstrap. — Klooven, Mar 13 '18 at 10:31

Magazine style grid with Bootstrap

2 Answers2