Nav-pill Positioning

I would like to create a side-bar menu with the Bootstrap 4 framework. Utilizing their default nav-pills how can I position two pills on the same row? Please find below the default

Solution 1:

Implementation details may vary but I would approach this with something like below.

#tab-sidebar.nav-link {
    margin: 5px;
    border: 1px solid lightgray;
    
    /* This is just to center text in pills */display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#tab-sidebar.nav-link.col-6 {
    /* 10px is just double the size of 5px margin set on .nav-link */max-width: calc(100% / 2 - 10px);
}

#tab-sidebar.nav-link.col-12 {
    max-width: calc(100% - 10px);
}

<divclass="container"><divclass="row"><divid="tab-sidebar"class="col-3 nav nav-pills"role="tablist"aria-orientation="vertical"><aid="pill-A"class="nav-link col-6 active"data-toggle="pill"href="#tab-A"role="tab"aria-controls="tab-A"aria-selected="true">A</a><aid="pill-B"class="nav-link col-6"data-toggle="pill"href="#tab-B"role="tab"aria-controls="tab-B"aria-selected="false">B</a><aid="pill-C"class="nav-link col-12"data-toggle="pill"href="#tab-C"role="tab"aria-controls="tab-C"aria-selected="false">C</a><aid="pill-D"class="nav-link col-6"data-toggle="pill"href="#tab-D"role="tab"aria-controls="tab-D"aria-selected="false">Item D with Very Long Name</a><aid="pill-E"class="nav-link col-6"data-toggle="pill"href="#tab-E"role="tab"aria-controls="tab-E"aria-selected="false">Short E</a></div><divid="tab-content"class="col-9 tab-content"><divid="tab-A"class="tab-pane fade show active"role="tabpanel"aria-labelledby="pill-A">[A]</div><divid="tab-B"class="tab-pane fade"role="tabpanel"aria-labelledby="pill-B">[B]</div><divid="tab-C"class="tab-pane fade"role="tabpanel"aria-labelledby="pill-C">[C]</div><divid="tab-D"class="tab-pane fade"role="tabpanel"aria-labelledby="pill-D">[D]</div><divid="tab-E"class="tab-pane fade"role="tabpanel"aria-labelledby="pill-E">[E]</div></div></div></div><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"rel="stylesheet"/><scriptsrc="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

So I won't use .flex-column in this case, but would rather set the widths of the pills with .col classes. As you can see in the css section, the .cols are slightly altered under the #tab-sidebar selector, in order to take margins between pills into account.