You are here

Bootstrap Example

<!doctype html>

<html lang="en">
<head>
<title>The HTML5 Herald</title>
<link href='css/bootstrap.css'rel='stylesheet'>
<meta charset="UTF-8">
<style>
.footer { background-color: #424242; color: #fff; }
.features .glyphicon { font-size: 32px; }
</style>
</head>

<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">
Blasting off with Boostrap
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse">
<li><a href="#">Tickets</a>
<li><a href="#">Stations</a>
<li class=""><a href="#" data-target="#" data-toggle="dropdown">About <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Our Story</a>
<li><a href="#">Contact Us</a>
<li class="divider"></li>
<li><a href="#">Blog</a>
<li class="divider"></li>
<li><a href="#">Twitter</a>
<li><a href="#">Facebook</a>
</ul>
</ul>
</div>
</div>
<div class="container features">
<div class="row">
<div class="col-md-7 well well-lg">
<h2>The Fastest Way to Space</h2>
<p class="lead">You may be wondering if everyone’s websites will look the same if they are built using Bootstrap.</p>

<button type='button' class='btn btn-lg btn-success'>Take the tour</button>
<button type='button' class='btn btn-lg btn-primary'>Book Tickets Now</button>
</div>
<div class="col-md-3 col-md-offset-1 col-sm-4 col-sm-offset-3 hidden-xs">
<img src="https://assoc.drupal.org/files/Elevate-Your-Game-300x140.png">
</div>
</div>
<div class="row text-center">
<div class="col-sm-4 col-xs-10 col-xs-offset-1 col-sm-offset-0">
<i class="glyphicon glyphicon-briefcase"></i>
<h3>Book Today</h3>
<p class="lead">You may be wondering if everyone’s websites will look the same if they are built using Bootstrap.</p>
</div>
<div class="col-sm-4 col-xs-6">
<i class="glyphicon glyphicon-random"></i>
<h3>Go Anywhere</h3>
<p class="lead">You may be wondering if everyone’s websites will look the same if they are built using Bootstrap.</p>
</div>
<div class="col-sm-4 col-xs-6">
<i class="glyphicon glyphicon-send"></i>
<h3>Rocket Bus&Reg</h3>
<p class="lead">You may be wondering if everyone’s websites will look the same if they are built using Bootstrap.</p>
<p class="lead">Learn about <a href="javascript_arrays.cfm">JavaScript Arrays</a></p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="lead">Note: The link above will actually resolve to <i>http://www.quackit.com/javascript/javascript_arrays.cfm</i> regardless of the URL of the current page. This is because the base URL (http://www.quackit.com/javascript/) is prepended to the (relative) URL indicated in the link (javascript_arrays.cfm)</p>
</div>
</div>
</div>
<div class="footer row">
<div class="container">
<div class="col-sm-3 col-xs-6">
<h4>UNO</h4>
<ul class="list-unstyled">
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
</ul>
</div>
<div class="col-sm-3 col-xs-6">
<h4>DOS</h4>
<p>You may be wondering if everyone’s websites will look the same if they are built using Bootstrap.</p>
</div>
<div class="col-sm-3 col-xs-6">
<h4>TRES</h4>
<p>You may be wondering if everyone’s websites will look the same if they are built using Bootstrap.</p>
</div>
<div class="col-sm-3 col-xs-6">
<h4>CUATRO</h4>
<ul class="list-inline">
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
</ul>
</div>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></scr...
<script src='js/bootstrap.js'></script>
</body>
</html>

code type: 
html