Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:18Length:1.9 hours
Bootstrap3
  • Overview
  • Transcript

4.7 Collapse and Carousels

In the final lesson of the theory part of this course, I'll introduce you to the collapse and carousel components.

4.7 Collapse and Carousels

Hey, welcome to the final lesson of the theory chapter, where I'll introduce you to the collapse and the carousel element. First one is the collapse, and I'm gonna build a small accordion. An accordion, if you're not familiar with the term, is a collection of elements that have a heading, and a body, a content, right? And by default, you only expand the very first element, while the others are collapsed. And as you click on each heading, that content will expand as well. So I'm just gonna show you how how it's done. Now Bootstrap, manages to do this with a panel group. So, the first thing you have to do, is create a div with a class of panel-group. And give it an id, for example, of accordion. Inside, we're gonna create a div class panel, and panel-default, to grab the default styling. And inside, I'm gonna do a panel-heading, plus a panel-collapse. Now, the panel -heading, will just have the title, on which you click and you expand the content below it. So, for the title I'm gonna do an h4, with a class of panel-title. And of course you can use any type of heading, as long as it has this particular class, and this will include an anchor tag. And the anchor tag will go to, for example let's do content-1. That's gonna say, collapse one for text, and also, on the anchor tag, you gotta set data-toggle equals collapse, and data-parent equals the ID of our accordion, and that's gonna be accordion. So, the same ID that I used here. So let me just clean this up for a little bit, and on the panel-collapse, I'm gonna add another class of collapse in, since it, it's the first element. So it needs to be expanded at first. And inside, I'm gonna do a div with a class of panel body. And this will just have a paragraph with some text inside it. Now, in order for this to work, I need to set an ID on the panel-collapse, that equals to content-1. So, this link points to this div right here. Okay, once you do that, you need to copy the panel, and paste it depending how many elements you need. Of course, make sure you update the IDs, and remove the in class on there too. The in class should only be present in the very first element. So now if we refresh, we have three panels. And if we click on each one, you'll notice the collapse effect. And that's how you use the collapse plug in. Really simple. Now, let's move on to the carousel. And the carousel is better known as a slider. It's one of those controls that take several images or several blocks of HTML. And just change them periodically or offer controls so you can change them by hand. So let me show you how you create one of those. Right here I'm gonna add a hr, and I'm gonna start with a div with a class of carousel, and slide, and then data-ride equals carousel. And let's also give it an ID of let's say carousel-example. Okay. Now, inside you have a few elements. First one is indicators. You can add some round indicators at the very bottom of the carousel, telling you which slide is active. After that, you have a carousel-inner which will hold your slides. And finally, you have some controls for left and right, or previous and next. So let's start with the indicators first. You need to create an OL ordered list, with a class of carousel indicators. And then, you need to have a list item, that has the data target attribute, will point to the idea of our carousel, which is carousel-example. And then, you would have data, slide two, equals zero. Meaning which slide should that indicator go to, and let's do this times three. Now I'm gonna change things here, go to one, go to two. And also, since the, this is the first one, I'm gonna add a class of active. Next, we need to add the actual slides. So, we're gonna use a div with a class of carousel inner. And inside, each slide will be placed inside a div with a class of item. Now, inside this item, you can place pretty much anything, but, I'll show you how to use the carousel with some images. So we have image, source, I have some test images loaded. It's called slide-1.jpg. The old is gonna be slider. Okay, copy this, space it three times, and change the image sources to reflect the new images. All right, so let's refresh, and see what we got. Nothing yet, because I think my images are called slider, not slide, and also, add the class of active to the very first item. So the, the first image is shown. All right, so there it is. The carousel. If I click on these indicators, it changes. [BLANK_AUDIO] And now, all we gotta do is add left and right controls. So, after the div with a class of carousel-inner, I'm gonna say a, with a class of left, carousel-control. The href will go to my carousel-example ID. And then I'm gonna say data-slide equals previous. And inside, I'm just gonna put an icon. So span with a class of glyphicons. Glyphicons, glyphicons, actually. Chevron-left. Okay? And there it is. And let's do the same for right. All we're gonna change here is the class of right, and data-slide next, and this also to right. And there we go. And also, the href should have a hashtag in front. Refresh. And there we go. We now have a functional slider. Now, if you want some captions above your images, you can add them via the carousel-caption div. So below your image, you would say, div with a class of carousel-caption, and inside, you can add like a heading or a paragraph, let's add a heading three, and a paragraph. This is a caption, and some simple text. I'm just gonna copy this, and paste it here. And here. Refresh. And there we go. And I use the caption. And that's it basically. Now, I only showed you a few components from this framework. Bootstrap has a lot more, and you can check out their website too, to see all of them. But the exercise part is up next, and I'll show you some more components over there. And also, you'll see how they apply to a complete page. So, thank you for watching so far, I'll see you in the next lesson.

Back to the top