October 15, 2019
Bootstrap one page scrolling site part 16 – Twitter Bootstrap

Bootstrap one page scrolling site part 16 – Twitter Bootstrap


hi guys this is Jamie from http://www.system22.net and
http://web-design-and-tech-tips.com welcome to another in our series of one-page scrolling
bootstrap website build we’re gonna continue where we left off there’s not
much left to do now we’re gonna add the footer
where we left off last time we added this Google map here the live Google map
so what we want to do is just below there we’ll put a little footer with our
logo in it and our little copyright notice so let’s open our brackets
software and once again for those of you that
haven’t been following this brackets is a free this text editor is a free text
editor here and you can download it from our link below this video so if we
scroll down to where we left off which is where it probably was just now there
we are let’s just add a footer it’s pretty easy
so we call it footer and we’ll give it a class of footer funny family enough and
then what we’re gonna do we want a left and a right section the left section is
gonna have our little logo in it and the right section is gonna have just a
little copyright notice in it so let’s do another div of the class of row
because we all want it to all be on the same row just give this class of row and
then in between here is where we want to put our two little columns and like we
said before if I go back to the site Oh page area is made up of 12 sections now
I want a section on the left-hand side with a logo our logo right here we can
just use the one we’ve got there and a logo on the right section with our
copyright as it’s a footer it’s gonna be full width so it’s gonna spread the
whole full full width now if it’s 12 sections I can either split it into 2 6
and 6 and if I send her a line it our logo will appear here and our copyright
appear here but I think 6 and 6 is overdoing it I think what I want is I’ll
have one column of 4 and then an offset of nothing for 4 and then another column
on the right of 4 and it’s really easy to do so that’s what we’re gonna do go
back to our brackets let’s create our first one which is just
a div of class of column for mid before so it will display on as a four section
column on all devices pretty much and then we want another one which is going
to be beside it but we want to push it over an extra four and to do that we
have to give it an offset class I’ll show you exactly what I mean here
so let’s create another deal and then we’ll give it a class for a change and
this one we want it column mid four I could have copied this over it’s not a
bad idea to I do like making the workload easy by copying whenever I can
but it’s a good idea to type it out sometimes because it helps you to
remember okay and this one we won’t come it’s a medium column and we want it to
be offset by four so we simply put offset for in there this way we’ll have
one column of four then there’ll be our blank space of offset four and then
we’ll have another column of four on the right hand side in theory no it’ll work
fine bootstrap four is actually out now and a beta testing version they’ve got
some new classes there which are great I shall be doing another course on that ok
let’s get our first one organized here now this is where we want to put our
logo so let’s just and I want to kind of Center it in the
middle of this little box here our logo so I’m going to give it a class of text
center which will actually Center it for us as you already know from previous
videos okay close that up now all I’m gonna do is here’s a bit of cheating for
a change I’m just gonna copy our logo that we’ve used in the top up here simply copy that bring it down I’m gonna
get a get rid of a couple of those classes that it’s got here and put it in
where we just left off there okay we don’t need that I don’t need any
class on there I’m just gonna leave it as it is and just leave the anchor tag
href which will drag it back to the top there
it’ll just shoot back instantly to the top there
there’s our logo that’s fine now for our next one again I’m gonna I’ll make sure
you don’t copy this there’s me telling you to type it all out so you remember
it okay I want it to be text Center and of course we’ve got to close that divert
and in this div we just want a bit of paragraph text which is Pete as you well
know then we’re going to write copyright and
we want like oh I’ve got the caps lock on now we want the copyright symbol I’ll
just redo this correctly and then we want the copyright symbol which is a
little short code and it’s the and ampersand symbol and then copy a little
semicolon after it and then the name of our site I’ll just quote one page
obviously you call yours whatever your site’s called and then 2017 to present
I’ll cover it I’ll believe 2017 is almost over okay so I think we’ve got
everything we need in there now may have to give this a class because I’ve got a
feeling we’ll want to add a bit of padding to this because the logos so
much larger than this text here so let’s go and have go ahead and save ctrl s and
back to our site and take a look see what we’ve got here at the moment we’ve
got nothing so it’s refresh and there’s our footer well it’s almost there it’s
kind of what we wanted to click on that and go back to the top just make sure
that works yep take you straight back to the top but our copyright I don’t want
that out there I want to kind of down in the middle and did you see what I’m
talking about about offsetting that column there and you could do with any
size column so we’ve got a four section here because it’s a footer like I say
it’s not it in container it’s full width we’ve got four there then we’ve got a
blank four and then we got another four over here and we’ve got these both
centered in the middle of it so we just need to add a bit of padding now let’s
sort of see what we want to do but a CSS let’s inspect this and we want to go up
to our footer let’s just roll this up so we can see it there’s the footer let’s
say a bit of padding top and bottom let’s give it 20 pics it’ll I’ll just do
one attribute that way it’ll shoot twenty pics each way on all four sides
so let’s do this yeah that’s fine
and then we’re gonna want to drop that down but it’s just add this little bit
of padding here first so I’ll just copy that and back to our brackets this time
we want to open our CSS growing nav and for those that haven’t been following
along with this series we’ve just got all our bootstrap files in one folder
here there’s our index.html file that we’ve been working on here and our CSS
is the scrolling nav in our CSS folder here and all you need to do is right
click and open it with brackets and let’s go down to where we left off well
we’re right there already which is good and we’ll just give it a section title
or footer now we want to put dr. flutter because
that’s what we’s working on that class you can close curly brackets and just
paste in that bit of padding that we had there well I’m also gonna do is I’m
gonna just the background itself is white but I’m gonna make sure it stays
white by just giving it a background class of white or F F F or F F F F F F
for real but you only need to put three if it’s six all the same it’s just
background and then the color which is FFF you won’t see any changes there
because it’s already actually white but that’s just gonna confirm that it stays
that way then this copyright let’s just say that control s then this little
copyright gizmo right here we’re gonna want to drop that down so it’s centered
in line with this so let’s just select it go down to it right here it’s gonna
be inside our second column there so let’s give this a class so we can
actually just work on it rather than the whole section here so if we go back to
our HTML in our bracket software and here’s our little class with our
copyright in it we either put it there but I think I’ll put it here sure I
don’t want a capital P there most I think I have my caps lock stuck mama
it’s working fine but really won’t it be lowercase like that control save right
let’s give this an extra class we’ll call it copy you can just give it a
space after that last attribute there I’ll call it copy for one of anything
else I don’t think we’ve used that before now let’s just say that control s
now if we go to our scrolling nav we can add that class there let’s see what we
want to roll it by just refresh this now it’s refreshed should see that little
copy and there we are there’s that attribute copy so I want to select that
little section now let’s give it some padding at the top say 25 pics or pixels
okay that’s yeah I think that’s about right actually 130 look like think yeah I think 30s actually more
central there yep I’m happy with 30 so let’s just do that
just copy this control see back to our bracket software and we called that
class copy so it’s dot copy and open and close curly brackets and we can just
paste that in there just take it back shift tab just take it back get it in
line with the others we’ll save that back to the site do a refresh and it
should all stay the same its refresh there we have it and there’s our footer
that’ll work very simple very easy to do so we just want to add almost done here
in the next video I’ll show you how to create a PHP form and upload this site
to the server so it actually all sends and is all live but I’ll just finish
this video off by just adding a couple of sections to our menu here so I think
we’ve got the about services and contact we want to add the wedding section and
the portrait section so if we go to our HTML for a change
index.html it’s make sure we’ve got the right attributes going on so that
there’s a contact section we know that it’s working it’s our idea of contact
it’s our partners section we don’t wanna link to that I don’t think here’s our
wedding section it’s got the ID of wedding that’s fine
and the portrait section got the idea of portrait singular okay that’s all I
needed to know let’s add those to our menu here’s our menu as it exists
moment I think I want portraits and then weddings no I don’t I think I want about
services then portraits then weddings so all we need to do is just we’ll just
copy that services one right there control C drop-down one and we’ll call
this portraits and it was portrait singular the ID I believe it wasn’t it’s
not gonna work okay and we’ll copy it one more time
drop it down this one was weddings and the class or the idea I should say was
weddings also let’s save that see what it looks like and see if it actually
works as long as I’ve got those IDs correct it should work fine and we’re
all saved let’s go back to the site do a quick refresh there we go there’s our
new menu items that skip to the top of the page there’s our new menu items
portraits weddings contacts so let’s try it about services portraits weddings ello weddings is not working
contact let’s see why our wedding section is not working
back to our HTML it’s about weddings right let’s make sure that that is the
correct ID for it portraits weddings wedding singular that’s a problem like I
was saying before if it’s not spoke correctly it will work so let’s take the
S off the end there say back to the site to quick refresh take it to the top see
if our wedding is now works looks like it’s gonna work there we go there we go job done so that’s gonna do
it I’m and of course if you wanted to link to an external site or something
like that can add a different class I’ll just add one to show you quickly here don’t need the page scroll if we’re
doing it but I’ll just leave it there for expediency what I’ll do is I just
call this external and all you need to do is put your URL of the external site let me just grab one here it’s one of my
sites in here between the two little inverted commas there making sure not to
clip them off get rid of that class there we just don’t need it and another
little tip if you want it to open in a new page this will just go straight to
there from your existing site well I’ll just show you control s back to the site there’s that new link we did what I’m
going to do is I’ll click on it and it’ll take us on the same page to the
new link external link there we go there’s my site let’s go back now most
of the time you don’t want people to leave your website rather have it open
in a new tab here so to do that go back to the brackets it’s really easy after
hit after you your your link there put a little gap in there but target where
it’s even prompted as target equals underscore blank C underscore blank and
that will open it in a new page save that back to the site fresh go to the top and this time it’ll
open it in a new tab up here there we go so it’s opened it in a new tab and we’ve
still got our regular site next door to it here which is exactly what we want so
that’s pretty much it for this site like I said we’ll add a PHP form or we’ll
link a PHP send mail form to this form and upload the whole site to an online
server in the next video and get it all working Matt will be done so once again
this has been Jamie from the http://www.system22.net and http://web-design-and-tech-tips.com if you’ve enjoyed
this video please subscribe to our Channel
we also offer web design courses there are some great deals in the links below
this course thanks for watching have a great day

1 thought on “Bootstrap one page scrolling site part 16 – Twitter Bootstrap

  1. Thank you so much Jamie for wonderful videos,,,,,you deserve much more than this….worth investing time on your channel to learn a lot lotss more….

Leave a Reply

Your email address will not be published. Required fields are marked *