twitter-bootstrapbootstrap-4grid-layout

Magazine style grid with Bootstrap


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

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.


Solution

  • 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.