- Read Tutorial
- Watch Guide Video
In this video, we're going to start putting different elements that we can see on the page.
As always, we'll start off with a main <div> tag that has a class called "grey2". There's going to be nothing inside this tag, but it's still going to be there in case we choose to add some more things in the future. Also, this tag will not be so empty when we define the style for our "grey2" class. This is a common design convention used by many designers.
Next, we're going to create the header with a couple of nested <div> tags. Let's have an ID called "header" for the first <div> and a class called "container" for the nested one. Now, bootstrap already has a class called "container", so we won't have to do much styling here.
Inside this nested <div>, we're going to have another <div> tag with a class called "row". This is also a built-in class from bootstrap, and it creates rows for us, inside which we can place our elements.
<body> <div class="grey2"></div> <div id="header"> <div class="container"> <div class="row"> </div> </div> </div> </body>
Inside the "row" div, we're going to create another <div> called "grey". In this tag, our aim is to have a grey line, that we'll define in the style for this class.
Next, we'll build columns. Remember, this is a responsive website, so we'll need columns that adjust based on the screen size. To implement this, we'll have a <a href> link, and we'll define multiple classes for it. Some of these classes are already available in bootstrap, and others we'll have to build. To pass multiple classes, simply leave a space between classes, and pass them all together, like this:
<div class="row"> <div class="grey"></div> <a class="col-xs-3 pull-left" href="#"></a> </div>
Out of these three classes, we have to define the style only for "logo", and the other two come from bootstrap. Next, we're going to have a logo image. Here, we're going to have two logo images - one is the regular size and the other is small. We're including both these logos because we want to have the small logo for mobile sites.
<a class="col-xs-3 pull-left" href="#"> <img src="images/common/logo.png" alt="Logo>" <img src="images/common/logo_small.png" alt="Logo>" </a>
If this looks weird, don't worry as I'll show you how to use it.
The class "col-xs-3" will take only the first three columns if the screen size is small.
After the image, we'll have our search bar for which we'll use a class called "col-xs-9". In general, bootstrap works on a grid that has 12 columns, so if we use the three columns for logo, the remaining nine columns will go for our search box and avatar. We'll also use the "pull-left" class for this <div> tag. We'll nest another <div> inside this that'll use six columns, and inside of it again, we'll have a <span> tag which will have classes "icon" and "icon-search". Within the <span> tag, let's have our <input> tag for the text box.
<div class="col-xs-9 pull-left"> <div class="col-xs-6 pull-left"> <span class="icon icon-search"></span> <input type="text" placeholder="Search..."/> </div> </div>
The next thing we're going to have on our header is the avatar. For this, we'll have a <div> tag, with the "col-xs-3" class. If you see, we have three columns for our logo, six for our search box, and the last three for our avatar, for a total of 12 columns. The other classes that we'll use our "avatar" and "pull-right". As you may have guessed, we have to define the style for "avatar" class while the other one comes from bootstrap itself. Inside this <div>, we'll have a link, another <div> of class "mask", and another image.
<div class="col-xs-3 avatar pull-right"> <a href="#"> <div class="mask"></div> <img src="images/common/guest_image.png" alt="Avatar"> </a> </div>
Let's see how it all looks on the browser.
A couple more things here. First, we'll have a text "Welcome Guest", and underneath this, we'll have a couple of links for log in and register.
<div class="col-xs-3 avatar pull-right"> <a href="#"> <div class="mask"></div> <img src="images/common/guest_image.png" alt="Avatar"> </a> <strong>Welcome Guest!</strong> <a href="#">Login</a> or <a href="#">Register</a> </div>
Lastly, we're going to use something called a clearfix div. If you see, we have different styles for our elements, and if you don't want them to carry over, we have to use this <div>. Go up two levels, create a <div> tag, and link it to a bootstrap class called "clearfix".
The complete code for our header is:
<div id="header"> <div class="container"> <div class="row"> <div class="grey"></div> <a class="col-xs-3 pull-left" href="#"> <img src="images/common/logo.png" alt="Logo>" <img src="images/common/logo_small.png" alt="Logo>" </a> <div class="col-xs-9 pull-left"> <div class="col-xs-6 pull-left"> <span class="icon icon-search"></span> <input type="text" placeholder="Search..."/> </div> <div class="col-xs-3 avatar pull-right"> <a href="#"> <div class="mask"></div> <img src="images/common/guest_image.png" alt="Avatar"> </a> <strong>Welcome Guest!</strong> <a href="#">Login</a> or <a href="#">Register</a> </div> </div> </div> <div clear="clearfix"></div> </div> </div>
I think that's about it for our header. The output looks like this:
If you see, we haven't define any style, and yet we have a neat looking header. Though it needs some more polishing, we still have something out of the box jut by using bootstrap.
Next, we'll go out of our <div> tag, and create another <div> for our main content. We'll have an ID called "main-menu" and a class called "small". Inside this, let's create two more nested <div> tags
<div id="main-menu" class="small"> <div class="container"> <div class="row"> </div> </div> </div>
We'll continue in the next video.