35735

Limit number of cards per card deck in Bootstrap 4

Question:

I'm trying to display up to 2 cards in a card deck. If there are any additional cards to display, they should be placed in a new deck, below the previous one.

How can I achieve this? Where can I specify the maximum number of cards for each deck?

The HTML looks like this (with a little bit of Angular):

<div class="card-deck"> <div *ngFor="let item of dataService.getItems()" class="card"> <div class="card-body"> <h4 class="card-title">{{ item.title }}</h4> <p class="card-text">{{ item.content }}

<p class="card-text"><small class="text-muted">Item ID: {{ item.id }}</small>

</div> <div class="card-footer"> <div class="text-right"> <div class="btn-group" role="group" aria-label="Controls"> <button type="button" class="btn btn-primary btn-sm">Reply</button> <button type="button" class="btn btn-danger btn-sm">Delete</button> </div> </div> </div> </div> </div>

Answer1:

Solved it with inspiration from Obsidian Age's advice.

Changed dataService.getItems() so it returns groups of 2 items.

<div *ngFor="let group of dataService.getItems()" class="card-deck my-3"> <div *ngFor="let item of group" class="card"> <div class="card-body"> <h4 class="card-title">{{ item.title }}</h4> <p class="card-text">{{ item.content }}

<p class="card-text"><small class="text-muted">Item ID: {{ item.id }}</small>

</div> <div class="card-footer"> <div class="text-right"> <div class="btn-group" role="group" aria-label="Controls"> <button type="button" class="btn btn-primary btn-sm">Reply</button> <button type="button" class="btn btn-danger btn-sm">Delete</button> </div> </div> </div> </div> </div>

Recommend

  • Unity Dependency Injection from usercontrol viewmodel to customUsercontrol Viewmodel
  • JavaFX CustomMenuItem strange behaviour with TextField
  • Static resource constructor with parameters
  • SharePoint's List.GetItems(view) returns ALL items instead of filtered view items
  • Angular2 simple Http service Injection
  • Access Angular 2 Inputs (properties) inside constructor
  • Understanding Angular2 change event
  • md-autocomplete onSelectionChange fired twice
  • GWT question on RPC
  • Angular 4 - rxjs BehaviorSubject usage in Service
  • Grails eager fetch doesn't retrieve all data
  • Simple Angular 2 app gives “Potentially unhandled rejection” error
  • SharedPreferences or SQLite Database?
  • FileReader+canvas image loading problem
  • Insert into database using onclick function
  • Using $this when not in object context
  • Deselecting radio buttons while keeping the View Model in synch
  • Uncaught Error: Could not find module `ember-load-initializers`
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • Can Jackson SerializationFeature be overridden per field or class?
  • MySQL WHERE-condition in procedure ignored
  • Web-crawler for facebook in python
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • trying to dynamically update Highchart column chart but series undefined
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API
  • Java static initializers and reflection
  • unknown Exception android
  • Programmatically clearing map cache
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal
  • How to push additional view controllers onto NavigationController but keep the TabBar?