Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Left, Right and Below tabs were removed from Bootstrap 3, but you can add custom CSS to achieve this..</p> <pre><code>.tabs-below &gt; .nav-tabs, .tabs-right &gt; .nav-tabs, .tabs-left &gt; .nav-tabs { border-bottom: 0; } .tab-content &gt; .tab-pane, .pill-content &gt; .pill-pane { display: none; } .tab-content &gt; .active, .pill-content &gt; .active { display: block; } .tabs-below &gt; .nav-tabs { border-top: 1px solid #ddd; } .tabs-below &gt; .nav-tabs &gt; li { margin-top: -1px; margin-bottom: 0; } .tabs-below &gt; .nav-tabs &gt; li &gt; a { -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } .tabs-below &gt; .nav-tabs &gt; li &gt; a:hover, .tabs-below &gt; .nav-tabs &gt; li &gt; a:focus { border-top-color: #ddd; border-bottom-color: transparent; } .tabs-below &gt; .nav-tabs &gt; .active &gt; a, .tabs-below &gt; .nav-tabs &gt; .active &gt; a:hover, .tabs-below &gt; .nav-tabs &gt; .active &gt; a:focus { border-color: transparent #ddd #ddd #ddd; } .tabs-left &gt; .nav-tabs &gt; li, .tabs-right &gt; .nav-tabs &gt; li { float: none; } .tabs-left &gt; .nav-tabs &gt; li &gt; a, .tabs-right &gt; .nav-tabs &gt; li &gt; a { min-width: 74px; margin-right: 0; margin-bottom: 3px; } .tabs-left &gt; .nav-tabs { float: left; margin-right: 19px; border-right: 1px solid #ddd; } .tabs-left &gt; .nav-tabs &gt; li &gt; a { margin-right: -1px; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } .tabs-left &gt; .nav-tabs &gt; li &gt; a:hover, .tabs-left &gt; .nav-tabs &gt; li &gt; a:focus { border-color: #eeeeee #dddddd #eeeeee #eeeeee; } .tabs-left &gt; .nav-tabs .active &gt; a, .tabs-left &gt; .nav-tabs .active &gt; a:hover, .tabs-left &gt; .nav-tabs .active &gt; a:focus { border-color: #ddd transparent #ddd #ddd; *border-right-color: #ffffff; } .tabs-right &gt; .nav-tabs { float: right; margin-left: 19px; border-left: 1px solid #ddd; } .tabs-right &gt; .nav-tabs &gt; li &gt; a { margin-left: -1px; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } .tabs-right &gt; .nav-tabs &gt; li &gt; a:hover, .tabs-right &gt; .nav-tabs &gt; li &gt; a:focus { border-color: #eeeeee #eeeeee #eeeeee #dddddd; } .tabs-right &gt; .nav-tabs .active &gt; a, .tabs-right &gt; .nav-tabs .active &gt; a:hover, .tabs-right &gt; .nav-tabs .active &gt; a:focus { border-color: #ddd #ddd #ddd transparent; *border-left-color: #ffffff; } </code></pre> <p>Working example: <a href="http://bootply.com/74926" rel="noreferrer">http://bootply.com/74926</a></p> <p><strong><em>UPDATE</em></strong></p> <p>If you don't need the exact look of a tab (bordered appropriately on the left or right as each tab is activated), you can simple use <code>nav-stacked</code>, along with Bootstrap <code>col-*</code> to float the tabs to the left or right...</p> <p><code>nav-stacked</code> demo: <a href="http://codeply.com/go/rv3Cvr0lZ4" rel="noreferrer">http://codeply.com/go/rv3Cvr0lZ4</a></p> <pre><code>&lt;ul class="nav nav-pills nav-stacked col-md-3"&gt; &lt;li&gt;&lt;a href="#a" data-toggle="tab"&gt;1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#b" data-toggle="tab"&gt;2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#c" data-toggle="tab"&gt;3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload