In this video, learn how the card-img-overlay class can be used to superimpose text on an image in a card component. Explore how it creates an absolutely positioned element anchored to each side of the parent card and shows how to create a style rule to shift the offsets to reposition overlaid text.
- [Instructor] In chapter three we used a combination…of relative and absolute positioning…to superimpose this main page heading over the hero image.…Cards in Bootstrap 4 have a utility class…that does it automatically.…Let's see how to use it.…So I'm going to scroll down to the bottom…where I've inserted those cards…and what I want to do is to put the headings…at the top of each card over these images.…So the first thing is to select one of the headings…and then in the DOM panel, there it is, that h3 heading,…we need to wrap it in a div.…
So right-click, Wrap Tag,…and then apply the class card-img-overlay to that div.…And once that's applied the heading…jumps up over the top of the image.…So let's quickly just do the other two headings.…
So far so good,…but this is where it can get confusing.…The card image overlay div is now selected,…but I can't select any of the text underneath the image.…And this is where Dreamweaver's Live view displays help.…Notice that the blue border around this div…stretches all the way down,…
- Defining a layout grid
- Inserting and modifying a navigation bar
- Adding a container for the page content
- Inserting a responsive image
- Resizing and duplicating columns
- Inserting fixed-size images
- Inserting cards
- Editing a carousel
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
Bootstrap 4 Essential Trainingwith Ray Villalobos6h 42m Beginner
Bootstrap 4 Layouts: Responsive Single-Page Designwith Ray Villalobos3h 13m Intermediate
Designing Websites from Photoshop to Dreamweaverwith Sue Jenkins2h 27m Intermediate
What you should know1m 46s
1. Get Started
2. Create the Site Navigation
3. Add a Hero Image
4. Work with Rows and Columns
5. Edit Bootstrap Components
6. Complete the Design
Next steps1m 55s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.