Extensible Lists

Not native to Bootstrap 4, extensible lists play a key role in right to left (RTL) language support, due to their ability to sit flush within their parent, regardless of their own justification (left, center, right) and website language direction (left to right, right to left).

Add class .extensible-list to a <ul>:

                                    
                                        <ul class="extensible-list">
                                            <li><a href="#" title="Link">Link</a></li>
                                            <li><a href="#" title="Link">Link</a></li>
                                            <li><a href="#" title="Link">Link</a></li>
                                        </ul>

Add class .horizontal for a horizontal list: 

                                
                                    <ul class="extensible-list horizontal">
                                        <li><a href="#" title="Link">Link</a></li>
                                        <li><a href="#" title="Link">Link</a></li>
                                        <li><a href="#" title="Link">Link</a></li>
                                    </ul>

Additionally, you can add .justify-content-center or .justify-content-end classes to horizontal lists to change their justification: 

                            
                                <ul class="extensible-list horizontal justify-content-center">
                                    <li><a href="#" title="Link">Link</a></li>
                                    <li><a href="#" title="Link">Link</a></li>
                                    <li><a href="#" title="Link">Link</a></li>
                                </ul>
                            
                        
                            
                                <ul class="extensible-list horizontal justify-content-end">
                                    <li><a href="#" title="Link">Link</a></li>
                                    <li><a href="#" title="Link">Link</a></li>
                                    <li><a href="#" title="Link">Link</a></li>
                                </ul>

Horizontal extensible lists can be responsive. Add the breakpoint class .device-{x}, (x equals the breakpoint size hook, e.g. md) to make a horizontal list stack on mobile devices.

                            
                                <ul class="extensible-list horizontal device-md">
                                    <li><a href="#" title="Link">Link</a></li>
                                    <li><a href="#" title="Link">Link</a></li>
                                    <li><a href="#" title="Link">Link</a></li>
                                </ul>

Extensible lists can be nested. By default, the child lists will automatically indent for readability. 

                            
                                <ul class="extensible-list">
                                    <li><a href="#" title="Link">Link</a></li>
                                    <li><a href="#" title="Link">Link</a></li>
                                    <li><a href="#" title="Link">Link</a></li>
                                    <li>
                                        Title
                                        <ul class="extensible-list">
                                            <li><a href="#" title="Nested Link">Nested Link</a></li>
                                            <li><a href="#" title="Nested Link">Nested Link</a></li>
                                            <li><a href="#" title="Nested Link">Nested Link</a></li>
                                        </ul>
                                    </li>
                                </ul>

The Sass for extensible lists can be found in scss/_f-layout-elements.scss under H. Extensible lists H. Extensible lists.