All Bootstrap components, including rows and columns, are wrapped in divs, making it difficult to identify elements for editing in the DOM panel or Tag selector. Learn how to use HTML5 semantic elements in combination with IDs to speed up selection of the correct element.
- [Instructor] A problem with building Bootstrap pages…in Dreamweaver is that just about…every type of content is wrapped in a div.…Let's just take a look in the DOM panel.…I've currently got selected the nav bar,…and that's actually in an HTML5 semantic element, nav,…but if we look at everything else, that's all in divs.…So, here is the container with the rest of the page in it,…that's a div, inside there is a row, which is a div.…Inside there is a column, which is also a div,…and then here's the row that…contains all of the text content.…
If we expand that, all of the columns…inside there are also divs.…Once you start getting more and more content in your page,…it can make it really difficult to find your way around.…One solution is to assign an ID to important elements.…Even better, in my opinion, is to use IDs…in combination with HTML5 semantic elements.…The Bootstrap grid is controlled by the classes…that are applied to an element,…not by the type of element itself.…
Now, I plan to use this row with six columns…
- 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 46m 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.