CODEWITHSUNDEEP
twitter-bootstrap
user3786081
user3786081

Reputation: 177

Bootstrap 4 flexible grids

how can i realize this layout with Bootstrap 4?

enter image description here

I tried it this way, but i don't know how to realize the big column in center and make all other columns same height. It also doesn't fit the window

Thanks for help!

<div class="ds">
    <div class="row places">
      <div class="col-md-3 place logo">BLA</div>
      <div class="col-md-3 place black"><div class="black"><p class="justify-content-center align-self-center">Test</p></div></div>
      <div class="col-md-3 place">Instagram</div>
      <div class="col-md-3 place logo">BLA</div>
    </div>
    <div class="row places">
      <div class="col-md-3 place">
        WORK<br />
        IN<br />
        PROGRESS
      </div>
      <div class="col-md-6 place"></div>
      <div class="col-md-3 place">
        WORK<br />
        IN<br />
        PROGRESS
      </div>
    </div>
    <div class="row places">
      <div class="col-md-3 place">
        WORK<br />
        IN<br />
        PROGRESS
      </div>
      <div class="col-md-6 place">

      </div>
      <div class="col-md-3 place">
        WORK<br />
        IN<br />
        PROGRESS
      </div>
    </div>
    <div class="row places">
      <div class="col-md-3 place logo">BLA</div>
      <div class="col-md-3 place">
        WORK<br />
        IN<br />
        PROGRESS</div>
      <div class="col-md-3 place">
        WORK<br />
        IN<br />
        PROGRESS
      </div>
      <div class="col-md-3 place logo">BLA</div>
    </div>
  </div>

Upvotes: 1

Views: 53

Answers (1)

brooksrelyt
brooksrelyt

Reputation: 4033

If you nest your 'Work in progress' divs inside your col-md-3 you can get a similar layout. You may need to change the padding of the nested col to fit your layout/design.

.place {
  border: 1px solid #e1e1e1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<br>
<div class="ds container">

    <div class="row places">
      <div class="col-md-3 place logo">BLA</div>
      <div class="col-md-3 place black"><div class="black"><p class="justify-content-center align-self-center">Test</p></div></div>
      <div class="col-md-3 place">Instagram</div>
      <div class="col-md-3 place logo">BLA</div>
    </div>
    <div class="row places">
      <div class="col-md-3 place">
        <div class="col-md-12 place">
          WORK<br />
          IN<br />
          PROGRESS
        </div>
        <div class="col-md-12 place">
          WORK<br />
          IN<br />
          PROGRESS
        </div>
      </div>
      <div class="col-md-6 place"></div>
      <div class="col-md-3 place">
        <div class="col-md-12 place">
          WORK<br />
          IN<br />
          PROGRESS
        </div>
        <div class="col-md-12 place">
          WORK<br />
          IN<br />
          PROGRESS
        </div>
      </div>
    </div>
    <div class="row places">
      <div class="col-md-3 place logo">BLA</div>
      <div class="col-md-3 place">
        WORK<br />
        IN<br />
        PROGRESS</div>
      <div class="col-md-3 place">
        WORK<br />
        IN<br />
        PROGRESS
      </div>
      <div class="col-md-3 place logo">BLA</div>
    </div>
  </div>

Upvotes: 1

Related Questions