Fixed size but responsive cards boostrap3

Question

I want to make my cards have fixed size, but they fit all types of screens.

Currently they are fixed size, but on smaller screens they are getting one over the other, I want them to fit on the screens.

1920x1080px: Here is correct, but on screens larger than this, there could be more cards per line.

1366x768px: Here it is wrong, it can be only 3 per line.

<div class="row">
    <section class="catalogos">
        <div class="catalogo">
            <div class="col-lg 3 col-md-3 col-sm-12 col-xs-12" ng-repeat="sistema in $ctrl.sistemasFavoritos | filter:search">
                <div class="panel catalogo-item">
                        <div class="media-left media-middle">
                            <div class="catalogo-item-icone-conteudo">
                                <a href="{{sistema.url}}" target="_blank">{{ sistema.nome.substring(0, 1) | uppercase}}</a>
                            </div>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">
                                <a href="{{sistema.url}}" target="_blank">{{sistema.nome | uppercase}}</a>
                            </h4>
                            <p>{{sistema.descricao}}</p>
                        </div>
                        <div class="media-right">
                            <a ng-click="$ctrl.removeFavorito(sistema)" class="fa fa-star yellow"></a>
                        </div>
                </div>
            </div>
        </div>
    </section>
</div>

css:

 .catalogo-item {
    height: 100%;
    width:100%;
    max-width: 380px;
    max-height: 125px;
    min-width: 380px;
    min-height: 125px;
    padding: 10px;
}

How can they be both "fixed size" _and_ "fit all types of screen"? The two requirements seem incompatible. — Turnip, Apr 20 '18 at 12:08
I want them to have fixed size, but for example on larger screens is 4 per line, on very bad screens can be 6, and screens less 2. For example. — Rafael Augusto, Apr 20 '18 at 12:10
So you don't want fixed size... You want them to be full width on each screen? — Brainfeeder, Apr 20 '18 at 12:25

score 1 · Accepted Answer · answered Apr 20 '18 at 12:39

<div class="catalogo">
    <div class="row">
        <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12" ng-repeat="sistema in $ctrl.sistemasFavoritos | filter:search">
            <div class="panel catalogo-item">
                <!-- card contents -->
            </div>
        </div>
        [...]
        <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12" ng-repeat="sistema in $ctrl.sistemasFavoritos | filter:search">
            <div class="panel catalogo-item">
                <!-- card contents -->
            </div>
        </div>
        [...]
    </div>
</div>

You don't need the CSS you added. The width:100% and max-width and min-width would conflict. Bootstraps .panels are 100% wide by default.

You had .col-lg 3 which has to be .col-lg-3. I changed it to .col-lg-2 so it will fit 6 'cards' in a row on very large screens.

Next you'll have to put the columns directly inside a .row for them to work properly. If the heights of the cards are not the same you might want to divide them in different .rows so float will not cause chaos. (but this will be tricky since you'll need to render different html depending on screensize).

TIP: Bootstrap 4 now supports flex box which would make it less difficult to get what you want.

I need a minimum size in width so it does not get weird. But then I have the following problem. I get 6 per line, one on top of the other. — Rafael Augusto, Apr 20 '18 at 13:05
Ah yes, you can still add CSS to `.catalogo-item` like `margin-bottom:15px;` — Brainfeeder, Apr 20 '18 at 13:36

Fixed size but responsive cards boostrap3

1 Answers1