Skip to content

Instantly share code, notes, and snippets.

@tonkec

tonkec/index.html

Created July 22, 2014 15:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tonkec/fdf713f3e1787ea81390 to your computer and use it in GitHub Desktop.
Save tonkec/fdf713f3e1787ea81390 to your computer and use it in GitHub Desktop.
Download ZIP
simple sample page with bootstrap
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>navigation bar and rows</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<style>
footer {
background: #333;
padding: 20px;
color: white;
}
</style>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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 href="#" class="navbar-brand">Brand</a>
</div><!--navbar-header-->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">something</a></li>
<li><a href="#">something</a></li>
<li><a href="#">something</a></li>
<li><a href="#">something</a></li>
<li><a href="#">something</a></li>
</ul><!--nav navbar-nav-->
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
<li class="divider"></li>
<li><a href="#">Yet another link!</a></li>
</ul><!--dropdown-menu-->
</li><!--dropdown-->
</ul><!--nav navbar-nav pull-right-->
</div><!--collapse navbar-collapse-->
</div><!--container-fluid-->
</nav>
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, asperiores.</h3>
</div><!--panel-heading-->
<div class="panel-body text-center">
<img src="http://placehold.it/200x200" alt="img" class="img-circle">
</div>
</div><!--panel panel-default-->
<div class="caption">
<h3>lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, ex omnis nihil, laboriosam dicta alias nostrum, molestias quo nemo enim voluptatum nam ullam, iste! Tempore, voluptate? Labore nisi, debitis est? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, omnis ducimus! Facilis voluptas tenetur in?</p>
</div><!--caption-->
</div><!--col-sm-4 col-md-4-->
<div class="col-sm-4 col-md-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h3 class="panel-title"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, asperiores.</h3>
</div><!--panel-heading-->
<div class="panel-body">
<img src="http://placehold.it/200x200" alt="img" class="img-circle">
</div>
</div><!--panel panel-default-->
<div class="caption">
<h3>lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, ex omnis nihil, laboriosam dicta alias nostrum, molestias quo nemo enim voluptatum nam ullam, iste! Tempore, voluptate? Labore nisi, debitis est? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, omnis ducimus! Facilis voluptas tenetur in?</p>
</div><!--caption-->
</div><!--col-sm-4 col-md-4-->
<div class="col-md-4 col-sm-4">
<ul class="list-group">
<a href="#" class="list-group-item disabled">List group</a>
<a href="#" class="list-group-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
<a href="#" class="list-group-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
<a href="#" class="list-group-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
<a href="#" class="list-group-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
<a href="#" class="list-group-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
<a href="#" class="list-group-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
<a href="#" class="list-group-item">Lorem ipsum dolor sit amet,consectetur adipisicing elit.</a>
</ul>
</div><!--col-md-4 col-sm-4-->
</div><!--row-->
</div><!--container-->
<footer>
<div class="container">
<div class="row">
<div class="col-sm-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, alias. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, neque!</p>
</div>
<div class="col-sm-3">
<ul class="list-unstyled">
<li><a href="#">Lorem ipsum.</a></li>
<li><a href="#">Itaque, esse!</a></li>
<li><a href="#">Nihil, amet.</a></li>
<li><a href="#">Blanditiis, tenetur!</a></li>
</ul>
</div>
<div class="col-sm-3">
<ul class="list-unstyled">
<li><a href="#">Lorem ipsum.</a></li>
<li><a href="#">Itaque, esse!</a></li>
<li><a href="#">Nihil, amet.</a></li>
<li><a href="#">Blanditiis, tenetur!</a></li>
</ul>
</div>
<div class="col-sm-3">
<p class="pull-right">Coded with <span class="glyphicon glyphicon-heart"></span> by <a href="http://github.com/Tonkec" target="_blank"> Tonkec Palonkec</a></p>
</div>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment