Matrix Rows

Create dynamic, responsive grids with our .matrix-border and .matrix-gutter classes. Add these classes to a Bootstrap row for consistent spacing around all sides of a row's columns, regardless of the column's individual width.

Bonus—you won't need to set the top or bottom margins when columns are stacked (on small viewports).

                            
                                <div class="row matrix-border">

                                <div class="col-md-4">
                                    <div class="bg-dark text-white text-center p-4">
                                        <p>Column</p>
                                    </div>
                                </div>
                                <!-- .col -->
                            
                                <div class="col-md-4">
                                    <div class="bg-dark text-white text-center p-4">
                                        <p>Column</p>
                                    </div>
                                </div>
                                <!-- .col -->
                            
                                <div class="col-md-4">
                                    <div class="bg-dark text-white text-center p-4">
                                        <p>Column</p>
                                    </div>
                                </div>
                                <!-- .col -->
                            
                            </div>
                            <!-- .row -->
                            
                        

                            
                                <div class="row matrix-gutter">

                                <div class="col-md-4">
                                    <div class="bg-dark text-white text-center p-4">
                                        <p>Column</p>
                                    </div>
                                </div>
                                <!-- .col -->
                            
                                <div class="col-md-4">
                                    <div class="bg-dark text-white text-center p-4">
                                        <p>Column</p>
                                    </div>
                                </div>
                                <!-- .col -->
                            
                                <div class="col-md-4">
                                    <div class="bg-dark text-white text-center p-4">
                                        <p>Column</p>
                                    </div>
                                </div>
                                <!-- .col -->
                                                
                            </div>
                            <!-- .row -->
                            
                        

Because the spacing for matrix rows is created with padding on the columns (and negative margins on the row), columns require a block-level child element, like a <div>.

Matrix border and gutter classes are declared in scss/_f-layout-elements.scss under I. Matrix rows.