"Admin Navigation"
Bootstrap 3.0.0 Snippet by BhaumikPatel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.jquery2dotnet.com">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>Dashboard</a></li>
<li><a href="#"><span class="glyphicon glyphicon-calendar"></span>Calendar</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span
class="glyphicon glyphicon-list-alt"></span>Widgets <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://www.jquery2dotnet.com">Action</a></li>
<li><a href="http://www.jquery2dotnet.com">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span
class="glyphicon glyphicon-search"></span>Search <b class="caret"></b></a>
<ul class="dropdown-menu" style="min-width: 300px;">
<li>
<div class="row">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
.label,.glyphicon { margin-right:5px; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

e

xhat007 (1) - 3 years ago - Reply 0


Could anyone help me to use these snippets in joomla 3? The latest joomla is based on boostrap, so in theory, I can use this snippets. I tried adding the html and css through the custom html module but it's not working.

marvmen21 () - 10 years ago - Reply 0


e

xhat007 (1) - 3 years ago - Reply 0


Hey! Which version of Bootstrap is Joomla 3 using?

maxsurguy () - 10 years ago - Reply 0


e

xhat007 (1) - 3 years ago - Reply 0


Tried using a 2.3 snippet, but it doesn't show horizontally. http://bootsnipp.com/snippe... . You can see my test site here: http://www.technopolaris.co...

marvmen21 () - 10 years ago - Reply 0


e

xhat007 (1) - 3 years ago - Reply 0


Perhaps, but isn't it usually best to keep content and presentation
separate? In this particular case, one space might be fine because you
have access to the HTML. But when creating a template for others, I need
to consider the fact that my company's clients will only have access to
the CSS. Hope this helps! :)

Guest () - 11 years ago - Reply 0


e

xhat007 (1) - 3 years ago - Reply 0


Just a FYI for people: Instead of the margin-right in the CSS a simple space does the job as well.

Martijn Oud () - 11 years ago - Reply 0


e

xhat007 (1) - 3 years ago - Reply 0


Perhaps, but isn't it usually best to keep content and presentation separate? In this particular case, one space might be fine because you have access to the HTML. But when creating a template for others, I need to consider the fact that my company's clients will only have access to the CSS. :) Hope that helps!

Guest () - 11 years ago - Reply 0


e

xhat007 (1) - 3 years ago - Reply 0


can't find the css for this template..how can we modify the color??

sente () - 11 years ago - Reply 0


e

xhat007 (1) - 3 years ago - Reply 0


Good example, thanks

Eduardo () - 11 years ago - Reply 0


e

xhat007 (1) - 3 years ago - Reply 0