Build An HTML5 Template With Bootstrap & SASS

Build An HTML5 Template With Bootstrap and SASS – Part 4

all right so welcome to part three I believe of the bootstrap sass template series right now we have all of our base HTML done for our inner pages we have

our column for main content and sidebar so now we're going to go in and add the content for those as well as if we look at the the main site we have this area for our team members we have a

testimonial so we're going to add that stuff as well all right so let's go to our boat HTML file and basically what we have is the navigation the header and navigation then we have a section for

the top in ER which is this area here with the search bar then we have another section for the slogan or whatever alright so now we need to put this content in alright so first we have the

carousel which is actually pretty easy to to implement all right if we go to the get bootstrap com and go to JavaScript and over here you can see carousel click

on that alright so basically it gives you the code for it so we'll copy that and then go to our boat page and we want to be in the section main that we created and we want to be in the eighth

column dev okay I'm just going to paste all that in indent it alright so basically what we need to add to this is our items okay so we have the first item we have an image with the source going

to nothing so right here we want to put our image name and forget what it is is it okay so we have slide 1 slide 2 and slide 3 okay so this is going to be image / slide 1

and I'm just gonna I'm just going to copy this whole item we'll do that two more times you just want to get rid of the active class only the first one should have that and then

we'll just change this to slide two and this to slide three save let's check it out all right so it's working good we see this three dots down here we're going to

get rid of those which is you know what we can get rid of the whole carousel caption div because we're not using captions make it even simpler you can use captions if you want

Oh get rid of this all right good so next what do we have we have our just basic text we have a page header and then a couple paragraphs so let's do that you want to go right

under the carousel div which ends right here and let's see what are we going to do each two this is a boat and I'm just going to

grab a couple paragraphs real quick okay so I just have two paragraphs save okay so there's our text now what I want to do is the sidebar

which has a list and some accordions or collapse modules okay so let's do that we'll go under the powerbomb actually want to go into this column md4 and we want to use that feature list that we

used on the home page so if we go to index and where is it right here this unordered list feature I'm just going to grab that okay actually we need a heading 2 so H

we wanted H to whoops h2 class page header okay then under the list we're going to have our accordions so let's go to the

bootstrap website and same page JavaScript you want to click on collapse and we're going to copy this oops okay and you want to go right under the

unordered list piece that in and I'm just going to change the titles of these okay this first one will say who we are this one will say what we do

and this one why choose us and just gonna um I'm going to emphasize the what the who what and why okay so we want to put a span with the class whoops

a class of eeehm – primary okay copy that put that around what and why we've got one two

three all right yeah that's good let's check that out all right I want to I want to remove some of this text not have so much in each slide

all right it's a little too much text gone but that's fine all right so next let's see we get that all right so next

we want to do the meet our team section so we want to go under the last section which is here and let me just grab this

all right so four columns we're going to want four columns which are I'm sorry for dibs which I have three columns each so that's one two three four and then in each one will have a block so block

it's going to have a block light class also block center and block image all right and then we'll have the headshot image so C is going to be image / headshot one dot jpg and then an h3

tag Jane Doe and then just a paragraph with some sample text all right so we can copy this and actually

we're going to rotate from block block light to I guess just block alright so let's take away lock light for the second and the fourth all right so that will be the team next

we have a testimonial section and this is going to be this is going to be a 12 column div 12 and it's going to be a blockquote blockquote styles are going to go into

our typography s CSS file so this is going to have a class of block quote reverse now block won't reverse if we go to the final page here you can see that this border on the right here that's not

the default the default is to have that on this side but I want the text to start over here and have the board over here so that's going to have a class of block quote reverse and I believe that's

a bootstrap core class actually we also want to have the class just block quote all right and then inside there I'm just going to paste in this quote okay basically it's an h1 and then we have an

emphasis tag around Nelson Jackson and that's it and that's actually that's it for the about page okay so let's check it out all right so it looks horrible but it's

looking exactly how it's supposed to all right these images here actually we got to change the name of the image but they're at full size right now but when we get

into the CSS we're going to make them the correct size but for now let's just changed headshot to it shot three and four all right so now we want to move on to the

services page and let's take a look at the final page okay so same thing we have a main area we have a sidebar in the sidebar we're going to have a tab module and then a

quick form and then we'll have this section here with the icons and that's that's it that's all it's going to be different from the about page alright so go to services and go down

on this page we don't have a slogan but I actually want to put it there so I'm going to copy it from a boat okay go right above section main oh actually we do have it there

nevermind scratch that alright so section main we're going to have some text and these videos are getting kind of long so I'm going to do some copying and pasting okay so in the

eighth column div I'm going to paste in I'll go over what I pasted it in we have a heading alright then we have two paragraphs and then a line couple line breaks and then we're starting a

accordion okay so this is basically the same code that's in the about page for the accordion let me just indent this all right so basically we're just having the title service one service – all

right so save that take a look all right so it looks good so the sidebar let's see what we have our tab module so I'll go to the bootstrap site and click on tab

and basically they don't give you the code with the content here so if we do a actually going to use Chrome tools by pressing f12 and then use the this magnifying glass so I can see the code

and I want to grab who I want here this div class BS example tabs and then I'm going to right-click and then copy as HTML

and go back into our sidebar which is the call for dev paste that in okay looks a little messy but what are you gonna do okay so let's check that out

all right so we don't need this drop down to happen so I'm going to let see me of Li Li I'm going to copy this profile list item and oh and just paste it over this

this Li with the class of drop-down and then I'll just change this actually going to change all these so this will be services I'm sorry support

change this to a boat and change this to services now I want to change the class here and get rid of this these BS tags classes and we want this to be tab on a

class of tab and also tab primary because it's going to be that blue color all right in this class active on the list item for services actually want to put that

on the about the Middletown okay let's see this fix that link all right so that's good for now next in the sidebar we have our quick quote form which I'm going to paste in it's quite a

bit of HTML and this will go right under the the tab div here which ends right here I'm going to paste this in basically we have a div with the class of block block

primary head okay so that style is going to look like this so it'll have a heading alright we can put an icon there and we don't want to have any padding in this in the block itself we want the

padding to go in here in the content all right so that's why we have an additional class here of no pad alright so we have an h3 with the icon pencil icon then we have a div called block

content okay which surrounds the form and in the form we have a name phone number email message and button ok the button has a class of button primary all right so that's the form so next

we're going to have the what we do area and we can tell right away that it's going to be a section primary because it has the blue background all right so we want to put that under the what section

is this under the section main so actually let me just copy our little snip it wait a minute all right so section is going to have

class section primary under the container I'm going to put a page heading all right and this will say what we do all right so we have a row and then

we're going to have four gonna have three for calling dibs and then inside each one we're gonna have a block block and then also give it a class of

block icon and that should be good okay inside there we're going to have a div the class of icon and then we want an icon okay this one is going to be F a F a home and then the size will be F a

three okay so that's the icon' div underneath that I'll have another div with the class of icon content and we'll have an h3 alarm of some each three

in that a paragraph now I'm just going to copy the block div and we want it here here and we actually want another row of them as well if you look at here we have

two rows of them of these icon so what I'm going to do is copy the entire row and then paste it underneath here okay and it's not going to look very good yet

all right so that's the services page we still have to do the blog in the contact page so we'll do those in the next video

In this mini-series we will build a complete HTML5 Bootstrap template with SASS. It is a bit long but that is because it is from scratch and typed out line by line.

—————————————————————————————

Project Files – https://github.com/bradtraversy/skyapp_bootstrap

For video courses like this check out – http://codeskillet.com