bootstrab nav tab li items in a row

Asked Jul 16 '16 at 09:07

Active Jul 16 '16 at 09:38

Viewed 66 times

i have those nav-tab items with bootstrap

| tab1  |  tab2  |  tab3  |

but when my website becomes responsive they to like this

| tab 1 | tab2 |
| tab 3 |

I have the following code

<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 no-sid">
    <ul class="nav nav-tabs">
        <li class="active"><a data-target="#home" data-toggle="tab" aria-expanded="true">Recent Events</a></li>
        <li class=""><a data-target="#profile" data-toggle="tab" aria-expanded="false">Drink Time</a></li>
        <li class=""><a data-target="#messages" data-toggle="tab" aria-expanded="false">Food Time</a></li>
    </ul>
</div>

Is there any way to always keep them in the same line and even if they become small there is no problem at all.

edited Jul 16 '16 at 09:23

Shrikant Mavlankar

1,145
1
8
17

asked Jul 16 '16 at 09:07

Konstantinos Natsios

2,874
9
39
74

You need to convert the tab to bootstrap collapse in mobile view... – vignesh Jul 16 '16 at 09:11
@vignesh could you give me an example? – Konstantinos Natsios Jul 16 '16 at 09:24
Refer the Demo link to have an idea to do it. – vignesh Jul 16 '16 at 09:41
Possible duplicate of http://stackoverflow.com/questions/17935601/how-to-remove-responsive-features-in-twitter-bootstrap-3 – svarog Jul 16 '16 at 09:52

bootstrab nav tab li items in a row

0 Answers0