Website
Website
DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Website
Example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstr
ap.min.css">
<script
src="https://cdn.jsdelivr.net/npm/j
[email protected]/dist/jquery.slim.min.
js"></script>
<script
src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/umd/popp
er.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap
.bundle.min.js"></script>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
<body>
<div class="container"
style="margin-top:30px">
<div class="row">
<div class="col-sm-4">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg">Fake
Image</div>
<p>Some text about me in
culpa qui officia deserunt mollit
anim..</p>
<h3>Some Links</h3>
<p>Lorem ipsum dolor sit
ame.</p>
<ul class="nav nav-pills flex-
column">
<li class="nav-item">
<a class="nav-link active"
href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link
disabled" href="#">Disabled</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7,
2017</h5>
<div class="fakeimg">Fake
Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia
deserunt mollit anim id est
laborum consectetur adipiscing
elit, sed do eiusmod tempor
incididunt ut labore et dolore
magna
aliqua. Ut enim ad minim veniam,
quis nostrud exercitation
ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2,
2017</h5>
<div class="fakeimg">Fake
Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia
deserunt mollit anim id est
laborum consectetur adipiscing
elit, sed do eiusmod tempor
incididunt ut labore et dolore
magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation
ullamco.</p>
</div>
</div>
</div>