Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Bootstrap 3: Adding Interactivity to Your Site

via LinkedIn Learning

Go to class Write review

Details

Go to class

Provider

LinkedIn Learning
Pricing

Free Trial Available
Languages

English
Certificate

Certificate Available
Duration & workload

1-2 hours
Sessions

On-Demand

Found in

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

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.

Syllabus

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

Taught by

Jen Kramer

Reviews

Start your review of Bootstrap 3: Adding Interactivity to Your Site