Dreamweaver CC supports both Bootstrap 3 and 4. Discover that Bootstrap 4 is the default, but also how to switch to Bootstrap 3. Explore how Dreamweaver detects which version is being used in the active document and automatically switches the tools available in the Insert panel accordingly.
- [Instructor] The latest version of Dreamweaver CC…defaults to Bootstrap 4,…but it still supports Bootstrap 3.…As well as showing you how to get started with Bootstrap,…I'll show you how to switch between versions.…I'm going to begin by creating a New Site…and I'll call that Bootstrap 4.…And the Local Site Folder,…I need to create that on my Desktop.…
And we can now create a Bootstrap file.…One way to do it is from the quick start menu…just select Bootstrap.…Alternatively, go to the File menu, New,…and then in the New Document dialog box…make sure New Document is selected.…The Document Type needs to be HTML.…Then under Framework select the BOOTSTRAP tab.…For Bootstrap CSS select Create new,…we're not going to attach any extra CSS.…Then for Design make sure that this checkbox,…Include a pre-built layout, is selected,…then click Create.…
And then save that new file as bootstrap4.html.…In the Files panel Dreamweaver has created three new folders…in addition to that HTML file.…If we open them css contains bootstrap4.css.…
- 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.