Dreamweaver CC: Responsive Design with Bootstrap 4

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