How to Disable Stacking of Bootstrap Justified Tabs on Small Screens

How to disable stacking of bootstrap justified tabs on small screens

Try adding col-xs-6 before the links

    <!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" id="myTab">
  <div class="col-xs-6">
      <li class="active"><a href="#ratings" data-toggle="tab">Ratings</a></li>
  </div>    
  <div class="col-xs-6">    
      <li><a href="#reviews" data-toggle="tab">Reviews</a></li>
  </div>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="ratings">This is a rating section</div>
  <div class="tab-pane" id="reviews">This is for reviews. There should be some styling here.</div>
</div>

you can check it out here Bootply

Bootstrap : prevent nav-tabs nav-justified from stacking on small screen

I had to write my own tabs style to get it work.

Sample Image

Here is a live bootply

in case link got broken here is the css:

/* CSS used here will be applied after bootstrap.css */
body{
    background-color: #f2f2f2; 
}
.container{
    width: 325px;  
}
.side-posts{
    margin-top:15px;
}
.post-tabs{
  padding:0;
  margin-bottom:0;
  list-style-type: none;
  overflow: hidden;
}
.post-tabs li{
    display: inline;
}
.post-tabs a{
    display: block;
    z-index: 1;
    text-decoration: none;
    padding: 10px 15px;
    float:  left;
    width: 50%;
    text-align:center;
    border-bottom: 1px solid #dddddd;
    text-shadow: 1px 1px 0 white;
    transition:color 0.3s ease;
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );

    color:#3b5998;
}
.post-tabs a:hover{
    color:#e95c40;
}
.post-tabs li.active a{
    border-bottom: 0;
    color: #444444;
    z-index: 2;
}

.post-tabs li.active:first-child a {
    border-right: 1px solid #dddddd;
    box-shadow: inset -3px 0px 3px 0px rgba(0,0,0,0.4);
}
.post-tabs li.active:last-child a{
    border-left: 1px solid #dddddd;
    box-shadow: inset 3px 0px 3px 0px rgba(0,0,0,0.4);
}
.tab-content{
    height:400px;  
    background-color: #dddddd;
}

How to disable bootstrap nav-justified collapse for smaller devices

You can add a container with class col-xs-12 thus it will be stacked on very small displays. After all if you want it to be non-stacked in all displays just write a media query.

Look there for media queries:
http://getbootstrap.com/css/#grid

If you share more code then I can be more specific on answer.

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

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

Css Bootstrap 4 - how to have vertical tabs on wider screens and horizontal on smaller

All you need to do is combine the appropriate flex classes and add a little padding here and there. ;)

Make sure to take a closer look at the following pages. Bootstrap actually has a great documentation page.

Flex and Spacing

Here is an example:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css');

<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.11.0/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="container d-md-flex flex-md-row">  <ul class="nav nav-tabs d-md-inline-flex align-self-md-start flex-md-column" id="myTab" role="tablist">    <li class="nav-item">      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a>    </li>    <li class="nav-item">      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>    </li>  </ul>  <div class="tab-content py-3 px-md-3 py-md-0" id="myTabContent">    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">      Lorem ipsum dolor sitamet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.    </div>    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.    </div>  </div></div>

Bootstrap 4 nav-tabs to keep the arrangement on a mobile screen

Use flex-nowrap class in your nav class

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<div class="container p-4">    <nav>        <div class="nav nav-tabs flex-nowrap" id="nav-tab" role="tablist">            <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">First really long nav</a>            <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Second really long nav</a>        </div>    </nav>    <div class="tab-content" id="nav-tabContent">        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Content of the first tab.</div>        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Content of the second tab.</div>    </div></div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>

Bootstrap nav tabs at bottom of web page do not stay at bottom for small resolution screens

Here is the code. Hope it will help you. If any changes then let me know.

https://jsfiddle.net/5y2j09kx/5/

<!DOCTYPE html><html lang="en">
  <head>    <title>Bootstrap Example</title>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>    <style>    * {  margin: 0;  padding: 0;}
body {  height: 100%;}
.container {  width: 100%;  height: 100%;  box-shadow: 1px 1px 5px #bbb;  z-index: 0;}
.first {  z-index: 1;}
ul li {  display: inline-block;}
li {  position: relative;  list-style: none;}
a {  padding: 24px 50px;  font-family: sans-serif;  text-decoration: none;  color: #222;  background-color: #ddd;  border: solid 1px #bbb;}
.nav-tabs>li>a {
  border-bottom-left-radius: 4px;  border-bottom-right-radius: 44px;  border-top-left-radius: 0;  border-left-top-radius: 0}
.nav>li>a {  padding: 10px 35px;}
.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover {  border: 1px solid #ddd;  border-top-color: transparent;}
.tab-wrap {  border: 1px solid black}
#footer {  /* position: absolute;  bottom: 0;  width: 100%;  height: 2.5rem; */}
.footer-navbar {  display: flex;  justify-content: space-between;  align-items: center;  border-top: 1px solid #000;}    </style>  </head>
  <body>
    <div class="container">      <h2>Dynamic Tabs</h2>      <p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
      <div class="tab-wrap">        <div class="tab-content" style="width:100%;height:80vh;">          <div id="home" class="tab-pane fade in active">            <h3>HOME</h3>            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>          </div>          <div id="menu1" class="tab-pane fade">            <h3>Menu 1</h3>            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>          </div>          <div id="menu2" class="tab-pane fade">            <h3>Menu 2</h3>            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>          </div>          <div id="menu3" class="tab-pane fade">            <h3>Menu 3</h3>            <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>          </div>        </div>        <div class="footer-navbar">          <ul class="nav nav-tabs nav-tabs-bottom sticky-footer">            <li class="active"><a data-toggle="tab" href="#home">Home</a></li>            <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>            <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>            <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>          </ul>          <footer class="sticky-footer bg-white" id="footer">            <div class="container my-auto" style="max-width:100%;  ">              <div class="copyright text-left font-weight-bold" style="float:right;">                <span class="float-right" style="padding-right:50px">@footer</span>              </div>            </div>          </footer>        </div>      </div>
    </div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  </body>
</html>

How to Disable Stacking of Bootstrap Justified Tabs on Small Screens