Skip to content

Instantly share code, notes, and snippets.

@rutvij-pandya

rutvij-pandya/Bootstrap 3 Responsive Web demo

Last active August 29, 2015 14:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rutvij-pandya/980f0b9c11f1b8e145ab to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rutvij-pandya/980f0b9c11f1b8e145ab to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Bootstrap 3 Responsive Web demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Demo</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.textCenter {text-align: center;}
.discoverTile {color: #000; text-align: center; vertical-align: middle;}
</style>
</head>
<body>
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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="#">Title</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><a href="http://www.tutorialrepublic.com" target="_blank">Home</a></li>
<li><a href="http://www.tutorialrepublic.com/about-us.php" target="_blank">About</a></li>
<li><a href="http://www.tutorialrepublic.com/contact-us.php" target="_blank">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" style="padding: 2%;">
<div class="jumbotron" style="text-align: center;">
<h1>Promotion text</h1>
<p>Small Text here</p>
<p><a href="#" target="_blank" class="btn btn-primary btn-lg">Click Here</a></p>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 textCenter" style="padding-bottom: 1%;">
<a href="#">List favorites here</a>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="padding: 0 5px;">
<img class="img-responsive" src="http://images.all-free-download.com/images/graphiclarge/solid_gold_background_209964.jpg" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="padding: 0 5px;">
<img class="img-responsive" src="http://images.all-free-download.com/images/graphiclarge/solid_gold_background_209964.jpg" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="padding: 0 5px;">
<img class="img-responsive" src="http://images.all-free-download.com/images/graphiclarge/solid_gold_background_209964.jpg" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="padding: 0 5px;">
<img class="img-responsive" src="http://images.all-free-download.com/images/graphiclarge/solid_gold_background_209964.jpg" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="padding: 0 5px;">
<img class="img-responsive" src="http://images.all-free-download.com/images/graphiclarge/solid_gold_background_209964.jpg" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="padding: 0 5px;">
<img class="img-responsive" src="http://images.all-free-download.com/images/graphiclarge/solid_gold_background_209964.jpg" />
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 textCenter" style="vertical-align: middle; padding: 2% 0 1% 0;">
<h3>Box-1 Header <br />Text</h3>
<p>Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here </p>
<p><a href="#" target="_blank" class="btn btn-primary">Click here</a></p>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 textCenter" style="vertical-align: middle; padding: 2% 0 1% 0;">
<h3>Box 2 Promotion Header Text</h3>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="padding: 0 5px;">
<img class="img-responsive" src="http://images.all-free-download.com/images/graphiclarge/solid_gold_background_209964.jpg" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="padding: 0 5px;">
<img class="img-responsive" src="http://images.all-free-download.com/images/graphiclarge/solid_gold_background_209964.jpg" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="padding: 0 5px;">
<img class="img-responsive" src="http://images.all-free-download.com/images/graphiclarge/solid_gold_background_209964.jpg" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="padding: 0 5px;">
<img class="img-responsive" src="http://images.all-free-download.com/images/graphiclarge/solid_gold_background_209964.jpg" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="padding: 0 5px;">
<img class="img-responsive" src="http://images.all-free-download.com/images/graphiclarge/solid_gold_background_209964.jpg" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="padding: 0 5px;">
<img class="img-responsive" src="http://images.all-free-download.com/images/graphiclarge/solid_gold_background_209964.jpg" />
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 textCenter" style="padding: 1% 0;">
<a href="#">List trending here </a>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-offset-2 col-md-8 col-lg-offset-2 col-lg-8 textCenter" style="padding: 1%;">
<p><big>Big Text</big></p>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<footer>
<p>&copy; Footer Text</p>
</footer>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment