Fashion Website Layout with Bootstrap 3 — Revisited

This blogpost was initially created for GirlsInTech event in January 2016 in order to help a young group of beautiful and talented females to learn the basics of web programming.
Since then it got a lot or reads and people have liked it a lot, and that makes me extremely glad and proud. Newer version contains updated information, as well as better design.

Step 1 — Find your tools!

Before you start coding your HTML&CSS you should know: there is many ways to do same thing!

Technically all you need to create a web page is a text editor like notepad. But of course there is more to it!

One of the most popular text editors for front-end development (aka making websites) is Sublime Text.

Sublime Text provides you with tons of shortcuts and syntax markup. It is very fast and simplifies the way to display your web page in the browser.

If you want to try coding on your local machine, download sublime text here.

Install it and — yeah — enjoy!

Nowadays you can do it online using tools like codepen.io You can write basic HTML and CSS, JavaScript online!

Note: if you choose to develop online, great! In the tutorial download all the files with CDN (otherwise it won´t work).

Step 2 — Create a Folder

If you are using codepen.io tool, just skip those steps and start from step 3!

If you are coding on your local computer, you should install Sublime Text, create a new folder, name it as our project name — fashion_trends. Create an index.html file. So far it is an empty file.

We are using Bootstrap 3 here, HTML5, CSS3.

Step 3 — Hello, World!

Create a basic HTML template. So far you should know how to structure a basic HTML layout and know what CSS is.

What is Bootstrap?

All the websites on the Internet nowadays cannot get away without being styled with CSS. Bootstrap is simply just a .css file that contains classes that you can use for styling of your own page. (There is more to Bootstrap, but for now we will concentrate on its CSS part.)

It used to be extremely long and hard work to develop fully functioning responsive website before. Nowadays this is very easy with just putting right css classes from bootstrap.css on the page.

But let’s start from the beginning:

Responsive web rules!

You can either read about what it is in this brilliant Smash Magazine article or here is my way to explain it:

For decades web has been exclusicely big-computer-screen thing. Starting from 2007 smartphones kicked in. And websites that were perfectly fine of large desktops became collectively unusable. People started to search for the ways to adapt the websites to mobile devices and just scaling down websites on smartphones was not anymore an option. People tried to use different techniques including doing two versions of the website (mobile and desktop), making it zoomable on mobile etc. Until they came to a final conclusion: websites have to be responsive.

What does it mean?

Responsive website example

This picture explains it pretty well. Instead of making page zoomable on mobile, we just readjust the elements with css so that they look good on mobile screen.

In this case the same HTML elements will have different css depending on the device aspect ratio (mostly depending on the screen width).

How do I make the website responsive?

The answer is: use media queries in css. We now will learn what are media queries!

Media queries are essentially a rule to specify some property of the device or browser, and change css classes according to it.

Follow the link: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

If you try to implement media queries yourself, you ll notice: it is troublesome. There is a lot pf rules and adjustments needed to be done. That is where bootstrap come in handy!

Media queries are the basis for bootstrap too! See here: http://getbootstrap.com/css/#grid-media-queries

Add media queries to make image full screen width for small devices!

As you will be styling your page with Bootstrap, I highly recommend start with the recommended template on Bootstrap website available at the link.

Now let’s recap what the template is. Read explanations in the comment section.

<!DOCTYPE html> 
<! —- identifies the version of HTML -->
<html lang="en"> 
<! —- indicates the beginning of the html document -->
 <head> 
<! —- all the metadata about our page goes into the <head> tag -->
 <meta charset="utf-8"> 
<! —- identifying the character encoding as UNICODE -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<! —- necessary to make website responsive later on -->
 <! —- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
 <title>Bootstrap 101 Template</title> 
<! —- title of our page in the tab -->
 <! —- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<! —- link for an external stylesheet that provides bootstrap code with classes -->
 </head>
<body>
<-— everything we actually see the page goes to body-->
<h1>Hello, world!</h1>
 <! —- scripts should be in the button of the page -->
