Twitter Bootstrap Question posted in

Twitter Bootstrap very basic layout

I’m stack with a pretty simple question, and I was wondering maybe you can help, cause you always do..
So what I have is a very basic bootstrap layout.. say:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">looong-long-text</div>
        <div class="col-md-6">long-text</div>
        <div class="col-md-6">another long text</div>
        <div class="col-md-6">and another long text</div>
    </div>
</div>

Please check the image link to see what i need

Is there any simple way to achieve such results with bootstrap? Tnx.

Tags:

3

Answers


  1. 0

    You could try out the new Bootstrap version 4 card column feature.

    Login or Signup to reply.
  2. 0

    You can’t do this with bootstrap out of the box, but there are other tools to help you do this. Here is one of them:
    http://masonry.desandro.com/

    Login or Signup to reply.
  3. 0

    I have two solutions for you:

    First (better in my opinion, less code):

    <div class="container">
  <div class="row">
    <div class="col-md-6">
      <div>First</div>
      <div>Third</div>
    </div>
    <div class="col-md-6">
      <div>Second</div>
      <div>Fourth</div>
    </div>
  </div>
</div>

    Second:

    <div class="container">
  <div class="row">
    <div class="col-md-6">
       <div class="row">
         <div class="col-md-12">
           <div>First</div>
         </div>
       </div>
       <div class="row">
         <div class="col-md-12">
           <div>Third</div>
         </div>
      </div>
    </div>
    <div class="col-md-6">
       <div class="row">
         <div class="col-md-12">
           <div>First</div>
         </div>
       </div>
       <div class="row">
         <div class="col-md-12">
           <div>Third</div>
         </div>
      </div>
    </div>
  </div>
</div>

    CODEPEN

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

Back To Top
Search