Use this if you want all children to have a border. This will alternate through the different border styles defined above instead of having to add the border class for each element.
<divclass="row flex-center child-borders">
<divclass="sm-2 col">1</div>
<divclass="sm-2 col">2</div>
<divclass="sm-2 col">3</div>
<divclass="sm-2 col">4</div>
<divclass="sm-2 col">5</div>
<divclass="sm-2 col">6</div>
</div>
#### Code:
```html
<divclass="row flex-center child-borders">
<divclass="sm-2 col">1</div>
<divclass="sm-2 col">2</div>
<divclass="sm-2 col">3</div>
<divclass="sm-2 col">4</div>
<divclass="sm-2 col">5</div>
<divclass="sm-2 col">6</div>
</div>
```
### Border Styles
<divclass="row flex-spaces child-borders">
<divclass="sm-3 col border-dashed">Dashed</div>
<divclass="sm-3 col border-dotted">Dotted</div>
<divclass="sm-3 col border-dashed border-thick">Dashed Thick</div>
<divclass="sm-3 col border-dotted border-thick">Dotted Thick</div>
</div>
#### Code:
```html
<divclass="row flex-spaces child-borders">
<divclass="sm-3 col border-dashed">Dashed</div>
<divclass="sm-3 col border-dotted">Dotted</div>
<divclass="sm-3 col border-dashed border-thick">Dashed Thick</div>
<divclass="sm-3 col border-dotted border-thick">Dotted Thick</div>
</div>
```
### Shadows
<divclass="row flex-spaces child-borders">
<divclass="sm-3 col shadow shadow-large">Large</div>
<divclass="sm-3 col shadow">Default</div>
<divclass="sm-3 col shadow shadow-small">Small</div>
<divclass="sm-3 col shadow shadow-hover">Hover</div>
</div>
#### Code:
```html
<divclass="row flex-spaces child-borders">
<divclass="sm-3 col shadow shadow-large">Large</div>
<divclass="sm-3 col shadow">Default</div>
<divclass="sm-3 col shadow shadow-small">Small</div>
<divclass="sm-3 col shadow shadow-hover">Hover</div>
</div>
```
### Child Shadows
Use this if you want all children to have a shadow.