Dreamweaver CC: Responsive Design with Bootstrap 4

Learn how to build responsive websites using Dreamweaver CC and the Bootstrap 4 framework.

Dreamweaver CC—coupled with Bootstrap 4—makes it easier for design-minded professionals to build websites that look great on desktops and mobile devices alike. In this course, learn how to efficiently build responsive web pages using Dreamweaver CC and Bootstrap, the popular HTML, CSS, and JavaScript framework. Instructor David Powers demonstrates how to define a Bootstrap layout grid, insert a navigation bar, add a hero image, and resize, offset, duplicate, and copy Bootstrap columns. Plus, he covers how to edit Bootstrap components such as cards and carousels.

Introduction

• Speed up responsive design
• What you should know

1. Get Started

• Set the Bootstrap version
• Understand the layout grid
• Define the layout grid

2. Create the Site Navigation

• Insert a navigation bar
• Edit the links
• Improve usability on small screens
• Apply quick styles to the navigation bar
• Customize the color scheme
• Add a background image to the brand

3. Add a Hero Image

• Add a container for the page content
• Insert a row and columns
• Insert a responsive image
• Remove gaps around the image
• Position text over the image

4. Work with Rows and Columns

• Resize and duplicate columns
• Flex layout: Equally distributed columns
• Use semantic markup
• Paste formatted text
• Insert fixed-size images
• Flex layout: Centered columns
• Paste into an empty column
• Style the feature section

5. Edit Bootstrap Components

• Insert cards
• Add content to cards
• Superimpose text on a card image
• How a carousel is structured
• Edit a carousel

6. Complete the Design

• Add the footer
• Hide elements
• Add extra pages

Conclusion

• Next steps