<! —- jQuery (necessary for Bootstrap’s JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
  </body>
</html>

Great! Now we have a nice template to go with! Right click on the document and open the page in the browser!

(Those who use codepan.io, you can see the output down below the code in the same page)

Hello World! is a standard test text for coding!

This is what your page looks so far. It has not been styled yet, so let´s do it!

Using CDN

But to keep it simple — just one file — you might want to use CDN.

CDN is basically a link to the official distribute of some code, css in our case, so that you would not need to download it on your local machine, but can se via network.

So now let’s replace

<! — Bootstrap →
<link href="css/bootstrap.min.css" rel="stylesheet">

with a link to an external bootstrap.css file.

<! — Latest compiled and minified CSS -- >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384–1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Now do the same for the script.

You can also find the latest CDN here.

WHAT IS min?

.min. suffix in the filenames indicate they have been minified to load faster. As in coding white spaces and breaks are ignored, minified simply means all the breaks and white spaces are deleted. This code is great for the browser to compile, but hard for a human to read. That is why we will only minify our files in the end when all the css is done.

Now refresh your file in the browser. You should spot that the text font has changed.

Now you see the change in font

It means now the Bootstrap styling has actually been applied so our CDN/ local distro works.

Great! So now we can add some basic HTML structure to the document. Inside of your body tag delete the <h1> tag and replace it with the <div>. This is going to be our root section that we are going to place all our content later to. Inside of a div create a <nav> and put there some unordered list (<ul>) with 5 menu points. They should be:

  • Main
  • Article
  • Persona
  • Trends
  • More

Create one more <div> box — this is going to be later a container for the article section. Do the same for the rest 4 sections.

Now instead of <h1>Hello, world!</h1> you should have

<div>
<nav>
<ul>
<li>…</li>

</ul>
</nav>
 <div></div>
<div></div>
<div></div>
</div>

In each of them put the heading of the second level <h2> with the corresponding names (Main, Trends, etc.)

Inside of the persona paste some text about 300 characters in <p> and a photo in <img>.

Tip: just use web link to any pic you like, do not download.

Now in the main section we will create an image tag.

Inside of the trends section create several divs, put <img> tags inside of them, the sources for the images can be found by: https://www.google.fi/search?q=street+style&espv=2&biw=1280&bih=590&source=lnms&tbm=isch&sa=X&ved=0ahUKEwixgcnTk8rKAhUBqHIKHR8WAxwQ_AUIBigB

Now your code should look like this:

Our page now has some basic markup so we may start styling it with bootstrap

Step 4 — Main concept

The main concept of bootstrap is that it creates a grid system — a grid system is just a fancy word to say it has classes that divide the page into rows and rows into columns.

How it works in practice?

Bootstrap provides basic tutorials here.

The Bootstrap columns and rows can only be placed within a .container class as described on their website:

“Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable. “

We can either nest all the elements within the .container or .container-fluid classes, the only difference is that the last one is full width of the view port and the first one has a fixed width and will be cut on the large desktop screens.

Afterwards we can start creating rows inside of our container. Basically the it represents tree structure:

-container

— row

— -column

Here is an explanation how bootstrap divides the page.

Each row is logically divided into 12 columns. Think of it as if 12 was 100% of the row width. It means that every .col-*-1 class represents 1/12 of the row (so 1/12 of the page with).

What does it mean?

As you have noticed, .col classes come with different properties. How to read them?

.col — means it’s a column class

-lg- is a suffix that specifies the size of viewport (the device screen) on which people are going to view our website

-1- to -12- specified how much on the row width it is going to take (1 out of 12 or 12 out of 12 ).

Why does row have 12 columns?

12 is easily divisible by 2, 3, 4, so it is very easy to use it for most popular website layouts.

Example:

<div class="row">
 <div class="col-lg-12">... </div>
</div>

Here <div> takes 100% of the page width, since it takes 12/12 of the page.

<div class="row">
 <div class="col-lg-1"> ... </div>
</div>

Here the <div> will take 1/12 of the page.

If we want several columns take one row, we must put them in a way that they take 12/12 of the page.

<div class="row">
 <div class="col-lg-1"></div>
 <div class="col-lg-6"></div>
 <div class="col-lg-5"></div>
</div>

This is basic math: 1+6+5 = 12, so all three divs are going to take one entire row. If we add one more div with column class, it is going to go on the next row.

This is the main concept that you need to know about bootstrap css. Read more specifications on Bootstrap website.

Now we can move on and actually structure our page with bootstrap css.

Step 5 — Styling page with bootstrap

Now as we have basic markup and your page looks like this:

We can now start styling it! in our root <div> put a class .container-fluid. Now it serves us as a wrapper for the rest of the sections. As you might have guessed already, our sections will have .row classes. See the example here:

“Wait!” — you will say, — “but the layout has not changed!”.

Well, you are right — visually not much has changed, but it is because we have not applied our .col-* classes yet. We will do it now!

First of all, let´s style the navigation. Bootstrap provides classes to style navigation. You can find it here.

Replace your old <nav> with one of the samples, leaving the same content.

Note: <nav> in bootstrap should be placed outside of the main .container

Sample:

After we can start styling our sections — the ones with class .row

In the main section delete <h2>Main</h2>. Make image in the section responsive by adding class=”img-responsive” to the image.

Now resize the browser window. You can see that the image that was bigger than the viewport size, now fits into viewport regardless of the screen size.

DO IT YOURSELF:

Make first section the height of the viewport. Find out how by googling it. The trend is called “hero image”. Try this out!

Now put main heading (<h1>) to the centre of the section saying “Fashion Trends 2016”.

Text should be in the centre of the screen.

Step 6 — Bootstrap columns

Persona section:

Now we will create column for the main heading. Create a <div> with a class= “col-lg-12 col-md-12 col-sm-12 col-xs-12”. It will make this div take 100% of the width.

Put article heading inside of that div. Create one more div with the same class. This time we create a column for our article and a picture.

Put image inside of a div with class= “col-lg-3 col-md-4 col-sm-12 col-xs-12”. Put <p> with text in the class= “col-lg-4 col-md-5 col-sm-12 col-xs-12”

Create as many columns, as you want here for the test. You can take text from any resource, just mention a reference after it.

Tip: if you have pictures of big size, and you don’t want them to overlap with other columns, you can use overflow-y: hidden; overflow-x-hidden. Or just use .img-responsive class.

Tip: Sometimes you would want to override some of the bootstrap classes to get the right layout. In this case if you are using codepan.io, make sure your overrides have unique class names and !important tag. This is considered a bad practice, but otherwise we cannot work with cdn in codepan.

Those who are creating website on the local machine, make sure your stylesheet is loaded after the bootstrap cdn stylesheet.

See example code:

Step 7 — Creating card layout

I am pretty sure everybody knows what Pinterest looks like. This is also one of the recent web trends. Read more info here: http://thenextweb.com/dd/2015/06/16/how-cards-are-taking-over-web-design/#gref

Metro layout has taken over and it is very popular for fashion blogs and fashion stores.

Now we are going to see the way to develop the same kind of layout. Note there is a couple of ways to do it!

Way 1

As you have probably guessed, we will put .row class for the trends section. We will create a full width column and put Trends heading inside of it, just like we did in step 6.

Now we will create one more full width column inside of the .row. Now you have

Basically, your Trends section now looks like this:

<div class="row">
 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <h2>Trends</h2>
</div>
 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <div><img src=" .."></div>
  <div><img src="http://mive.jpg"> </div>
  ….
 </div>
</div>

Cool thing about bootstrap: you can create rows inside of columns. Yes! Now we can add rows to columns — and create more columns inside of that row!

Note: You cannot put a row inside of another row directly!

<div class="row">
 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <h2>Trends</h2>
 </div>
 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <div class="row">
   <div><img src=" .."></div>
   <div><img src=”http://mive.jpg"> </div>
     ….
  </div>
 </div>
</div>

You have probably guessed already what we are going to do: the row we have created we will divide into columns, each image is going to take a separate column. You decide how many columns of images you want to have!

It is always better if for small devices you put image to bee full screen, so col-sm-12 and col-xs-12 should be used.

For medium and desktop devices you probably want to have 3–4 rows. In this case you would assign your divs containing images with classes like .col-lg-3 col-md-4 or col-lg-4 col-md-4.

After we will assign every image tag class=”img-responsive”. (you can also adjust image size automatically with css — find out how for extra points!).

See code sample in here:

Play with the viewport size — The layout should change upon resize.

Way 2 — Using Flexbox

Flexbox is a great tool that allows you even distribution of all the elements! The only downside of it — it has to be declared for every browser separately. This is a problem for more advanced development process, though, so at this point this would not be a problem. Read more about flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Instead of creating nested row inside of a column, we create a <div> with a class .flex-container.

Put a style tag inside inside of your head section, or create an external stylesheet.

Tip: If you are using this method, you should pre define the size of the image containers. (<div> tags inside of which images are placed).

Specify the following styling for .flex-container

.flex-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start ;
}

