Create a responsive website in Dreamweaver CC – Part 2
Add more responsive Bootstrap Components with Dreamweaver
In part 1 of this series, I used some Bootstrap components available with the new responsive design features in Dreamweaver CC 2015 to create a new web page that could be optimized for display across phones, tablets, and desktop browsers. I added a responsive menu, slideshow and thumbnail images for the base of the design (see Figure 1, or the live site).
Figure 1. (Click to enlarge) Home page with navbar, slideshow, thumbnail images
Create a column layout
For this part, I will demonstrate how I used the Bootstrap grid layout features and some additional Bootstrap components to add a layout that highlights the client’s list of galleries and their Go Green Showcase home.
Figure 2. (Click to enlarge) 2-column section
Bootstrap is based on a grid system to make it easier to lay out your web page. When I initially created the page using the New Document dialog, I kept the default setting to use a 12-column layout.
Figure 3. (Click to enlarge) Specify grid layout in New Document dialog
The Grid System provides an “invisible” grid you can use to lay out the elements, or sections, of your web page. The following diagram shows how the design I want to create would be laid out for display on a desktop browser against the 12-column grid.
Figure 4. (Click to enlarge) Layout for desktop browser using a 12-column grid system
And for the tablet design:
Figure 5. (Click to enlarge) Layout for tablet browser using a 12-column grid system
And for the smart phone design:
Figure 6. (Click to enlarge) Layout for phone browser using a 12-column grid system
When I created the page, I used the
container component (Insert > Bootstrap Components > Container) to wrap the contents of the page. The
container element creates a fixed-width section for the content. So, the grid system for this page is used to design the fixed width section (and NOT the empty spaces that appear on either side).
Note: If you were to use the
container-fluid component(Insert > Bootstrap Components > Container-fluid), the grid layout would apply to the entire width of the page.
It all adds up to 12
When you design against a grid system, it is important to remember the total number of columns used in your design (maximum of 12 in Bootstrap). Web layout with Bootstrap involves using a series of rows and columns. In my case, I am designing this page using a 12-column grid, so the number of columns in a row cannot exceed 12.
Bootstrap makes math easier
Bootstrap includes predefined CSS classes that are named intuitively to indicate the number of columns an element will take up at each device size.
|Column indicator||Size||Number of columns|
||lg (e.g., desktop web browser)md (e.g., tablet web browser)sm (e.g., smart phone web browser)xs (e.g., small device web browser)||1,2,3,4,5,6,7,8,9,10,11,12|
||Element will take up 6 columns (roughly ½ the display area) on a desktop browser.|
||Element will take up 4 columns (roughly 1/3 the display area) on a tablet browser.|
||Element will take up 3 columns (roughly ¼ the display area) on a smart phone browser.|
Add a row with columns
Now that I have an idea of how I want to lay out the next sections of the page, I’ll take a look at the list of Bootstrap Components available to me to see which would best fit my needs.
Before I add the additional components, I know I need a row with:
- 2 columns that span 6 of the 12 total columns for a desktop layout (see Figure 4)
- 1 column that span all 12 columns for a tablet and phone layout (see Figure 5 and 6)
List 1. Bootstrap classes for columns to span at different device sizes
To do this I:
- Collapsed all of the existing sections to make the code easier to read and edit and placed the cursor after the closing
</div>of the thumbnail section (see Figure 7).
Figure 7.(Click to enlarge) Collapse code and prep for new section
Note: In Code View, hover over the line number and then click the arrow that appears to expand or collapse sections of code.
- Selected the Grid Row with Column component from the list of Bootstrap Components (Insert > Bootstrap Components) and changed the number of columns to 2.
Figure 8.(Click to enlarge) Add a row with columns
- Dreamweaver adds a row with 2 columns.
Figure 9. (Click to enlarge) Dreamweaver adds a row with 2 columns
Notice that the row is added as a
<div> element with a class of row assigned to it. Also, each column is assigned with a class of
col-xs-6 by default. Each of these are predefined classes in the bootstrap.css that you can examine more closely to see the layout properties applied.
The default class assigned to the columns is not what I want (since I’m designing for desktop – lg; tablet – md; and phone – sm), but I’ll change that soon.
Add Bootstrap Components
Now I want to add the components best suited to show the content I want for the 2 columns.
Media list component
For the first column, I want to a list in which each list item includes an image along with a description of a different photo gallery (see Figure 10).
Figure 10. (Click to enlarge) Media list component
To do this, I:
- Placed the cursor just after the opening
<div>in the new row.
- Selected Media Object: Media List from the list of Bootstrap components (click the down arrow next to the icon for Media Object to see the Media List option).
Dreamweaver adds the media list as a nested level of list items. If you look at the code (in Code View, or Split View), you can see it is added as a
<ul> (unordered list), with nested
<li> (list items).
Figure 11. (Click to enlarge) Media List is a nested list by default
I want all of 4 my list items at the same level. So, I could use a variety of methods to delete the unnecessary levels before adding 3 more list items at the parent level:
- Method 1: delete the elements from Code View (collapse sections of HTML if you prefer working in this mode)
- Method 2: click the border for the unnecessary elements in Live View and press the Delete key (repeat until just the first item remains)
- Method 3: enable the DOM panel (Window > DOM) to view the HTML hierarchy, select the unnecessary element, one at a time, and press the Delete key (repeat as necessary)
Figure 12. (Click to enlarge) Methods to remove elements from HTML
When I finished removing the nested elements, I was left with the first <li> item that includes some placeholder content.
Figure 13. (Click to enlarge) List item represented in Code View and the DOM Panel
I wanted to style my list items a bit differently than the way it is styled by default, so I made the changes to the first list item.
Figure 14. (Click to enlarge) Default styling for list item
The <div> within the list items contains an
<h4> heading element. This was a little larger than what I wanted, so I changed this to an
<h5>. I could change the
<h4></h4> directly in Code View, or use the Quick Tag Editor (Cmd + T on Mac, Ctrl + T on Win). Then, just change the h4 to h5 and press Return or Enter.
Figure 15. (Click to enlarge) Change elements using the Quick Tag Editor
Next, I wanted to make the thumbnail images have rounded borders, so I added the
.img-circle class to the placeholder image. I can do this directly in Live View.
- Click the placeholder image.
- Click the plus sign on the HUD to add another class.
- Type the name of the class (
.img-circle) in the new field. Notice after you type a period (.), Dreamweaver displays a list of possible class names you can use. The list narrows the more you type. You can type the whole class name, or press the down arrow to access the appropriate one.
- Press Return or Enter to accept the appropriate class name.
Figure 16. (Click to enlarge) Use .img-circle class to change shape of thumbnail image
.img-circle class is one of the predefined classes in the bootstrap.css file that Dreamweaver created when I created the page. I’m pondering another blog post in which I will highlight some of the more useful classes and their effects. In the meantime, feel free to study this file, or some online resources, to better understand some of the styling options readily available to you.
Now that the main styling is in place, I’ll copy this
<li> element and paste it 3 times to get my list of 4 items. Again, I can use Code View to do this and copy the entire
<li></li> item and paste it 3 times. Or, I can select the li in the DOM panel, right click, and select Duplicate (and repeat as necessary).
Figure 17. (Click to enlarge) Use the DOM panel to duplicate sections of code
From here, I can change the content as necessary so that my content for this section is complete.
Figure 18. (Click to enlarge) Media list with updated content
This section is not quite complete since I want to style it with a header bar and a different background color. I decided to wrap media list in a panel component as it provides the some sections that will allow me to add a header, some padding and a different background color.
The image below shows the styling of the list section at this point (before) and the finished styling I want to achieve (after).
Figure 19. (Click to enlarge) Current list (before) and list with additional spacing and background color (after)
I decided to wrap the
<ul> containing the media list items inside a panel component. The panel component includes a header, body, and footer section. I placed my cursor just after the opening <div> for the column and just before the opening
<ul> tag. Then, I clicked Panels from the Insert panel.
Figure 20. (Click to enlarge) Panel component
I don’t need a footer in this panel, so I will remove the
<div> that defines the footer by deleting this code:
<div class="panel-footer">Panel footer</div>
The panel body contains default content with text “Panel content”. I’ll replace this with the
- Delete “Panel content” text.
<ul>in Code View to make it easier to cut and paste.
- Paste Clipboard content between the
Figure 21. (Click to enlarge) Steps to replace Panel content
Now, all I need to do is change the default text in the
<h3></h3> tags of the panel heading to finish this section.
Figure 22. (Click to enlarge) Finished media list
Adjust column size for multiple devices
Finally, I want to adjust the default class that was added to define how many columns, of the 12 column-grid, this section will span at different device sizes. Dreamweaver applies the
.col-xs-6 class by default, but I want to apply
.col-lg-6.col-md-12.col-sm-12 (12 columns, or full width, on medium and small browsers such as tablets and smart phones, respectively).
Figure 23. Default class determines amount of columns content spans
I can change this using the HUD in Live View by clicking on the <div class=”col-xs-6″> that contains the media list content. You can select this section in a few ways:
- Click inside the <div> in Code View
- Click the blue dotted border around the column in Live View
Figure 24. Select a column to modify its default class
Then, remove and add the necessary classes:
1. Click Remove Class/ID, “x” icon, next to the class name in the HUD to remove
2. Click Add Class/ID, “+” icon, to add a new class name.
3. Type .col- and Dreamweaver presents a list of possible classes you can use. This list narrows the more you type.
4. Add all 3 classes (
Figure 25. Remove and add column classes
Here is a link to the live site as it stands now.
Figure 26. (Click to view) Live site so far
Note: You can view the page in a web browser and right click (in a desktop browser) and select View Source to check out the code so far.
In part 3 of this series, I will add the content to the 2nd column in this row. I will use the Tab component and some glyphicons for the showcase home section.
Figure 27.(Click to enlarge) Section to style in next part of the series