FREELessons: 12Length: 53 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.4 Filterable Portfolio Structure

Let’s liven up our homepage with a nice filterable portfolio courtesy of Bootstrap’s pill navigation component and its grid system.

Related Links

3.4 Filterable Portfolio Structure

Welcome back to Power up Your Portfolio with Bootstrap. I'm your instructor, Cory Simmons. In our last lesson we looked how to add jumbotrons to our site and override them to look and feel how we wanted. In this lesson we'll begin work on our filterable portfolio, and really make use of Bootstrap's grid system. Let's start with the mark up so we have something to style. First, create a new container fluid div, and we'll assign a class of filterable-portfolio to it to help with targeting our styles that are going to be unique for this area. Inside of that we'll add a row div, inside of that row div we'll add a col-md, m d-12 div. Inside of that col-md-12 div, we'll add a pill navigation component. So head over to, click on Components > Navs > Pills. Again, I suggest you just copy and paste directly from Bootstrap's documentation, so let's do that. Let's change the name of these links to All, Animation, Design, and add a few more in there that are Photography and Web, since these are all pretty common groups that someone with an online portfolio might have. We'll assign the active class to the all pill, since we want to be showing all of our work to begin with. Let's also create a label for this navigation by creating a new list item and giving it the value filter by and we'll assign a class of portfolio-title to this element so we can apply some custom styling to it specifically. Let's style up this pil navigation before moving onto the actual portfolio items. Do that, let's start with our label. Let's give our label a padding of 10 pixels on the top and bottom and 15 pixels on the right side, so it aligns with the buttons next to it nicely. Let's also make it bold so it stands out a bit as a label, rather than another clickable link. Next, let's do some overriding, and set all of the pill navigations, throughout our site, to have a dark background and light font color on our active pills, by doing what we do best, inspecting Bootstrap components. Finding the relevant bit of CSS, copying the selector over to our style sheet and overriding that with our custom styles. In this case we'll set the background to our active class, of our active class to that darker off black color. And the font color to our off white color. Now let's set the anchors in our nav-pills to that off white color as well. This one's easy enough. It's just nav-pills a, color f5f5f5. But what happens if we hover over those? Now they have a background. Well, let's open Inspector on one of those anchors, and then click the little dotted box with a cursor in it, and apply hover to the element, and we can find the selector we'll need to override. [BLANK_AUDIO] Now let's add some margin bottom to our pills of one rem, and begin working on the next section, our portfolio items. So in our markup under our pills, let's create a new row and give it the class, portfolio items. Again, for now, just so we can customly style elements within this section. Each of these will just be a figure, with the classes of portfolio item, and col-sm-4 attached to them. The sm and col at s-sm-4 simply means we want this to be laid out in three columns, even on smaller devices, like tablets. A bootshop has defaults in there that make it so when you go to extra small devices, like phones, it'll display them in a one column layout, which is what we want. Inside of those figures, we'll make a link, and inside of those links, we'll put an image. For now, we can just use a largish placeholder image from a placeholder service like But now our image is too big for its column. To fix this, we'll use a bootstrap helper class called image-responsive on our image. This will make sure it's contained to whatever element it is, it's inside, by setting a max width of 100% to it. Now I can duplicate this figure several times, and each time, change our placeholder image a little bit so we have different images for each portfolio item. Now in our CSS let's add a margin bottom of one rim to our portfolio item class to push those images off of each other a little. Now let's make our imagery a bit more stylish for nicer browsers, by using a CSS filters to make it a grayscale. To do this, we say, portfolio-item, image, webkit filter, grayscale 100%, and filter grayscale 100%. And let's add a border radius to that same selector to round out our images a bit. And let's lighten up these images a bit when someone hovers over them. Portfolio-item:hover, image, webkit filter, grayscale 50%. Filter, grayscale 50%. Finally, let's push additional side content off of the bottom of the portfolio, by adding a margin bottom of three rims, to our filterable portfolio container. Refresh and contract, and voila, our filterable portfolio structure is done. In this lesson, we learned to make use and override another Bootstrap component, film navigation. And got a bit more familiar with Bootstrap's grid system. In the next lesson, we'll add some Live to this portfolio by introducing a really JavaScript plugin called isotope.

Back to the top