{% layout "layout" %}
{% block title %}Navbars{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li><a href="#">UI Components</a></li>
<li class="active"><a href="ui-navbars.html">Navbars</a></li>
{% endblock %}

{% block styles %}
{% endblock %}

{% block scripts %}
{% endblock %}

{% block content %}
<div class="row">
	<div class="col-md-12">

	<h2 class="text-center mb20">Navbar Default</h2>

		<nav class="navbar navbar-default demo" 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="#">Navbar</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="#">Link</a>
					</li>
					<li class="disabled"><a href="#">Link</a>
					</li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">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>
				</ul>
				<form class="navbar-form navbar-left" role="search">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="Search">
					</div>
					<button type="submit" class="btn btn-default">Submit</button>
				</form>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#">Link</a>
					</li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<!-- /.navbar-collapse -->
		</nav>
	
	<p class="mt20 mb20">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, dicta, non reiciendis mollitia unde maiores officia quibusdam vel cum omnis sunt facilis minus autem quas odio fugit deserunt tempore! Totam, atque, ratione eligendi distinctio error laborum voluptatum sint sapiente officia inventore quod nulla iure dolorum earum in porro doloribus natus fugiat ipsam impedit voluptatibus asperiores exercitationem deleniti ut iusto nam consequuntur. Porro voluptatum laborum accusantium minus sequi. Velit, beatae, ipsam, necessitatibus, corporis maxime eos ex quos doloribus sunt consequatur deleniti quisquam soluta ipsum enim itaque earum veritatis nesciunt! Blanditiis, quos, excepturi, commodi iure fugit doloribus tenetur sapiente eos id a quis quibusdam. Explicabo, veniam molestias omnis non. Possimus, libero, quae, sunt ab cumque nemo iste illum vitae itaque quo maiores eaque neque nulla quia unde explicabo modi illo perspiciatis exercitationem mollitia magnam repellat aliquid! Unde, incidunt, earum dolor nostrum voluptatum excepturi optio vel sequi architecto eligendi sint recusandae nihil numquam ad nam. Quasi, doloribus, nostrum, dignissimos a reiciendis quam molestias voluptatem enim pariatur ea optio sint reprehenderit temporibus accusamus nobis. Mollitia, aliquid, inventore officia ad sequi perspiciatis nihil libero culpa doloremque voluptatibus ullam sunt natus possimus consectetur minus consequatur nam veniam saepe eius quos. Animi, error, quaerat, impedit vero iste deserunt eius vel dolorum ullam sint porro ipsa accusamus ducimus. Provident, necessitatibus, ratione iste dicta cumque incidunt et quaerat doloribus itaque. Eveniet, neque optio tenetur reprehenderit magnam expedita commodi eius at quo dolor. Est, consequatur, reprehenderit harum cum natus voluptatem recusandae eum minus enim totam itaque officiis. Placeat et autem beatae eligendi in. Architecto, necessitatibus, omnis, vitae voluptatem culpa nulla deleniti sed vero placeat at aliquam pariatur impedit debitis excepturi laudantium? Amet, quae reprehenderit placeat ab nam explicabo quo eligendi aut ullam voluptas! Maiores, dignissimos tenetur distinctio iusto natus perferendis rem minus earum animi iure fugit suscipit sint. Quaerat, eaque, temporibus, ad laboriosam impedit tenetur sed vero aliquam minus pariatur labore velit cumque repudiandae iusto facilis mollitia expedita quidem nulla. Cum, temporibus alias mollitia asperiores dignissimos nemo nulla quibusdam quae tempore repellat incidunt ad excepturi ducimus voluptatem numquam et beatae. Perferendis, repellendus error ut doloribus accusantium reprehenderit ea ratione placeat qui dolorum laborum nam pariatur dolor quasi sunt repellat nesciunt delectus! Pariatur, non expedita tempora eligendi velit voluptates consequatur perspiciatis facere exercitationem magnam et quibusdam explicabo saepe nostrum repudiandae nobis commodi laborum mollitia unde ab tenetur quisquam nulla eos sint quae reiciendis distinctio ullam molestiae officia iste culpa nisi numquam incidunt architecto porro cupiditate accusamus. Ipsam, perspiciatis, animi, eveniet vero tempore commodi laborum soluta non culpa similique consectetur fuga hic nesciunt illum officia totam in. Expedita, officia, aspernatur totam ut eveniet obcaecati possimus est sed reiciendis error impedit voluptate excepturi illo quod atque repellat iusto molestiae. Hic, perspiciatis, quo fugiat obcaecati consequuntur autem repellendus veritatis molestiae ipsa ab enim ipsam qui fuga quia eaque culpa maiores! Labore, esse ea quis reprehenderit necessitatibus ipsum et quasi nulla vel dignissimos velit distinctio dolore corrupti error molestias. Unde, harum, in excepturi vitae quisquam obcaecati ratione quo eum quibusdam odio est deleniti iure labore.</p>


	<h2 class="text-center mb20">Navbar Inverse</h2>

		<nav class="navbar navbar-inverse demo" 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-2">
					<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="#">Navbar</a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Link</a>
					</li>
					<li class="disabled"><a href="#">Link</a>
					</li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
						<ul class="dropdown-menu dropdown-inverse">
							<li><a href="#">Action</a></li>
							<li><a href="#">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>
				</ul>
				<form class="navbar-form navbar-left" role="search">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="Search">
					</div>
					<button type="submit" class="btn btn-default">Submit</button>
				</form>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#">Link</a>
					</li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
						<ul class="dropdown-menu dropdown-inverse">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<!-- /.navbar-collapse -->
		</nav>

		<p class="mt20 mb20">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, dicta, non reiciendis mollitia unde maiores officia quibusdam vel cum omnis sunt facilis minus autem quas odio fugit deserunt tempore! Totam, atque, ratione eligendi distinctio error laborum voluptatum sint sapiente officia inventore quod nulla iure dolorum earum in porro doloribus natus fugiat ipsam impedit voluptatibus asperiores exercitationem deleniti ut iusto nam consequuntur. Porro voluptatum laborum accusantium minus sequi. Velit, beatae, ipsam, necessitatibus, corporis maxime eos ex quos doloribus sunt consequatur deleniti quisquam soluta ipsum enim itaque earum veritatis nesciunt! Blanditiis, quos, excepturi, commodi iure fugit doloribus tenetur sapiente eos id a quis quibusdam. Explicabo, veniam molestias omnis non. Possimus, libero, quae, sunt ab cumque nemo iste illum vitae itaque quo maiores eaque neque nulla quia unde explicabo modi illo perspiciatis exercitationem mollitia magnam repellat aliquid! Unde, incidunt, earum dolor nostrum voluptatum excepturi optio vel sequi architecto eligendi sint recusandae nihil numquam ad nam. Quasi, doloribus, nostrum, dignissimos a reiciendis quam molestias voluptatem enim pariatur ea optio sint reprehenderit temporibus accusamus nobis. Mollitia, aliquid, inventore officia ad sequi perspiciatis nihil libero culpa doloremque voluptatibus ullam sunt natus possimus consectetur minus consequatur nam veniam saepe eius quos. Animi, error, quaerat, impedit vero iste deserunt eius vel dolorum ullam sint porro ipsa accusamus ducimus. Provident, necessitatibus, ratione iste dicta cumque incidunt et quaerat doloribus itaque. Eveniet, neque optio tenetur reprehenderit magnam expedita commodi eius at quo dolor. Est, consequatur, reprehenderit harum cum natus voluptatem recusandae eum minus enim totam itaque officiis. Placeat et autem beatae eligendi in. Architecto, necessitatibus, omnis, vitae voluptatem culpa nulla deleniti sed vero placeat at aliquam pariatur impedit debitis excepturi laudantium? Amet, quae reprehenderit placeat ab nam explicabo quo eligendi aut ullam voluptas! Maiores, dignissimos tenetur distinctio iusto natus perferendis rem minus earum animi iure fugit suscipit sint. Quaerat, eaque, temporibus, ad laboriosam impedit tenetur sed vero aliquam minus pariatur labore velit cumque repudiandae iusto facilis mollitia expedita quidem nulla. Cum, temporibus alias mollitia asperiores dignissimos nemo nulla quibusdam quae tempore repellat incidunt ad excepturi ducimus voluptatem numquam et beatae. Perferendis, repellendus error ut doloribus accusantium reprehenderit ea ratione placeat qui dolorum laborum nam pariatur dolor quasi sunt repellat nesciunt delectus! Pariatur, non expedita tempora eligendi velit voluptates consequatur perspiciatis facere exercitationem magnam et quibusdam explicabo saepe nostrum repudiandae nobis commodi laborum mollitia unde ab tenetur quisquam nulla eos sint quae reiciendis distinctio ullam molestiae officia iste culpa nisi numquam incidunt architecto porro cupiditate accusamus. Ipsam, perspiciatis, animi, eveniet vero tempore commodi laborum soluta non culpa similique consectetur fuga hic nesciunt illum officia totam in. Expedita, officia, aspernatur totam ut eveniet obcaecati possimus est sed reiciendis error impedit voluptate excepturi illo quod atque repellat iusto molestiae. Hic, perspiciatis, quo fugiat obcaecati consequuntur autem repellendus veritatis molestiae ipsa ab enim ipsam qui fuga quia eaque culpa maiores! Labore, esse ea quis reprehenderit necessitatibus ipsum et quasi nulla vel dignissimos velit distinctio dolore corrupti error molestias. Unde, harum, in excepturi vitae quisquam obcaecati ratione quo eum quibusdam odio est deleniti iure labore.</p>
		
	</div>
</div>
{% endblock %}