Born, growing up.
Bootstrap in practice: a landing page
Heads up!
2013-09-10 · Updated to Bootstrap 3.0.0 stable.
TL;DR
Here we go
Let's see how to build a landing page with Bootstrap from scratch.
The first step is the good ole "Hello, world!" page.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap In Practice - Landing Page Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap -->
<link
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>Not so much to see here: just the basic HTML and the awesome BootstrapCDN.
Content is king
Or, Landing Pages 101.
One good way to catch the attention of somebody passing by your landing page is a direct question, better if about a pain they would certainly be interested in throwing away.
Following, there should be a brief, to-the-point, digression about the same subject closed with a reiteration of the opening question which is also a nice touch.
Now that you have exposed the pain point, introduce your solution to the problem.
A simple form, requesting the minimum possible information about your visitor, with a clear declaration of what you are going to do with their data.
As an example, we are going to just use a fairly famous question, followed by a brief digression on the same subject and a simple form requesting no more than an email address.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap In Practice - Landing Page Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<h1>Have you ever seen the rain?</h1>
<p>
Someone told me long ago there's a calm before the storm. I know, It's been comin for some time.
</p>
<p>
When it's over, so they say, it'll rain a sunny day. I know, Shinin down like water.
</p>
<p>
I want to know, have you ever seen the rain?
</p>
<form action="/mailing-list" method="post">
<p class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control input-lg" name="email" placeholder="[email protected]" />
</p>
<p class="help-block"><small>We won't send you spam. Unsubscribe at any time.</small></p>
<p>
<button type="submit" class="btn btn-success btn-lg">Keep me posted</button>
</p>
</span>
</form>
</body>
</html>
Pretty basic, so far.
Front and center is always a win
Content is king and comes first. It should make sense and be effective even in a barebones page.
But things can and will get better, if you start giving your content breath and prominence: a throne for the king.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap In Practice - Landing Page Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
body {
padding-top: 20px;
}
.margin-base-vertical {
margin: 40px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="margin-base-vertical">Have you ever seen the rain?</h1>
<p>
Someone told me long ago there's a calm before the storm. I know, It's been comin for some time.
</p>
<p>
When it's over, so they say, it'll rain a sunny day. I know, Shinin down like water.
</p>
<p>
I want to know, have you ever seen the rain?
</p>
<form action="/mailing-list" method="post" class="margin-base-vertical">
<p class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control input-lg" name="email" placeholder="[email protected]" />
</p>
<p class="help-block text-center"><small>We won't send you spam. Unsubscribe at any time.</small></p>
<p class="text-center">
<button type="submit" class="btn btn-success btn-lg">Keep me posted</button>
</p>
</span>
</form>
</div>
</div>
</div>
</body>
</html>
A few touches, but a very good effect. We horizontally centered the content with a .col-md-6 .col-md-offset-3.
Then we added a default top padding to the <body> and used a custom utility class — .margin-base-vertical — to adjust the vertical margins of some elements.
Jewels
You know, since we are going on with this content is king stuff, let's keep it on till the end of the chapter and call it a day.
Jewels are little shiny additions to a king's crown and dress. Just like adding two nice web fonts, and swapping a textual @ for a crisp icon-envelope from FontAwesome.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap In Practice - Landing Page Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600' rel='stylesheet'>
<style>
body {
padding-top: 20px;
font-size: 16px;
font-family: "Open Sans",serif;
}
h1 {
font-family: "Abel", Arial, sans-serif;
font-weight: 400;
font-size: 40px;
}
.margin-base-vertical {
margin: 40px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="margin-base-vertical">Have you ever seen the rain?</h1>
<p>
Someone told me long ago there's a calm before the storm. I know, It's been comin for some time.
</p>
<p>
When it's over, so they say, it'll rain a sunny day. I know, Shinin down like water.
</p>
<p>
I want to know, have you ever seen the rain?
</p>
<form class="margin-base-vertical">
<p class="input-group">
<span class="input-group-addon"><span class="icon-envelope"></span></span>
<input type="text" class="form-control input-lg" name="email" placeholder="[email protected]" />
</p>
<p class="help-block text-center"><small>We won't send you spam. Unsubscribe at any time.</small></p>
<p class="text-center">
<button type="submit" class="btn btn-success btn-lg">Keep me posted</button>
</p>
</span>
</form>
</div>
</div>
</div>
</body>
</html>
Tapestries
Ok, stay with me just another few lines: the metaphorical madness has come to an end.
So we have our king, with his crown and jewels, sitting well centered and with proper amounts of vertical space in his throne room.
And what's a throne room without tapestries! (Wait, wa...)
So let's all thank Chris Coyer — for the tecnique — and Flickr user erwlas — for the photo (see the attribution links added at the bottom of the final example code) — and give this landing page a nice full screen background.
As a last touch, we are making the grid cell containing the content a .panel and also overriding its default white background with a slightly transparent one.
Notice also that in order to let the html background be visible through the page, we also need to make sure the body has a background: transparent;.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap In Practice - Landing Page Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet" />
<style>
/* http://css-tricks.com/perfect-full-page-background-image/ */
html {
background: url(img/6133364748_89f2365922_o.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
padding-top: 20px;
font-size: 16px;
font-family: "Open Sans",serif;
background: transparent;
}
h1 {
font-family: "Abel", Arial, sans-serif;
font-weight: 400;
font-size: 40px;
}
/* Override B3 .panel adding a subtly transparent background */
.panel {
background-color: rgba(255, 255, 255, 0.9);
}
.margin-base-vertical {
margin: 40px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 panel panel-default">
<h1 class="margin-base-vertical">Have you ever seen the rain?</h1>
<p>
Someone told me long ago there's a calm before the storm. I know, It's been comin for some time.
</p>
<p>
When it's over, so they say, it'll rain a sunny day. I know, Shinin down like water.
</p>
<p>
I want to know, have you ever seen the rain?
</p>
<form class="margin-base-vertical">
<p class="input-group">
<span class="input-group-addon"><span class="icon-envelope"></span></span>
<input type="text" class="form-control input-lg" name="email" placeholder="[email protected]" />
</p>
<p class="help-block text-center"><small>We won't send you spam. Unsubscribe at any time.</small></p>
<p class="text-center">
<button type="submit" class="btn btn-success btn-lg">Keep me posted</button>
</p>
</span>
</form>
<div class="margin-base-vertical">
<small class="text-muted"><a href="http://www.flickr.com/photos/erwlas/6133364748/">Background picture by erwlas @flickr</a>. Used under <a href="http://creativecommons.org/licenses/by/2.0/deed.en">Creative Commons - Attribution</a>.</small>
</div>
</div><!-- //main content -->
</div><!-- //row -->
</div> <!-- //container -->
</body>
</html>
And it's done
A good starting point for your landing page, where content is king and has — pls stahp —.
rewind
A good starting point for your landing page, where content is easily put front and center thanks to Bootstrap 3 and a few styles get overridden for a greater cause.