The first step in building a responsive page with Bootstrap is defining the number of columns and media query breakpoints in the layout grid. Learn how to set these in the Dreamweaver New Document dialog box. Dreamweaver uses its internal Sass preprocessor to compile the Bootstrap style sheet from source files and generates a read-only style sheet. Custom styles will be added to a separate style sheet attached to the page.
- [Instructor] The first step in building a Bootstrap…site is to define the layout grid.…I want to customize the breakpoints, so I'm not…going to use this bootstrap4 site that I've…created earlier.…I'm going to create a new site.…And I'm going to call mine Yosemite Bootstrap 4.…Now if you plan to use your own assets,…you can call it whatever you like and you can…create the local site folder wherever you want it to be.…If you want to use the exercise files, on the other hand,…browse to the main folder.…
I've got them on the Desktop.…There they are.…Exercise Files and inside there the Chapter One folder,…01_03.…And select the begin folder.…And then click Save.…And inside the files panel, you can see that…there's an images folder inside there…is a selection of images that I'll be using,…and inside there is an svg folder that contains…a selection of svg icons.…
So now we've got our basic site assets.…We need a webpage to start building our responsive site,…and at the same time to define the layout grid.…And go to the File menu.…
- 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.