Responsive design issue in small screens - Bootstrap

Question

I am having cards which show horizontally. Please see the image to get an idea. When I have a big header, in sm screens the cards inside the columns wrap unevenly.

<div class="col-sm-4" data-ng-repeat="card in cards">
     <div class="card">
       <div class="cardHeader">Big Header issue</div>
        .....
     </div>
</div>

enter image description here

How to solve this issue?

@Anup Am I right in thinking that currently, it's one card-to-one-column? Need to see the rest of the HTML! =) — MackieeE, Feb 20 '14 at 11:40
Then it's not going to adapt to different sizes of cards, thus it's currently collapsing correctly depending on the above column height. I'll post an answer html that should fix it — MackieeE, Feb 20 '14 at 11:44
You don't have to use it with jQuery. You can use it in a normal OOP way (e.g. `new Masonry(document.getElementById("myGridHolder"))` — Kroltan, Feb 20 '14 at 11:49

Zim · Accepted Answer · 2018-04-07T12:53:32.630

3

Option 1

You could use CSS ellipsis like this to append '..' to the heading when it's too long:

.cardHeader {
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow: hidden;
}

Demo: http://www.bootply.com/115420 (uses panel-heading instead)

Option 2

Another option is to use a clearfix div after every 3 'col-sm-4' div..

Demo: http://www.bootply.com/115421

Related
Bootstrap row with columns of different height

edited Apr 07 '18 at 12:53

answered Feb 20 '14 at 11:48

Zim

329,487
83
671
600

Option 2 won't be possible for me...as i am looping through Data. – Anup Feb 20 '14 at 11:57
2

Then use CSS! something like this: `.col-sm-4:nth-child(3n+3):after {/*insert clearfix here*/}` – Kroltan Feb 20 '14 at 12:12

score 0 · Answer 2 · answered Feb 20 '14 at 11:49

do you use the row class? something like this:

<div class ='row'>
    <div class="col-sm-4">
     <div class="card">
       <div class="cardHeader">Big Header issue</div>
        .....
     </div>
   </div>

   <div class="col-sm-4">
     <div class="card">
       <div class="cardHeader">Big Header issue</div>
        .....
     </div>
   </div>

   <div class="col-sm-4">
     <div class="card">
       <div class="cardHeader">Big Header issue</div>
        .....
     </div>
   </div>
</div>

MackieeE · Answer 3 · 2014-02-20T12:01:58.153

Another option, which is slightly more HTML heavy but keeps the boxes/cards responsive:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-4">
                    <div class="card biggercard">
                       <div class="cardHeader">Biggest Header</div>
                        1
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                       <div class="cardHeader">Second Header</div>
                        2
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                       <div class="cardHeader">Third</div>
                        3
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-4">
                    <div class="card">
                       <div class="cardHeader">Fourth</div>
                        4
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                       <div class="cardHeader">5th</div>
                        5
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                       <div class="cardHeader">6th</div>
                         6
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Demo FIddle: http://jsfiddle.net/La3H2/

I forgotten to tell in my question that data is looping from an object. — Anup, Feb 20 '14 at 12:05
Is it AngularJS you're using? I'd be surprised if it hasn't got MOD for breaking into a new row or etc =) nevermind! — MackieeE, Feb 20 '14 at 12:12

Responsive design issue in small screens - Bootstrap

3 Answers3

Demo FIddle: http://jsfiddle.net/La3H2/