Prevent bootstrap 3 tab from stacking when window is resized (made smaller)

Question

I have two tabs and I do not want them to stack when the window is resized. How do I do so? As shown below this is the code I've used to create my tabs. I don't understand why they would stack up when my window is resized.

HTML Tab code:

<div class="slContainer center-block">   
        <div class="panel panel-default">  
            <div class="row" id="formTab">      
            <div class="col-sm-12">
                <div class="panel-body">       
                <div class="tabbable">      
                    <ul class="nav nav-tabs  nav-justified selected">
                        <li class="active"><a href="#tab1" data-toggle="tab">Sign-In</a></li>
                        <li><a href="#tab2" data-toggle="tab">Sign-Up</a></li>              
                    </ul>
                           <div class="tab-content">
                        <div class="tab-pane active" id="tab1">                               
                            <form class="form-horizontal">
                                <div class="form-group name-group">
                                    <label for="name" class="col-sm-3 control-label">Name</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" placeholder="Enter name"/>
                                    </div>      
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-3 col-sm-9">
                                        <a href="#" class="btn btn-primary" role="button">Login</a>
                                    </div>
                                </div>
                            </form>
                        </div><!--end of tab 1--> 
                        <div class="tab-pane" id="tab2">  
                            <form class="form-horizontal">     
                                <p id="New">For New Individual's Only *</p>                   
                                <h1>Sign-up Requirements</h1>  
                                  <div class="form-group">
                                    <label for="inputPassword" class="col-sm-3 control-label">Login Password*</label>
                                    <div class="col-sm-9">
                                        <input type="password" class="form-control" id="inputPassword" placeholder="Enter Password">
                                    </div>
                                  </div>                   
                                <div class="form-group">
                                    <label for="confirmPassword" class="col-sm-3 control-label">Confirm Password*</label>
                                    <div class="col-sm-9">
                                        <input type="password" class="form-control" id="confirmPassword" placeholder="Enter Password">
                                    </div>
                                  </div>       
                                 <div class="form-group">
                                    <div class="col-sm-9 col-sm-push-3">
                                        <label class="radio-inline">
                                            <input type="radio" name="ackRadio" value="option1" /> I have read and agreed to the <span id ="acknowledge"><a href="terms&condition.php">Terms and Conditions.</a></span>
                                        </label>
                                    </div>      
                                </div>  
                                <div class="form-group">
                                    <div class="col-sm-offset-3 col-sm-9">
                                        <button type="register" class="btn btn-primary">Register</button>
                                    </div>
                                </div>
                            </form>         
                        </div><!--end of tab 2-->
                    </div><!--end of tab content-->
                </div> <!-- end of tabbable-->   
                </div><!--end panel body-->
            </div><!-- end of formTab -->
            </div>
        </div><!--end of panel container--> 
    </div><!-- end of container -->

CSS code:

.slContainer{
  margin-top: 60px;
  margin-bottom:80px;
  width: 60%;
}

Possible duplicate of [How to disable stacking of bootstrap justified tabs on small screens](http://stackoverflow.com/questions/22032136/how-to-disable-stacking-of-bootstrap-justified-tabs-on-small-screens) — iAM, Oct 26 '16 at 07:38

m4n0 · Accepted Answer · 2015-11-23T17:01:50.497

1

Your tabs breakdown after browser width is resized within 767px, so you can use the below CSS hack to float the list elements and occupy horizontal alignment.

@media (max-width: 767px) {
  .nav-tabs.nav-justified > li {
    float: left;
    width: 50%;
  }
}

Bootply

edited Nov 23 '15 at 17:01

answered Jun 22 '15 at 09:49

m4n0

29,823
27
76
89

Prevent bootstrap 3 tab from stacking when window is resized (made smaller)

1 Answers1