Skip to content

Instantly share code, notes, and snippets.

@benznest

benznest/index.html

Created November 8, 2018 06:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save benznest/5c13cf8292c68a89183103233f53f7bd to your computer and use it in GitHub Desktop.
Save benznest/5c13cf8292c68a89183103233f53f7bd to your computer and use it in GitHub Desktop.
Download ZIP
Training bootstrap GRID LAYOUT (Version 2)
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<h1>Hello World</h1>
</div> <!-- Close Row 1 -->
<div class="row">
<div class="col">
<img src="img/banner/banner2.jpg" class="img-fluid">
</div>
</div> <!-- Close Row 2 -->
<div class="row">
<div class="col-md-4 col-12">
<img src="img/staffs/staff1.jpg" class="img-fluid" />
<h1>CEO</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio odit illum autem porro! Quisquam
voluptatibus nesciunt impedit, suscipit corporis, minus culpa molestiae necessitatibus blanditiis,
repellat mollitia beatae hic voluptatum deleniti.</p>
</div>
<div class="col-md-4 col-6">
<img src="img/staffs/staff2.jpg" class="img-fluid" />
<h1>CTO</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio odit illum autem porro! Quisquam
voluptatibus nesciunt impedit, suscipit corporis, minus culpa molestiae necessitatibus blanditiis,
repellat mollitia beatae hic voluptatum deleniti.</p>
</div>
<div class="col-md-4 col-6">
<img src="img/staffs/staff3.jpg" class="img-fluid" />
<h1>CFO</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio odit illum autem porro! Quisquam
voluptatibus nesciunt impedit, suscipit corporis, minus culpa molestiae necessitatibus blanditiis,
repellat mollitia beatae hic voluptatum deleniti.</p>
</div>
</div> <!-- Close Row 3 -->
<!-- Start Row 4 -->
<div class="row">
<div class="col-md-6 col-12">
<div class="row">
<div class="col-4">
<img src="img/life/life2.jpg" class="img-fluid" />
</div>
<div class="col-8">
<h3>Service</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio odit illum autem porro!
Quisquam
voluptatibus nesciunt impedit</p>
</div>
</div>
<div class="row">
<div class="col-4">
<img src="img/life/life3.jpg" class="img-fluid" />
</div>
<div class="col-8">
<h3>Subscription</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio odit illum autem porro!
Quisquam
voluptatibus nesciunt impedit</p>
</div>
</div>
<div class="row">
<div class="col-4">
<img src="img/life/life4.jpg" class="img-fluid" />
</div>
<div class="col-8">
<h3>More</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio odit illum autem porro!
Quisquam
voluptatibus nesciunt impedit</p>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<img src="img/content/office12.jpg" class="img-fluid" />
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio odit illum autem porro! Quisquam
voluptatibus nesciunt impedit, suscipit corporis, minus culpa molestiae necessitatibus blanditiis,
repellat mollitia beatae hic voluptatum deleniti.</p>
</div>
</div>
<!-- Close Row 4 -->
<div class="row">
<div class="col-12">
<img src="img/banner/banner6.jpg" class="img-fluid" />
</div>
</div> <!-- Close Row 5 -->
</div> <!-- Close container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment