Join Jen Kramer for an in-depth discussion in this video Creating the thumbnail gallery grid layout, part of Bootstrap 3: Adding Interactivity to Your Site.
- View Offline
…So, the next thing we're going to do to this particular page is…we're going to convert this bulleted list of thumbnails into an actual thumbnail.…Something that actually looks like a thumbnail.…And we're going to lay it down on a grid so that…these go across the page rather than vertically down the page.…So, if you can happen to Sublime Text, the first thing that we're going…to do is, we're going to scroll down to the area where we'll be working.…This is starting on like 42, that starts the row here.…
And then you'll see, right after that on line 43 is the…unordered list that has all of these thumbnail images inside of them.…So, in order to turn these into…thumbnails, it's actually very easy in Bootstrap.…This is already styled inside of the bootstrap.min.css style sheet.…All you need to do to each li is add a class of thumbnail.…And if you'll go ahead and just highlight that.…And I'm going to copy that, Ctrl or Cmd+C to copy, Ctrll or Cmd+V to paste.…
All the way on down the page here, and all…of these lis, and so now that we have all of…
Need help getting Bootstrap up and running? Check out Bootstrap 3 Essential Training.
- Installing Bootstrap 3, Sublime Text 2, and jQuery
- Planning the thumbnail gallery
- Creating modal windows
- Creating an image carousel
- Linking images and adding captions
- Changing the carousel rotation
- Laying out and styling a contact form