How to add Bootstrap gutter on a list view?

In the listview with 3 list items (structured as cards), there’s no space between each other. What I’m trying to add is a gutter (from Bootstrap) that will add vertical & horizontal padding between the list items (cards).  What I’m trying to achieve is 3 cards in a row (using lv-col-md-4) and to have gutters between them.  I’ve tried adding g-5 to <ul> and all parent divs that are relevant to these list, however I can’t make it happen. The only way that I managed to separate the cards is when adding margins, however that messes up the responsive view of Bootstrap.  Has anyone managed to use gutter with a list view? Or should I rather use Tabe Grid 2?  On the app, it’s used Bootstrap 3.3.4.    Pic below how it is in my app:    How I want it to be (Bootstrap example): 
1 answers

I would recommend adding design properties to your application for adding spaces like this to list items or other containers.
This academy class covers adding custom CSS styling to your app, I would also go through the custom styling documentation here. Once you have your custom styling you can create a design property for your spacing option using the design styling api which you can see here.