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.…
Author
David Powers
Released
12/21/2018- 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
Duration
Views
-
Introduction
-
What you should know1m 46s
-
1. Get Started
-
Set the Bootstrap version6m 26s
-
Understand the layout grid3m 52s
-
Define the layout grid5m 9s
-
-
2. Create the Site Navigation
-
Insert a navigation bar3m 34s
-
Edit the links6m 25s
-
Customize the color scheme6m 14s
-
-
3. Add a Hero Image
-
Insert a row and columns5m 46s
-
Insert a responsive image4m 21s
-
Remove gaps around the image5m 43s
-
4. Work with Rows and Columns
-
Resize and duplicate columns5m 29s
-
Use semantic markup3m 41s
-
Paste formatted text4m 50s
-
Insert fixed-size images5m 15s
-
Paste into an empty column6m 14s
-
Style the feature section3m 54s
-
-
5. Edit Bootstrap Components
-
Insert cards4m 46s
-
Add content to cards5m 26s
-
How a carousel is structured5m 13s
-
Edit a carousel4m 51s
-
-
6. Complete the Design
-
Add the footer3m 13s
-
Hide elements3m 8s
-
Add extra pages7m 15s
-
-
Conclusion
-
Next steps1m 55s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press 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.
Share this video
Embed this video
Video: Add content to cards