Bootstrap 3: Adding Interactivity to Your Site

with Jen Kramer
please wait ...
Bootstrap 3: Adding Interactivity to Your Site
Video duration: 0s 1h 55m Beginner


Twitter's Bootstrap is one of the most popular HTML/CSS/JavaScript frameworks for creating responsive websites. Here, Jen Kramer shows you how to add interactive elements like a thumbnail gallery, image carousel, or contact form using Bootstrap and a simple text editor. Plus, learn to style these features with CSS and add helpful JavaScript-based pop-ups and tooltips that enhance their usability. Along the way, you can test your Bootstrap prowess with a series of challenge videos.

Need help getting Bootstrap up and running? Check out Up and Running with Bootstrap 3.

Topics include:
  • 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


- [Voiceover] Hi, I'm Jen Kramer. Welcome to Bootstrap 3: Adding Interactivity to Your Site. This course builds on the Up and Running with Bootstrap 3 course, located on First, we'll make an interesting thumbnail grid, linking our thumbnails to a modal window, which will display more detailed information. Next, we'll build an image carousel with all the bells and whistles, including links, captions, a position indicator, and navigation.

Finally, we'll take a look at forms in Bootstrap. I'll show you how to style a form with Bootstrap's classes, and we'll also enhance our form with JavaScript-based tool tips, and the collapse feature. So if you're ready, let's get started, with Bootstrap 3: Adding Interactivity to Your Site.

please wait ...