0

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 code:

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
    <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
    <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
    <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
dferenc
  • 7,918
  • 12
  • 41
  • 49
TroyPilewski
  • 359
  • 8
  • 27

1 Answers1

0

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);
}
<div class="container">
    <div class="row">
        <div id="tab-sidebar" class="col-3 nav nav-pills" role="tablist" aria-orientation="vertical">
            <a id="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>
            <a id="pill-B" class="nav-link col-6" data-toggle="pill" href="#tab-B" role="tab" aria-controls="tab-B" aria-selected="false">B</a>
            <a id="pill-C" class="nav-link col-12" data-toggle="pill" href="#tab-C" role="tab" aria-controls="tab-C" aria-selected="false">C</a>
            <a id="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>
            <a id="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>

        <div id="tab-content" class="col-9 tab-content">
            <div id="tab-A" class="tab-pane fade show active" role="tabpanel" aria-labelledby="pill-A">[A]</div>
            <div id="tab-B" class="tab-pane fade" role="tabpanel" aria-labelledby="pill-B">[B]</div>
            <div id="tab-C" class="tab-pane fade" role="tabpanel" aria-labelledby="pill-C">[C]</div>
            <div id="tab-D" class="tab-pane fade" role="tabpanel" aria-labelledby="pill-D">[D]</div>
            <div id="tab-E" class="tab-pane fade" role="tabpanel" aria-labelledby="pill-E">[E]</div>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="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.

dferenc
  • 7,918
  • 12
  • 41
  • 49
  • Your code looks awesome. But it doesn't display two of the nav-link on the same row. – TroyPilewski Dec 13 '17 at 16:42
  • @TroyPilewski Could you please elaborate on that? In the snippet view, I see pills A, B and D, E next to each other. Pill C serves as an example that spans across the entire width, as in your [sample page](public.navy.mil/surfor/Pages/home.aspx) there is this kind of button too. – dferenc Dec 13 '17 at 20:10
  • I am using Firefox but when I run the snippet everything is displayed in a column. Is the code browser dependent or do you have to have the CSS and JS above the HTML? – TroyPilewski Dec 13 '17 at 22:39
  • As far as I consider it is not browser dependent. I just have checked it on FF 57.0.1, Chrome 63.0.3239.84 and Safari 11.0.1 on a Mac and seems to be ok on all. I just have re-created this on [CodePen](https://codepen.io/dferenc/pen/gobBdq), maybe it is the snippet window? – dferenc Dec 13 '17 at 22:50
  • I just tried the snippet on Firefox Developer Edition 58.0b11. It works. I'll try and implement into my project and let you know. Seems my work computer is running an older version that it didnt work on. – TroyPilewski Dec 13 '17 at 23:19