1

I have a single row with 20 or so columns of varying height (due to different amounts of text in them), like this:

<div class="row container-fluid nopadding">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 ">
        <h1>title1</h1>
        <p>asdasdasdasdasd</p>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
         <h1>title2</h
         <p>asdasdasddddasdasdadasdasdasdasdasdasdasdasdasdasdasdasdddd</p>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <h1>title3</h1>
        <p>asdasdasdddaasdasdasd</p>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 ">
        <h1>title4</h1>
        <p>asdasdasdasdasdasdasdasdasd</p>
   </div>
   <!---etc etc...--->
</div>

The way they show up right now is: RIGHT NOW

The way I would LIKE them to stack is without the vertical gaps: enter image description here

OR alternatively as balanced length columns: enter image description here

How could I go about achieving this? Is the bootstrap col good for it?

marcs
  • 261
  • 1
  • 6

1 Answers1

-2

You can try adding no margin or padding to each of your columns inside the row with the nopadding class like this:

.nopadding .col-lg-3 {
    margin-top: 0;
    padding-top: 0;   
    margin-bottom: 0;
    padding-bottom: 0;   
}

And just do this for each of the column types yopu are using. This will remove the margin and padding around the top and bottom of the columns that are nested inside that row.

Celt
  • 2,398
  • 2
  • 24
  • 42
  • Why the downvotes? – Celt May 30 '17 at 15:15
  • 2
    Bootstrap columns do not have a padding/margin tops and bottoms set by default. And even if they did this would not solve the question. – zgood May 30 '17 at 15:17
  • this doesn't seem to change anything, maybe some of the other classes are overriding it?

    title

    asdasdasdasdasdasdasd

     – marcs May 30 '17 at 15:17
  • I see, I thought there was padding/margin on the top/bottom of teh containers. There must be something else causing your problem, can you provide a fiddle? – Celt May 30 '17 at 15:22