April 10, 2020
Bootstrap 4 Add a Portfolio Filter

Bootstrap 4 Add a Portfolio Filter


hi guys and welcome to this bootstrap 4
video this is Jamie from system 22 and web designer tech tips calm
well somebody asked me if I could demonstrate how to add a filterable
portfolio to a bootstrap 4 site um it’s pretty easy
we can either write some JavaScript or I’m gonna do the easy way I’m gonna use
some pre-written and demonstrate how to do it so
let’s open a brackets text editor this is a free text editor I’ll put the
download link below here and I’m gonna open a new bootstrap template and it’s
created a brand new bootstrap template for me which is just a generic bootstrap
for template now I got this happening really easy because I was using an
extension and again all these extensions with
brackets are absolutely free and there it is bootstrap to start a template so
if you go down a file extension manager go to available if you don’t have this
already and type in bootstrap start a template there it is right there
mine’s already installed but you can just hit that install button and it’ll
then install it for you and again all of the plugins that I use are absolutely
free and I’ve got a notification there that I’ve got an update or mine looks
like so I’m gonna go ahead and update that okay so I don’t need it right now anyway
but next time I reload it will have it for me okay
and like I say brackets is free and all these
extensions that I use here are free so let’s just save our template so I’m
going to go save as I created a little folder for my project
just called filter you’ve got to save it as a dot HTML I’m
gonna call mine filter dot HTML so it knows what type of file that it is and
I’m gonna save that there we go now if I go to that folder here’s the file that we’ve just created
if I double-click on it it’ll let open it in your default browser now I’m using
Chrome you open it on my other monitor over here I’m using Chrome for this
demonstration it’s great and the reason I use it mostly for its developer tools
if you hit the f12 key it’ll show you the developer tools and I edit my HTML
and my CSS in here Freeza views not sure I’ll be using that today but that’s why
I use Chrome alright so here’s that basic template not much – it’s just got
a little nav bar at the top and a bit of text there
now what we’re gonna do to make things really easy in this video we’re gonna go
to a site called boot snip and again I’ll put this link below the video for
anybody who wants to use it and they’ve created this nice little foo filterable
portfolio gallery first here so we’re not gonna have to jump right in
eachother script in fact we’re not gonna have to write any HTML or CSS either
because they provide that as well but of course you’re gonna want to customize
the CSS and probably some bit of HTML for your images for your own site so
we’re in the preview mode at the moment if we go to the HTML
here it is just looking to see what the error was
that but let’s take from the top of this container
all the way down to above that section there
you so I didn’t see an opening section tag
at the top if we go back to our brackets let’s go down to below where we were
here or below where they’ve left off here and just paste that in there we might want to edit this we’ll see
what happens in a minute and if we go back to the site now let’s go to the CSS
this is their styling we probably want ours we’ll probably want to customize it
to what we want here but let’s take it from the top of the gallery all the way
down to the bottom I think you probably achieve the same by hitting ctrl + a to
select all then ctrl + C to copy now in our boots bootstrap template that we’ve
got here we’ve got inline CSS Yuji I’d have an external stylesheet that this is
only one page I’ll leave it as on page like this now I’ve just pasted that CSS
in there so it’s within our style tags at the top of the page there I’m just
gonna tidy this up a bit and select it and hit my tab key so it’s
in line with the rest of the CSS there yeah I’m gonna say that by hitting ctrl
s and you’ll notice that little dr. will disappear up there there we go so I’ve
saved that anytime you see that little dot up there it means you’ve got unsaved
changes okay so we’ve got the images they’re
drawing them in from fake image site here we’ll put some custom ones in in a
minute there’s our little picker now we need to add the JavaScript so if we go
back go to the jst again control a once you’ve clicked
within this box control a control C to copy now we can
either put this in an external file and pull it in or put it in some script tags
at the base of our site here I’m gonna use this script tag option so I’ve
copied that role down to the bottom and after our last script here I’m going to
open and close some script tags that’s pointy black pointy brackets and
then just close it and it’ll give me the closing tags there give it a bit of
space and just paste that code in between there and again I’m going to tidy this up a
little bit selecting and just tabbing it across and
I want to tab the whole thing just a little bit there we go
so we now got there JavaScript in there which is calling the functions for the
data filter now let’s just save our sight control
yes let’s see it’s done other thing we should now when i refresh have those
little images on here and a little filter here okay well there we go it’s got the
images I don’t quite like the way it’s displaying there but it seems to be
actually working yeah it’s working let’s just sort out the display issues here I
think I’ll put this on a separate row and have these on a row look at our HTML
here okay so they’ve got a row up there
where’s the closing depth of that row see well let’s give that a closing deal
below here you but a house won’t really shift that
along a bit okay so we’ve got one row here
let’s put this on another row so I’m gonna copy this drop-down one paste that
in there yeah pull this across just tab selecting tab one more and that
it’s just a line break there I don’t need that I’m gonna put the row closing
dev right here I can say just doing a bit of house work here all right images have encase this in
another row I’m pretty sure the closing div for this row will be down the bottom
anyway for the original one they had at the top there so if I select the top one
should show us the bottom one that’s great and I’ve got no red flags so it
looks like the HTML is good there let’s just say that control s and back
to our site and refresh this should have its own row now that will it has anyway
and these images should be down on their own little rows below there we go
that’s a bit more like it let’s just Center this
and as it’s a row I can use justify which is a kind of flexbox class that
they’ve added to bootstrap for save ctrl s back to the site let’s refresh that
those all now and they’re all make sure this is working
yeah what seems to be working absolutely fine okay
so there’s the bare bones of it is not very interesting so of course you’re
gonna want to add your own images so I’m gonna go in and I’m gonna add some
images let me just pause this and I’ll grab some images okay I’ve made 12 images and I made in
365 by 365 it doesn’t matter too much you can make them any size you want but
I have done that and what I’ve done is I’ve created a folder within our folder
we were using there’s our HTML document here’s our images and inside
I’ve just got twelve images so I’m gonna replace I’ve called a one through twelve
and they’re JPEGs I’m gonna replace that in the HTML here so again I’ll do the
first one and then I’ll just pause so here’s it his images here you can see
and all I need to do select it right name of my folder found it already click
on it number one and it’s put my first image
in there I’m gonna do exactly the same throughout these IMG image too so I’m
gonna pause and just get the rest of these done no point you sitting there
watching me do it okay so I’ve changed those to all my
images now so save that control s back to the site now when i refresh my images should be
in here so those placeholders there oh there we go and okay so we’ve got
this color picker here but it’s talking about pipes and sprinklers and it
doesn’t really mean anything what I’ve got going on here so let’s see what
categories I got here I guess we’ll call we’ve got places we’ve got food we’ve
got technology or take heck places those and other so let’s give our own
category so we’ve got tech places food and other so let’s go back to our HTML
and organize it the way we want it so we go up to our picker here which is you we’re looking at this right here wouldn’t I say all we want to leave us
all and let’s make this one tick of course this is the text that appears
within the button itself so let’s
all this tech I’m gonna uncapitalized that it doesn’t matter too much but this
is what we put in our filter section to make it select that okay so we’ve got
tech we’ve got food again this is what appears on the button so I wanna capital
F for this one what do you say food tech places you not irrigation we want I think we’ll
just call this other if they were just random images that I collected there all
right so what do we do now well here’s the actual handles that are gonna grab
these things here so let’s just copy tech let’s have a
look and see what number these are all this image one two three four five six
so we’ll say image one you
and 10 11 12 because there’s 12 or so image 1 10 and 11 are all tech so let’s
look here and all my images I’ve just done on 1 2 3 4 and you can check by
just hovering over if you need to there’s one replace the old attribute
there with my tech and what do we say 10 and 11 says 10 just check 11 yep
those two so I’m gonna replace that all right
and let’s have a look tech we just did food that’s all that we’ve got for
five and 7:45 70s food for five we’re replacing their values again
six seven let’s just check that’s food yep okay next one will be places places were
that one I guess that’s a place don’t know where it is but it’s a place so two
three and we’ll call that a place as well 2 3
and 12 is 2 three and 12 and there’s only one more category left
which is other so anything that’s their old value must be where I need to put
that to get the right one uncapitalized and it occasion that’s their old one
let’s replace it with another other other okay that should do it quick save
ctrl s let’s go back to our site again and refresh hey this time when I select tech it
should be all those computer items yep that’s fine food do all the food items
yet at work fine two places should be the places and other should be the
others so there you have it that’s how to add a
filterable portfolio to your bootstrap foresight of course you can have
multiple categories you can have things in different categories let’s just go
back and do that I’ll use that other again let’s just
randomly add other to a couple of these as well
so we’ve got places on other as well food okay so this all these ones are going to
appear in tech and also in other now so save that so you can have it working
however you want to so now when i refresh and go to other it
should have more than three in there yeah it’s got six all those ones that we
added other two which was that tip one a food one and the place one have now been
added to the other as well and just to demonstrate that further let’s add
places to a couple of our places this is it doesn’t matter so I’ve added three
extras to the places one there save that back to the site now before i refresh if
I go to places this just the three now after I refresh as long as I did save
yes I did say there’s no dot that now when i refresh there should be another
three added to this there we go you places so there’s the original place
place place and we added those three to it so they go this how to add a
filterable portfolio to your bootstrap 4 site and you can have anything and any
category and we’ve updated the labels and updated our own images let’s just go
back to all and you can just keep adding and doing the same thing for as many as
you want so there you have it I hope you found that useful if you have please
like share and subscribe to our channel if you’re interested in web development
take one of our web development courses below we’ve got some huge discounts for
our YouTube subscribers we’ve also got some great free courses down there so
have a look once again this has been jamie from system 22 and web design in
tech tips com thanks for watching have a great day

3 thoughts on “Bootstrap 4 Add a Portfolio Filter

  1. Hey! How are you? Great video, one question how do you set as default other category than "All" i´m having an issue where i want to set as default another tab… is that possible?

  2. Hello! Great video! One thing and question is that the Javascript part is not working? shouldn't it make the items fade in and out?

Leave a Reply

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