Join Ray Villalobos for an in-depth discussion in this video Making carousel elements display full screen, part of Bootstrap Layouts: Responsive Single-Page Design.
- I'd really like my visitors to focus…on my slideshow when they come to the website.…It would be nice to have the images…appear to take up the width and height of the page,…regardless of the size of my window.…I'm gonna go ahead and take care of that…in this video.…Now, first, I'm gonna go to the index.html document…and find the area on my page…where we have this div called carousel-inner.…We're gonna add a class right here…called fullheight.…This is the class that's gonna make that area of the screen…appear to be the full height of the browser window.…
Now, the full width, it takes care of automatically,…as you can see.…Doesn't matter what width I make this.…That image is gonna cover up the whole width.…It's the height that's usually the problem.…Next step, we're gonna go to the script,…and we'll create a new variable here.…This variable is going to be set to ...…We'll call it wheight,…and I'm gonna set it to…the window.…iQuery has a method called height…that allows you to get the height of the window easily.…It takes care of some incompatibilities between browsers.…
- Analyzing your markup
- Creating simple column layouts
- Creating basic navigation and a simple carousel
- Modifying Bootstrap styles
- Working with branding and toggle styles
- Adding interactivity
Skill Level Beginner
Bootstrap 3: Advanced Web Developmentwith Ray Villalobos3h 28m Intermediate
1. Understanding Bootstrap Layouts
2. Customizing Bootstrap Styles
3. Adding Interactivity
Next steps2m 50s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.