CODEWITHSUNDEEP
htmltwitter-bootstrap
Jackal
Jackal

Reputation: 3521

Bootstrap 4 vertical tabs and content on right side

i'm trying to make a form wizard using bootstrap tabs. The layout is simple

Vertical tabs like a sidebar menu and content on right side

|   Tab1  |                      |
|   Tab2  |       Content        |
|   Tab3  |                      |

To do this i used bootstrap grid but there is a problem, if i reduce browser size the content goes under the tabs.

Is there a way to keep content next to tabs despite the browser size?

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <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>
        <div class="col-md-10">
            <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 class="form-group">
                        // content
                    </div>
                </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>
        </div>
    </div>
</div>

Upvotes: 3

Views: 9864

Answers (2)

Marius Danciu
Marius Danciu

Reputation: 178

Instead of col-md-2 and col-md-10, md stands for medium, you should use only col-sm. It will stay in 2 columns on all screens except extra small screens. Or you can use tables.

Upvotes: 0

David Bray
David Bray

Reputation: 586

Assuming bootstrap 4, just drop the md breakpoint

use col-2 instead of col-md-2

<div class="row">
    <div class="col-2"> 2 col content </div>
    <div class="col-10"> 10 col content </div>
</div>

https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints

Upvotes: 5

Related Questions