Learn how adding content to cards basically involves replacing the placeholder content with your own images and text. When pasting in content from an external source, the default card classes are not automatically applied, but they are not required. They are simply convenience classes that allow you to specify your own style rules.
- [Instructor] Adding content to cards…is a pretty straight forward process…so let's get straight to work.…I'm going to change the placeholder image in the first card…by selecting it and then opening…the Quick Property Inspector,…then we need to change the source to browse for the file.…Make sure we're in the correct site root,…then in images, the image that I want…is this one half_dome.jpg.…Select that and then we need to change…the alternate text to half dome.…
(typing)…We don't need to put in a width or height for the image.…I'm not going to create a link.…I don't want to add any of these particular shapes…and there's no need to check this check box,…Make Image Responsive.…By default images in cards are responsive.…So we just click away and that has changed that.…Then I need to change the placeholder content.…I've got the text for that in the content folder…which you find in the exercise files for this video.…
There are two versions, one is in Microsoft Word format…and the other one is in Rich Text Format.…So I'm going to open the one in Microsoft Word Format.…
- 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 32m 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.