Bootstrap Template Example: Bootstrap responsive portfolio templates
bootstrap responsive portfolio gallery Example
Copy The Bootstrap Code Below
Select => Right Click => Copy
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portfolio Website Bootstrap Design Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Portfolio</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container text-center">
<h1>My Portfolio</h1>
<p>Some text that represents "Me"...</p>
</div>
</div>
<div class="container-fluid bg-3 text-center">
<h3>Some of my Work</h3><br>
<div class="row">
<div class="col-sm-3">
<p>Some text..</p>
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-3">
<p>Some text..</p>
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-3">
<p>Some text..</p>
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-3">
<p>Some text..</p>
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
</div>
</div>
</div><br>
<div class="container-fluid bg-3 text-center">
<div class="row">
<div class="col-sm-3">
<p>Some text..</p>
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-3">
<p>Some text..</p>
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-3">
<p>Some text..</p>
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-3">
<p>Some text..</p>
<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
</div>
</div>
</div><br><br>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
Here is how "Bootstrap responsive portfolio templates" look like
My Portfolio
Some text that represents "Me"...
Some of my Work
Some text..
Some text..
Some text..
Some text..
Some text..
Some text..
Some text..
Some text..
Bootstrap responsive portfolio templates