I apologize for my amateurish question:

There is a site layout of such a plan:

[1]: https://i.stack.imgur.com/aylFw.jpg

All blocks on the site are placed in a grid, each block has a height of either x, or 2x, or 3x, the width is also y, or 2y.

I try to do on Bootstrap, but, because of the height, the bootstrap places the 4th block not under the 2nd, but under the first, from the new line. Example: https://www.codeply.com/go/dwyEv5gprw

Tell me how to solve this issue? Thank you in advance!

    1 answer 1

    These are features of the 4th bootstrap. Therefore, you have 2 options: either simply connect the 3rd, and then everything will work (only padding columns: 0! Important must be set):

    .col-lg-4, .col-lg-8{ padding: 0 !important; } p{ text-align: center; font-size: 24px; } .feature{ border: 1px solid black; } .height1{ height: 150px; } .height2{ height: 300px; } 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <section id="features"> <div class="container"> <div class="row"> <div class="col-lg-4"> <div class="feature height2"> <p>1</p> </div> </div> <div class="col-lg-4"> <div class="feature height1"> <p>2</p> </div> </div> <div class="col-lg-4"> <div class="feature height1"> <p>3</p> </div> </div> <div class="col-lg-4"> <div class="feature height1"> <p>4</p> </div> </div> <div class="col-lg-4"> <div class="feature height1"> <p>5</p> </div> </div> <div class="col-lg-4"> <div class="feature height1"> <p>6</p> </div> </div> <div class="col-lg-8"> <div class="feature height1"> <p>7</p> </div> </div> <div class="col-lg-4"> <div class="feature height1"> <p>8</p> </div> </div> <div class="col-lg-4"> <div class="feature height1"> <p>9</p> </div> </div> <div class="col-lg-4"> <div class="feature height1"> <p>10</p> </div> </div> </div> </div> </section>

    Or if for some reason you need exactly the 4th bootstrap, redefine the row and col- behavior in styles

     .row { display: block !important; } .col-lg-4, .col-lg-8{ padding: 0 !important; float: left !important; } p{ text-align: center; font-size: 24px; } .feature{ border: 1px solid black; } .height1{ height: 150px; } .height2{ height: 300px; } 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <section id="features"> <div class="container"> <div class="row"> <div class="col-lg-4"> <div class="feature height2"> <p>1</p> </div> </div> <div class="col-lg-4"> <div class="feature height1"> <p>2</p> </div> </div> <div class="col-lg-4"> <div class="feature height1"> <p>3</p> </div> </div> <div class="col-lg-4"> <div class="feature height1"> <p>4</p> </div> </div> <div class="col-lg-4"> <div class="feature height1"> <p>5</p> </div> </div> <div class="col-lg-4"> <div class="feature height1"> <p>6</p> </div> </div> <div class="col-lg-8"> <div class="feature height1"> <p>7</p> </div> </div> <div class="col-lg-4"> <div class="feature height1"> <p>8</p> </div> </div> <div class="col-lg-4"> <div class="feature height1"> <p>9</p> </div> </div> <div class="col-lg-4"> <div class="feature height1"> <p>10</p> </div> </div> </div> </div> </section>

    • Many thanks for the detailed answer! Tell me, which option would be more appropriate, given that in the future the layout will be transferred to Wordpress and so that the user can add blocks of his or her choice with a single or double height / width? - Vostrikova Vera
    • @VostrikovaVera, I don’t know about expediency, but it’s obvious that the 3rd bootstrap is easier to use here: in fact, you don’t need to redefine anything in styles - humster_spb