Fixed size but responsive cards boostrap3 - css

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">
{{ sistema.nome.substring(0, 1) | uppercase}}
</div>
</div>
<div class="media-body">
<h4 class="media-heading">
{{sistema.nome | uppercase}}
</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;
}

Answer 1

<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.