Cards are flexible containers designed to draw attention to their content. They have a subtle border and placeholder content ready for editing. Learn how to insert cards as columns into a row ,and explore the classes applied to the placeholder elements.
- [Instructor] Dreamweaver CC automatically…generates the HTML and CSS for more than 20…different types of bootstrap components.…In this chapter, we'll take a look…at how to edit just a couple, starting with Cards.…Simple, flexible containers designed…to draw attention to their content.…With the feature section selected in Liveview,…click the icon to add a new row.…On my monitor it's at the top right of…the section, it might be at the bottom on yours.…
Click that, and then scroll down to find that new row.…Dreamweaver's applied the same HTML5 element section…to it because the previous one was also a section.…We need to give this an ID.…I'm going to call it articles.…And then Dreamweaver asks whether…we want to create a style rule for that,…it needs to be in Yosemite.CSS,…that's our custom styles.…That's all fine, just click away.…That'll create a new style rule.…And then select the first column inside that new row.…
I'm going to put a Card inside this column,…so go to the Insert Panel, and make sure…that Bootstrap Components is selected.…
- 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.