title: border-radius and box-shadow not working as expected
body: <p>I am using bootstrap-vue in my project and I am using the responsive grid. I have used different cols sizes for different view points. I am having a issue to add background, border-radius and box-shadow to the content of the <code>&lt;b-row&gt;</code>, since width of the <code>&lt;b-row&gt;</code> is more than the width of all columns. So I add the background for each column and its working fine (I am not sure its the correct way to do it). I used the same method to add the border-radius. Its working fine in until cols get stacked each other in small devices. I couldn't make box-shadow working for any device size. Is there any way I can wrap the content inside the <code>&lt;b-row&gt;</code> and add border-radius and box-shadow and the background to the wrapper.</p>
  <p>example <a href="https://codesandbox.io/s/intelligent-goldstine-wwpng?file=/src/components/HelloWorld.vue" rel="nofollow noreferrer">https://codesandbox.io/s/intelligent-goldstine-wwpng?file=/src/components/HelloWorld.vue</a></p>