add spacing to a card in a sub component


Topic: add spacing to a card in a sub component

nxgn asked 3 years ago

what is the correct way to add spacing / padding to a card in a sub component?

I am dynamically adding a list of cards called from

<component v-for="component in componentNames" v-bind:is="component" v-bind:key="component" >

in each component I have a standard card

<template>
      <MDBCard>
      <MDBCardHeader>content 1</MDBCardHeader>
      <MDBCardBody>
            <MDBCardTitle>Special title treatment</MDBCardTitle>
            <MDBCardText>
            With supporting text below as a natural lead-in to additional content.
            </MDBCardText>
            <MDBBtn tag="a" href="#!" color="primary">Go somewhere</MDBBtn>
      </MDBCardBody>
      </MDBCard>
</template>

when these components are displayed each row is butted below the previous with no spacing.

reading the docs I have tried adding a surrounding div with different classes but does not change the spacing

class="d-grid gap-2"

Mikołaj Smoleński staff commented 3 years ago

We recommend using Spacing classes, e.g. class="mb-2" or class="pt-3".

Keep coding,  Mikołaj from MDB


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: MDB5 1.0.0
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No
Tags
vue