In this hands-on activity, you'll master:
- Creating responsive Bootstrap navigation bars
- Building dynamic image carousels with controls
- Integrating multiple Bootstrap components seamlessly
- Implementing mobile-responsive design patterns
- Using Bootstrap's JavaScript functionality
Estimated time: 5 minutes
- Open StackBlitz and access the template: Bootstrap Carousel
- Alternative option: Download the source code template from Stackblitz Download Project button if you prefer using your own IDE
:warning: Important: Preserve Template Files
DO NOT DELETE any existing files in the template:
- Package files
- Configuration files
- Any other files you didn't create
ONLY EDIT the HTML, CSS, and JavaScript files as needed.
Total estimated time: 60-90 minutes
Estimated time: 5 minutes
- Click the provided Stackblitz project link above
- Open the preview panel on the right side to see your
index.html
- Verify Bootstrap CSS and JavaScript are properly linked in the
<head> section
tip Setup Check
Look for these lines in your HTML:
- Bootstrap CSS link
- Bootstrap JavaScript bundle
- Proper viewport meta tag for responsive design
Estimated time: 10 minutes
- Open and study the challenge presentation
- Take note of:
- Required navigation bar features
- Carousel specifications
- Integration requirements between components
Estimated time: 20 minutes
- Add a
<nav> element with the .navbar class
- Include a brand/logo area using
.navbar-brand
- Create navigation links using
.navbar-nav and .nav-link
- Add a responsive toggle button with
.navbar-toggler
- Wrap collapsible content in
.navbar-collapse
tip Common Challenge
If your navbar isn't collapsing properly on mobile, check that:
- You have the correct
data-bs-toggle and data-bs-target attributes
- Your collapse div has matching ID
- Bootstrap JavaScript is loaded
Estimated time: 15 minutes
- Test your navbar by resizing the browser window
- Ensure the toggle button appears on mobile screens
- Verify the menu collapses and expands smoothly
- Add appropriate Bootstrap responsive classes (e.g.,
.navbar-expand-lg)
Estimated time: 20 minutes
- Create a
<div> with .carousel and .slide classes
- Add a unique ID to your carousel
- Insert multiple slides using
.carousel-item (first one needs .active)
- Add previous/next navigation controls
- Include slide indicators at the bottom
- Set up auto-play with
data-bs-ride="carousel"
tip Carousel Images
For best results:
- Use images with similar dimensions
- Optimize image file sizes for web
- Add meaningful alt text for accessibility
Estimated time: 10 minutes
- Position the carousel directly below the navigation bar
- Ensure consistent spacing and styling
- Test that both components' JavaScript work together
- Check responsive behavior isn't compromised
Estimated time: 10 minutes
- Open browser developer tools (F12)
- Test on:
- Desktop (1920px wide)
- Tablet (768px wide)
- Mobile (375px wide)
- Verify navbar collapses appropriately
- Check carousel remains functional at all sizes
tip Testing Tip
Use Chrome DevTools' device toolbar to quickly switch between different screen sizes and devices.
Estimated time: 10 minutes
- Watch the code review video
- Compare your implementation with best practices shown
- Refine your code for:
- Clean HTML structure
- Proper Bootstrap class usage
- Smooth user experience
Your completed project must include:
Navigation Bar:
- :emoji: Responsive Bootstrap navbar with
.navbar class
- :emoji: Brand/logo area using
.navbar-brand
- :emoji: Navigation links with
.navbar-nav and .nav-link
- :emoji: Toggle button for mobile screens
- :emoji: Working collapse/expand functionality
Carousel Component:
- :emoji: Multiple slides using
.carousel-item
- :emoji: Previous/next navigation controls
- :emoji: Slide indicators at the bottom
- :emoji: Auto-play functionality
- :emoji: Smooth transitions between slides
Integration & Quality:
- :emoji: Seamless integration between components
- :emoji: Consistent responsive behavior
- :emoji: Clean, well-structured HTML
- :emoji: Professional styling and user experience
- Check that Bootstrap JavaScript is loaded
- Verify
data-bs-toggle and data-bs-target match
- Ensure you're using Bootstrap 5 syntax (not Bootstrap 4)
- Confirm all slides have the
.carousel-item class
- Make sure the first slide has
.active class
- Check that carousel ID matches in controls
- Add proper spacing with Bootstrap utility classes
- Use
mt- (margin-top) classes to separate components
- Check z-index values if navbar overlaps carousel
:information_source: Info Submit Your Work
When you have completed your Bootstrap Navigation Bar project and tested all functionality:
Submit Your Project Here
Before submitting, verify:
- Navigation bar collapses on mobile
- Carousel auto-plays and controls work
- All features work across different screen sizes