GenesysStack.com
RSS

Blog posts of '2017' 'April'

Did you know how to keep Bootstrap 3 Navbar 1-line through all snaps?
The trick is to use hidden-md hidden-sm and visible-md visible-sm.

Here is the Html from default MVC template’s _Layout.cshtml:

<li><a href="#menu-1" data-toggle="collapse" data-target=".in"><div class="hidden-md hidden-sm">One<b class="caret"></b></div><span class="glyphicon glyphicon-open visible-md visible-sm"></span></a></li>

<li><a href="#menu-2" data-toggle="collapse" data-target=".in"><div class="hidden-md hidden-sm">Two<b class="caret"></b></div><span class="glyphicon glyphicon-ok visible-md visible-sm"></span></a></li>

<li><a href="#menu-3" data-toggle="collapse" data-target=".in"><div class="hidden-md hidden-sm">Three<b class="caret"></b></div><span class="glyphicon glyphicon-time visible-md visible-sm"></span></a></li>

<li><a href="#menu-4" data-toggle="collapse" data-target=".in"><div class="hidden-md hidden-sm">Four<b class="caret"></b></div><span class="glyphicon glyphicon-envelope visible-md visible-sm"></span></a></li>