Bootstrap 101
Prerequisites
Download sample files
Template page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Steve Rogers</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all Bootstrap plugins -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
Header
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">
<img src="steve.jpg" class="img-responsive" alt="Steve Rogers">
</div>
<div class="col-sm-6 col-md-8 col-lg-9">
<h1>Steve Rogers</h1>
<p>Tactical Specialist</p>
<p>Albany, NY</p>
</div>
</div>
</div>
Education
<section id="education">
<div class="jumbotron" style="background-image: url('education.jpg');">
<div class="container">
<h2>Education</h2>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>F. D. Roosevelt High School <small>Class of 1938</small></h3>
<ul>
<li>Valedictorian</li>
<li>Balanced STEM and Fine Arts</li>
<li>After-hours tutor for 2 years</li>
</ul>
</div>
<div class="col-md-6">
<h3>Southern New Hampshire University <small>Class of 2011</small></h3>
<ul>
<li>Online program completed while employed</li>
<li>Rigorous Political Science self-study</li>
</ul>
</div>
</div>
</div>
</section>
Professional Work
<section id="professional">
<div class="jumbotron" style="background-image: url('professional.jpg');">
<div class="container">
<h2>Professional</h2>
</div>
</div>
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#tab-ssr" aria-controls="tab-ssr" role="tab" data-toggle="tab">SSR</a></li>
<li role="presentation"><a href="#tab-shield" aria-controls="tab-shield" role="tab" data-toggle="tab">S.H.I.E.L.D.</a></li>
<li role="presentation"><a href="#tab-freelance" aria-controls="tab-freelance" role="tab" data-toggle="tab">Freelance</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab-ssr">
<h3>SSR</h3>
<ul>
<li>Lead participant in Project Rebirth</li>
<li>Performance tour responsible for 50% increase in bond sales</li>
<li>Led ground forces against multiple Hydra bases in Europe</li>
<li>Personally responsible for ending of Hydra Tesseract projects</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane" id="tab-shield">
<h3>S.H.I.E.L.D.</h3>
<ul>
<li>Worked with Avengers team in Battle of New York</li>
<li>Disrupted terrorist cells across Europe and Asia</li>
<li>Led fight to expose Hydra operations in the USA</li>
<li>Led team responsible for ending of Hydra Insight project</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane" id="tab-freelance">
<h3>Freelance</h3>
<ul>
<li>Worked with Avengers team to disrupt multiple Hydra targets worldwide</li>
<li>Worked to restore USAF Falcon project</li>
<li>Volunteer work with local VFW</li>
</ul>
</div>
</div>
</div>
</section>
Contact
<section id="contact">
<div class="jumbotron" style="background-image: url('education.jpg');">
<div class="container">
<h2>Contact</h2>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
<div class="row">
<div class="col-xs-6">
<ul class="nav nav-pills nav-stacked">
<li role="presentation"><a href="http://facebook.com/captainamerica">Facebook</a></li>
<li role="presentation"><a href="http://twitter.com/captainamerica">Twitter</a></li>
</ul>
</div>
<div class="col-xs-6">
<ul class="nav nav-pills nav-stacked">
<li role="presentation"><a href="https://www.youtube.com/playlist?list=PLK5HARgNfgj-cuVJ8e3XrMRFtl-JE0uiQ">YouTube</a></li>
<li role="presentation"><a href="http://www.tumblr.com/tagged/captain-america">Tumblr</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
Navbar
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#steve-navbar-collapse" aria-expanded="false">
<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="#content">Steve Rogers</a>
</div>
<div class="collapse navbar-collapse" id="steve-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#education">Education</a></li>
<li><a href="#professional">Professional</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
Extra Styles
<style type="text/css">
body {
padding-top: 100px; /* required for fixed navbar */
position: relative; /* required for scrollspy */
}
.jumbotron {
text-align: center;
padding-top: 150px;
padding-bottom: 150px;
background-size: cover;
margin-top: 100px;
}
.jumbotron h2 {
color: white;
text-shadow: 2px 2px 4px black;
font-size: 48px;
}
</style>
Finished copy
View finished page