Twitter Bootstrap Question posted in

Bootstrap Columns Vertical stacking-Twitter bootstrap

In my post section of the web site which I am creating I have 4 columns with post in each post with different height based on it’s contents . bootstrap 4 grid system. As per photo under enter image description here

When I resize the 4th column re-arrange.

enter image description here

As u can see on the above image the 4th column is shifted under number 1 but its align base on the height of the 3rd column. I want to be stacked like the photo bellow.

enter image description here

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row pt-3 port-folio-margins pb-5 pr-4 pl-4">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
    <div class="post-container">
      <div class="post-image"> </div>
      <div class="post-title">TEST2016</div>
      <div class="post-share-icons"></div>

    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
      <div class="post-container">
        <div class="post-image"> </div>
        <div class="post-title">TEST2016</div>
        <div class="post-share-icons"></div>

      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
        <div class="post-container">
          <div class="post-image"> </div>
          <div class="post-title">TEST2016</div>
          <div class="post-share-icons"></div>

        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
          <div class="post-container">
            <div class="post-image"> </div>
            <div class="post-title">TEST2016</div>
            <div class="post-share-icons"></div>

          </div>
        </div>

So the question is how to achieve that CSS formatting with Bootstrap or without bootstrap . I have tried putting “float” using “flex wrap” also “clearfix” without result.

Tags:

2

Answers


  1. 0

    This is a tricky issue that is often just worked around. Web-pages are much easier to code in grids, so things tend to be in columns and rows. In your example, when wrapped the row needs to be tall enough to contain your third item. That means that if the fourth item sat where you want it, it would be within the cell of the first item.

    You can use something like Masonary, which I believe calculates top and left positions as you resize. Or I think you can use flex and a whole lot of wrapper divs, but that will get messy and be horrible maintenance. It’s so messy I’ve never got it into production, either because I lost my mind trying, or hated the thought of maintaining it when it was working in just a small example.

    Masonary allows a fairly simple layout

    <div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--height3"></div>
  <div class="grid-item grid-item--height2"></div>
</div>

    JSFiddle example

    Login or Signup to reply.
  2. 0

    Bootstrap has a built in utility for this problem you can use cards and wrap them in card columns. See the documentation here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search