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

LinkedIn Learning

Bootstrap 3: Adding Interactivity to Your Site

via LinkedIn Learning

Overview

Prepare for a new career with $100 off Coursera Plus
Gear up for jobs in high-demand fields: data analytics, digital marketing, and more.
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

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.