0% found this document useful (0 votes)
15 views13 pages

Website

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
15 views13 pages

Website

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

<!

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="jumbotron text-


center" style="margin-bottom:0">
<h1>My First Bootstrap 4
Page</h1>
<p>Resize this responsive page
to see the effect!</p>
</div>

<nav class="navbar navbar-


expand-sm bg-dark navbar-
dark">
<a class="navbar-brand"
href="#">Navbar</a>
<button class="navbar-toggler"
type="button" data-
toggle="collapse" data-
target="#collapsibleNavbar">
<span class="navbar-toggler-
icon"></span>
</button>
<div class="collapse navbar-
collapse"
id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
href="#">Link</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>
</ul>
</div>
</nav>

<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>

<div class="jumbotron text-


center" style="margin-bottom:0">
<p>Footer</p>
</div>
</body>
</html>

You might also like