CODEWITHSUNDEEP
csstwitter-bootstrap
Anup
Anup

Reputation: 9738

Responsive design issue in small screens - Bootstrap

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?

Upvotes: 0

Views: 1071

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362390

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

Upvotes: 3

MackieeE
MackieeE

Reputation: 11862

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/

Upvotes: 0

ZetCoby
ZetCoby

Reputation: 638

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>

Upvotes: 0

Related Questions