Responsive images automatically resize to fill the entire width of their parent element unless doing so exceeds their natural size. Dreamweaver inserts a placeholder image and applies the necessary style rules. Learn how to replace the placeholder image using the Quick Property Inspector, and explore the various options for styling responsive images.
- [Instructor] I want to insert a hero image…that will span the full width of the view port directly…below the nav bar in this webpage.…I also want it to resize automatically depending…on the page width.…Easy peasy with a bootstrap responsive image.…I've already inserted my fluid container.…Inside there is a row and inside there is a single column…with a class col-12.…So it spans the entire row at all break points.…With the column selected,…we can insert the hero image inside.…
In the Bootstrap Component section of the insert panel…there is Responsive Image.…First time you select it, little sub menu appears.…Default inserts a plain rectangular image.…Circular applies a class that masks the image in an ellipse.…Rounded Corner applies subtle rounded corners.…And contrary to what you might expect,…Thumbnail doesn't create a tiny version of the image.…It simply applies a small amount of padding…and a subtle border around the image.…
For a hero image, we just want the default…so that's what I'm going to select.…The position assist dialogue appears right at the top there.…
- 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.