and for image containers:

.flex-container div{
  width: 33%;
}

33% because we want a div to take ⅓ of the page.

Wow! Now we have THE LAYOUT! Resize the window to see how smoothly everything is changing!

See the code example here:

Step 8 — Writing Media queries

You have probably noticed that flex-container is a great thing to have to evenly distribute objects, but what about mobile layout? Three images in a row are just too small for the phone screen.

We have to make them work so that there is just one picture per row when the screen size is small.

We now will learn what are media queries!

Follow the link: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Media queries are essentially a rule to specify some property of the device or browser, and change css classes according to it.

Media queries are the basis for bootstrap too! See here: http://getbootstrap.com/css/#grid-media-queries

Add media queries to make image full screen width for small devices!

Step 9 — Adding custom fonts

Article section is empty so far! Add some text content there and use proprietary fonts for it.

Find the best fonts you can get from Google Fonts!

Step 10 — Adding JavaScript (Optional)

If you are familiar with JavaScript, start adding some interaction to the web page.

Step 11 — Github Hosting (Optional)

Here we will finally put our page on github hosting! Go to github.com and create your account there.

More info is provided by github tutorial:

By the end, you should have a fully responsive basic website layout! Hope you enjoyed making it!

If you liked this, click the💚 below so other people will see this here on Medium. Also, Subscribe and enjoy more tutorials from me!