Skip to content

Instantly share code, notes, and snippets.

@cvburgess

cvburgess/Bootstrap 3 Grid + Cover BG

Created October 18, 2013 21:15
Show Gist options
  • Save cvburgess/7048384 to your computer and use it in GitHub Desktop.
Save cvburgess/7048384 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Bootstrap 3 Grid + Cover BG
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Template for Bootstrap</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div align="center" class="col-md-12">
<h1>Hello, John!</h1>
</div>
<div class="col-md-6">
<h2>Heading 2</h2>
<p>
Contrary to popular belief, Lorem Ipsum is not simply
random text. It has roots in a piece of classical Latin literature
from 45 BC, making it over 2000 years old. Richard McClintock,
a Latin professor at Hampden-Sydney College in Virginia,
looked up one of the more obscure Latin words, consectetur,
from a Lorem Ipsum passage, and going through the cites of the
word in classical literature, discovered the undoubtable source.
</p>
<br><br>
</div>
<div class="col-md-6">
<h2>Heading 2</h2>
<p>
Contrary to popular belief, Lorem Ipsum is not simply
random text. It has roots in a piece of classical Latin literature
from 45 BC, making it over 2000 years old. Richard McClintock,
a Latin professor at Hampden-Sydney College in Virginia,
looked up one of the more obscure Latin words, consectetur,
from a Lorem Ipsum passage, and going through the cites of the
word in classical literature, discovered the undoubtable source.
</p>
<br><br>
</div>
<div class="col-md-6" align="center">
<a href="https://maps.google.com/" target="_blank"><img src="img/map.png" alt="Click Here for a Map to our Location"></a>
</div>
<div class="col-md-6">
<h2 class="col-lg-offset-3 col-lg-8" align="center">Get More Info Today!</h2>
<form class="form-horizontal" role="form">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-lg-3 control-label">Full Name</label>
<div class="col-lg-8">
<input id="form_first_name" name="form_first_name" type="text" placeholder="John Doe" class="form-control col-lg-8">
<!--input id="form_last_name" name="form_last_name" type="text" placeholder="Doe" class="form-control col-md-8 col-lg-4" style="width: 50%"-->
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-lg-3 control-label">Email</label>
<div class="col-lg-8">
<input id="form_email" name="form_email" type="text" placeholder="jdoe@example.com" class="form-control">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-lg-3 control-label">Phone</label>
<div class="col-lg-8">
<input id="form_phone" name="form_phone" type="text" placeholder="123-456-7890" class="form-control">
</div>
</div>
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-lg-3 control-label">Favorite Things</label>
<div class="col-lg-8">
<label class="checkbox">
<input type="checkbox" name="form_choice" id="form_choice-0" value="">
Option one
</label>
<label class="checkbox">
<input type="checkbox" name="form_choice" id="form_choice-1" value="">
Option two
</label>
<label class="checkbox">
<input type="checkbox" name="form_choice" id="form_choice-2" value="">
Option three
</label>
</div>
</div>
<br>
<!-- Button -->
<div class="form-group">
<div class="col-lg-offset-3 col-lg-8">
<button id="" name="" style="width: 100%" class="btn btn-primary">Get More Info</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment