Bootstrap is a frontend framework developed by Twitter for design purposes. Apart from being responsive, it has got different components ranging from grid systems to icons set and hence surely lead the all the other frameworks. Bootstrap is open source and is the most popular repository on GitHub.
Today we will make a responsive portfolio using Bootstrap while taking care that it renders smoothly on tablet and mobile devices too. The working demo of this tutorial can be found here.
Getting Bootstrap
Bootstrap can be downloaded or compiled to your needs from their ‘Getting Started‘ page but I would prefer using the CDN option, because it’s faster. Also, it is advised to go through the page and get yourself accustomed with some bootstrap terms, including common classes. This page also has some examples of how to use Bootstrap classes. Be sure to check them out. Observe the responsiveness by shortening your browser at various widths and noticing the difference (don’t be lazy, do that). See how the rendering differs at different widths.
Introduction
Grid System and Devices
Bootstrap uses 12 point grid system. This means that entire page or row is divided into 12 equal parts. We will always make sure that our width sum is 12. What is more interesting is that the specification can be provided for devices of different widths with least effort. This means that if a column covers 7/12 of row in one device, may be reduced to cover just 5/12 in other. It will be more interesting when you observe it.
Bootstrap specifies 4 types of devices based on the width:
- Extra small (
xs) - Small (
sm) - Medium (
md) - Large (
lg)
Separate designs for each device can be specified.
Initiation
Let us start by setting up HTML and importing the Bootstrap CSS and JavaScript.
<html>
<head>
<title>
My Portfolio
</title>
<style type="text/css">
body{
padding-top: 70px;
}
</style>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
Navigation
Navigation Toolbar, popularly known as navbar, is a very powerful tool to design menus. Not only did it change the design but also the way in which the menus were designed. UX was greatly improved after the introduction of this menu. Let’s see how to use it.
<div class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Kshitij Awadhiya</a>
</div>
</div>
</div>
Looks like :
navbar is the basic class which defines the styles of navigation bar. Class navbar-fixed-top keeps it attached to the top. So even if the page extends, the navigation bar is always visibile.
container is the class of child div. It defines some important styles like:
- font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
- font-size: 14px;
- margin-left: 65.5px;
- margin-right: 65.5px;
- padding-left: 15px;
- padding-right: 15px;
Without the container div, the top bar would look something like this:
This isn’t looking good. Margins and paddings are important.
navbar-header is defines the top-left header text style. The text is defined using navbar-brand giving it a fixed appearance on the left in different devices. It is a hyperlink and contains the link to the homepage of the portfolio.
Next we come to define few other menu options on the navigation bar.
<html>
<head>
<title>
My Portfolio
</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Kshitij Awadhiya</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Our new codes gives us the following look.
navbar-collapse collapse will be explained shortly. The other menu options is a list which can be specified by using nav class which gives them margin on top and bottom. navbar-nav fixes the width and hence allows them to render properly inside navigation bar. The menu options are specified by <li> and <a> tag. Classactive highlights the particular menu option to specify the current page.
The navigation bar looks good but certainly not as good because of its inefficiency to make a statement. Dark bar with lighter menu would have done the trick. So simple insert navbar-inverse class to the navbar:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
Now, it looks far better.
Fixing Navigation Bar for Mobile Devices
Coming back to navbar-collapse collapse. When we look the same page on a mobile device, we wouldn’t want to see the whole menu. Instead a drop down would do. Now here comes the use to navbar-collapse collapse class. We specify a button with an icon which appears on the top right only and only if viewed on a mobile device.
All the above may sound a bit tough, but if you read carefully, it’s actually within your reach. It involves rendering the menu according to device width. But with Bootstrap, all we need to do is specify the button and rest is taken care by them. The code looks like the following.
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Kshitij Awadhiya</a>
</div>
On normal device looks like this :
On Mobile device:
On Click:
Lets move on to make other elements.
Display Image and Basic Details
Now what I planned was a simple round display image in the center followed by name and other basic details. Lets use the grid system.
We have a division of 12 and hence, need to adjust that way. What we do is use the middle 4/12 portion for displaying image and details. Hence starting with a new div and making a row which contains all the colelements.
<div role="main">
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<div>
<div></div>
</div>
<h1>Kshitij Awadhiya</h1>
<p>PHP and Python</p>
<p>CodeIgniter and Django</p>
<p>Worked at : Bluegape, Sourceasy, The Blog Bowl</p>
</div>
<div class="col-md-4">
</div>
</div>
The code produces the following.
A brief Explanation
<div class="col-md-4"></div>At the starting and end specifies that 4/12 of the portion remains empty on each side.<div>is used to bring the image at the center.background-image:url('ht..g');width:120px;height:120px;border-radius:60px;This fixes image size and curves it by 60px radius which eventually makes it round.style="text-align:center"brings the text part to the center of the screen.
Portfolio Images
Clear about 50px of space to increase clarity.
<div class="row">
</div>
A group of 4 pictures are to be put upon with heading and should look perfectly well in all devices. As per grid system, we just need to allocate them 3/12 of space in each device and rest is taken care by Bootstrap.
Example :
<div class="col-md-3 col-sm-3 col-lg-3 portfolio">
<p class="portfolio_text">Python</p>
</div>
We also introduce 2 classes for styling the image and text inside.
.portfolio{
background-position:center;
background-repeat:no-repeat;
border:solid .5px;
height:300px ;
}
portfolio specifies that the background-image position inside should be centered and shouldn’t repeat..portfolio_text only centers the text apart from fixing basic properties like font-size and style. Now a group of 4 such are to be added in a row to get the images in portfolio.
<div class="row">
<div class="col-md-4 col-sm-4 col-lg-4 portfolio">
</div>
<div class="col-md-4 col-sm-4 col-lg-4 portfolio">
</div>
<div class="col-md-4 col-sm-4 col-lg-4 portfolio">
</div>
</div>This adds a group of 3 pictures and more can be added simply by replicating that div and changing background-image url. Now my portfolio on desktop looks like:
And on smaller desktop:
On Tablets:
On Mobile:
Well that is my portfolio, and it is perfectly responsive. Anyone can view my portfolio very easily on any device. Thanks to Bootstrap!
The source code can be found on and downloaded from Github. The demo is hosted on GitHub pages.
Speak Your Mind