Skip to content

Instantly share code, notes, and snippets.

@kawadhiya21 kawadhiya21/portfolio.md Secret
Last active Aug 29, 2015

Embed
What would you like to do?

Responsive Portfolio using Twitter Bootstrap

Bootstrap is a frontend framework developed by Twitter for design purpose. 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.

Today we will make a resume/portfolio using Bootstrap while taking care that it renders smoothly on tablet and mobile devices too. [Demo]

Getting Bootstrap

Bootstrap can be downloaded or compiled from 'Getting Started' page but I would prefer using the CDN option. Also it is advised to read that page and get yourself accustomed with some bootstrap terms. The page has some examples. Be sure to check them out. Observe the difference by shortening your browser at various widths (don't be lazy, do that) see how the rendering differs.

Introduction

Grid System and Devices

If you have read about grids, you may skip this section. 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:

  1. Extra small (xs)
  2. Small (sm)
  3. Medium (md)
  4. 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 or popularly known as navbar is a very powerful tool to design menus. Not only it changed the design but also the way in which the menus were designed. UX was greatly improved after the introduction of this menu. Lets 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

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:

  1. font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  2. font-size: 14px;
  3. margin-left: 65.5px;
  4. margin-right: 65.5px;
  5. padding-left: 15px;
  6. padding-right: 15px;

Without the container div, the top bar would look something like this:

Container

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

Looks like : Nav Bar

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. Class active 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">

and now it looks majestic:

Classic nav Bar

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. 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. Here goes the code.

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

On Mobile device: mobile menu

On Click: menu after 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 caliberation 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 col elements. Here goes the code:

<div role="main">
	    	<div class="container">
	    		<div class="row">
	    			<div class="col-md-4">
	    				
	    			</div>
	    			<div class="col-md-4">
	    				<div style="margin:0 auto;width:120px;">
	    					<div style="background-image:url('http://i61.tinypic.com/2uppus0_th.jpg');width:120px;height:120px;border-radius:60px;"></div>
	    				</div>
	    				
	    					<h1 style="text-align:center">Kshitij Awadhiya</h1>
	    					<p style="text-align:center">PHP and Python</p>
	    					<p style="text-align:center">CodeIgniter and Django</p>
	    					<p style="text-align:center">Worked at : Bluegape, Sourceasy, The Blog Bowl</p>
	    					<p style="text-align:center">Writes for Spice Forms</p>
	    			</div>
	    			<div class="col-md-4">

	    			</div>
	    		</div>

Looks like this :

display image

Explanation

  1. <div class="col-md-4"></div> At the starting and end specifies that 4/12 of the portion remains empty on each side.
  2. <div style="margin:0 auto;width:120px;"> is used to bring the image at the center.
  3. 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.
  4. 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" style="height:50px">
</div>

A group of 3 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 4/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" style="background-image:url('http://oi57.tinypic.com/b9ch2a.jpg')">
</div>

We also introduce a classes for styling the image.

        .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. Now a group of 3 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" style="background-image:url('http://oi57.tinypic.com/b9ch2a.jpg')">
	    				
	    			</div>
    				
    				<div class="col-md-4 col-sm-4 col-lg-4 portfolio" style="background-image:url('http://oi58.tinypic.com/2hdnn2w.jpg')">
    					
    				</div>
    				<div class="col-md-4 col-sm-4 col-lg-4 portfolio" style="background-image:url('http://oi58.tinypic.com/33tma6d.jpg')">
    					
    				</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:

desktop

And on smaller desktop:

small desktop

On Tablets:

tablets

On Mobile:

mobile

Well that is my portfolio, and it is perfectly responsive. Anyone can view my portfolio very easily on any device. Thanks to Bootstrap :)

Source on Github

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.