HTML Snippets (Stackable Navs)

somnacanth

Info

Created: 5 years, 4 months ago
Creator: Jade-Everstone
Favorites: 39

Profile

Stackable Navs

edit 8/4/21: forgot to make this public, whoops...

tl:dr when I first started coding it took me a while to figure out how to make these.

These navs. will stack on smaller screens!

Pastebin link

example text/your content goes here

some more example text/your content goes here

even more example text/your content goes here

you get the drill/your content goes here

Select All

<!--Stackable Navs Snippet-->
 
<ul class="nav nav-tabs card-header-tabs row">
    
    <li class="col-sm-12 col-md-6 col-lg-3 mt-2">
        <a class="btn btn-block btn-primary rounded-0" data-toggle="tab" href="#link1" role="button">Link 1</a>
    </li>
    
    <li class="col-sm-12 col-md-6 col-lg-3 mt-2">
        <a class="btn btn-block btn-primary rounded-0" data-toggle="tab" href="#link2" role="button">Link 2</a>
    </li>
    
    <li class="col-sm-12 col-md-6 col-lg-3 mt-2">
        <a class="btn btn-block btn-primary rounded-0" data-toggle="tab" href="#link3" role="button">Link 3</a>
    </li>
    
    <li class="col-sm-12 col-md-6 col-lg-3 mt-2">
        <a class="btn btn-block btn-primary rounded-0" data-toggle="tab" href="#link4" role="button">Link 4</a>
    </li>
    
</ul>
    
<br>
<hr>
    
<!--Nav content-->
 
<div class="tab-content">
    
    <div class="tab-pane container active" id="link1">
      example text/your content goes here
    </div>
  
    <div class="tab-pane container fade" id="link2">
      some more example text/your content goes here
    </div>
  
    <div class="tab-pane container fade" id="link3">
        even more example text/your content goes here
    </div>
    
    <div class="tab-pane container fade" id="link4">
        you get the drill/your content goes here
    </div>
    
</div>

Manual Select

<!--Stackable Navs Snippet-->
 
<ul class="nav nav-tabs card-header-tabs row">
    
    <li class="col-sm-12 col-md-6 col-lg-3 mt-2">
        <a class="btn btn-block btn-primary rounded-0" data-toggle="tab" href="#link1" role="button">Link 1</a>
    </li>
    
    <li class="col-sm-12 col-md-6 col-lg-3 mt-2">
        <a class="btn btn-block btn-primary rounded-0" data-toggle="tab" href="#link2" role="button">Link 2</a>
    </li>
    
    <li class="col-sm-12 col-md-6 col-lg-3 mt-2">
        <a class="btn btn-block btn-primary rounded-0" data-toggle="tab" href="#link3" role="button">Link 3</a>
    </li>
    
    <li class="col-sm-12 col-md-6 col-lg-3 mt-2">
        <a class="btn btn-block btn-primary rounded-0" data-toggle="tab" href="#link4" role="button">Link 4</a>
    </li>
    
</ul>
    
<br>
<hr>
    
<!--Nav content-->
 
<div class="tab-content">
    
    <div class="tab-pane container active" id="link1">
      example text/your content goes here
    </div>
  
    <div class="tab-pane container fade" id="link2">
      some more example text/your content goes here
    </div>
  
    <div class="tab-pane container fade" id="link3">
        even more example text/your content goes here
    </div>
    
    <div class="tab-pane container fade" id="link4">
        you get the drill/your content goes here
    </div>
    
</div>

Recent Images

No images.