Bootstrap 3: Adding Interactivity to Your Site

Learn how to add rich, interactive features like thumbnail galleries, image carousels, and web forms to your websites with Bootstrap 3.

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 Bootstrap 3 Essential Training.

Introduction

• Welcome
• Using the exercise files
• Using the challenges

1. Setting Up

• Installing Sublime Text 2
• Installing Bootstrap 3
• Installing jQuery

2. Creating a Thumbnail Gallery with Modal Pop-Ups

• Planning the thumbnail gallery
• Creating the thumbnail gallery grid layout
• Creating the modal windows
• Linking the thumbnails to the modal windows
• Enhancing the thumbnail layout with captions
• Challenge: Styling thumbnails and modals
• Solution: Styling thumbnails and modals

3. Creating an Image Carousel for the Homepage

• Planning the image carousel and prepping images
• Creating the image carousel
• Adding carousel navigation
• Adding captions to the carousel
• Adding and styling a carousel position indicator
• Customizing the carousel rotation interval and wrapping style
• Challenge: Create modal windows in your carousel
• Solution: Create modal windows in your carousel

4. Creating Forms

• Including a text input and styling it with a grid
• Creating and formatting radio buttons
• Creating and formatting a selection dropdown menu
• Adding a comments box and tooltips
• Adding a check box and using collapse to enhance usability
• Challenge: Styling the form
• Solution: Styling the form

Conclusion

• Next steps