User Guide Cancel

Design responsive websites using Bootstrap

Search
Dreamweaver

Dreamweaver

Open app
  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

For a mobile-first, responsive website, use Bootstrap starter templates and drag-and-drop Bootstrap components in Dreamweaver.

Bootstrap is a popular, free, HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. The framework includes responsive CSS and HTML templates for buttons, tables, navigation, image carousels, and other elements that you can use on your web page. A few optional JavaScript plug-ins are available, which enable developers with even basic coding knowledge to develop great responsive websites.

Dreamweaver lets you create Bootstrap documents and also edit existing web pages created with Bootstrap. Whether they are fully designed Bootstrap files or works-in-progress, you can edit them in Dreamweaver to not only edit code, but also use visual editing features such as Live View editing, visual CSS designer, Visual Media Queries, and Extract to make design changes.

Note:

Bootstrap versions that are currently supported include v4.4.1 and v3.4.1.

Common questions

I've been using fluid grids in Dreamweaver. How do I get started with Bootstrap?

When you created fluid grid documents, Dreamweaver made your web pages responsive by applying appropriate classes automatically. All you had to do was to focus on your content and decide how they reflow in the different form factors.

Similarly, in Bootstrap documents, you only have to focus on content and design and the responsiveness of your web page is taken care of by Dreamweaver, which is tightly integrated with the Bootstrap framework.

Dreamweaver currently supports Bootstrap 3.4.1 and 4.4.1 versions:

"Bootstrap 3.4.1 includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts." - Bootstrap documentation.

"Bootstrap 4.4.1, with major changes, includes powerful mobile-first flexbox grid to build layouts of all shapes and scales thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes." - Bootstrap documentation.

To get started with Bootstrap documents in Dreamweaver, consider using Bootstrap starter templates. Dreamweaver includes a bunch of templates aimed at different types of websites you may want to create, for example, ecommerce or portfolio.

If you want to create a Bootstrap document from scratch, you could always do so as described in the Create Bootstrap Documents section.

Can I migrate existing fluid grid documents to Bootstrap documents in Dreamweaver?

No, there isn’t a direct method of converting your existing fluid grid documents to Bootstrap documents. However, the user experience in Dreamweaver while creating and designing Bootstrap documents is similar to that of fluid grid documents. For example, you can get started by creating a Bootstrap document right from the New Document dialog box. While you create fluid grid documents for three basic form factors – Mobile, Tablet, and Desktop, for Bootstrap, you start by creating a document for basic screen sizes – small, medium, large, and extra large. The layout editing options that are displayed when you click elements in Bootstrap documents also look similar to that of fluid grid documents.

Can I import old sites in the latest version of Dreamweaver?

Yes, you can import old sites in the latest version of Dreamweaver. When you do so, Dreamweaver looks for the Bootstrap CSS file in the site root/css/ folder. 

  • if the site has a Bootstrap v3 CSS file, the Bootstrap Version in Manage Site > Advanced Settings > Bootstrap is set to 3.4.1.
  • if the site has a Bootstrap v4 CSS file, the Bootstrap Version in Manage Site > Advanced Settings > Bootstrap is set to 4.4.1.
  • if the site has no Bootstrap CSS file in the site root/css path, the Bootstrap Version in Manage Site > Advanced Settings > Bootstrap is set to 4.4.1.

Create Bootstrap documents

You can begin designing your Bootstrap website using one of the following options in the New Document dialog box:

  • Bootstrap starter templates (Starter Templates > Bootstrap Templates) - Use this option if you want to get started quickly without the hassle of laying out your pages from scratch. Simply edit the text and replace the assets, if necessary, and your responsive website is ready. See Using Bootstrap starter templates for more information.
  • Create an HTML document based on Bootstrap framework (New Document > HTML > Bootstrap) - Use this option if you want to build your website brick-by-brick using CSS and Bootstrap components within Dreamweaver. For more information, see Creating HTML documents based on Bootstrap framework.

Using Bootstrap starter templates

Bootstrap starter templates let you create web pages for popular themes in a jiffy. All the dependent files in the framework are saved automatically.

  1. Click File > New.

  2. In the New Document dialog box that appears, click Starter Templates, and then select the required template from the list of Bootstrap Templates.

  3. Click Create. 

    An HTML page that is based on the template you chose is created. You can now modify the page by adding or deleting components, editing text, or assets, as required.

Creating HTML documents based on Bootstrap framework

You can start building your responsive website by creating an HTML document based on Bootstrap framework. You can choose to create a set of Bootstrap framework files or use the existing files. Once the document is created, you can add Bootstrap components such as accordions and carousels using the Insert panel in Dreamweaver. Or, if you have Photoshop comps, you can use Extract to bring in images, fonts, styles, text, and more into your Bootstrap document.

  1. Click File > New.

  2. In the New Document dialog box, click New Document > HTML, and then click the Bootstrap tab.

  3. To create a new bootstrap.css file (and the other bootstrap files), perform the following actions:

    Specify whether you want to create a new Bootstrap CSS or use an existing CSS.

    If you choose to create a new CSS, a "css" folder is created in the site root, and the bootstrap.css file is copied into the new folder. If you choose to use an existing CSS, specify the path or browse to the location of the CSS.

    1. Click Create New.

      Create a new Bootstrap document
      Create a new Bootstrap document

    2. (Optional) if you want to attach any other CSS to your document, click  in the Attach CSS section. The Attach External Style Sheet dialog box appears. Specify the settings and click OK.

    3. Include A Pre-built Layout option provides a basic Bootstrap document structure.

      If you do not want the basic structure and want to start off with a blank document, deselect the Include A Pre-built Layout option.

    4. (Optional) The default layout contains 12 columns with 30 px gutter. The default screen sizes are 576px, 768px, 992px, and 1200px. 

      If you want to modify these settings, click Customize. The bootstrap.css file is modified accordingly.

      Note:

      For Bootstrap v3.4.0, the default screen sizes are 768 px, 992 px, and 1200 px.

    5. Select Use Extract to Build Your Page from Photoshop Comps if you want the Extract panel to be opened (in case it is closed). By doing so, you can start extracting assets from Photoshop comps right away.

      By default, a new site is created using Bootstrap version 4.4.1. After you create the document, you find the css, and js folders in the site root folder. However, if you want to create the site using Bootstrap version 3.4.1, select Site > Manage Sites. Select the site root folder. Click Advance Settings > Bootstrap. In the Bootstrap Version drop-down field, select 3.4.1. For Bootstrap version 3.4.1, you can see the css, js, and fonts folder in the site root folder.

      Select the Bootstrap version 4.4.1
      Select the Bootstrap version 4.4.1

      When you create a Bootstrap 4.4.1 page, the jQuery version 3.4.1 is supported. The Bootstrap Starter templates are updated to Bootstrap version 4.4.1.

      When you add Bootstrap components to a Bootstrap page, you can upgrade the Bootstrap 4.0.0 pages to Bootstrap 4.4.1 and jQuery version to 3.4.1. Click Yes on the dialog that appears when you insert Bootstrap components to page.

      Version compatibility confirmation dialog
      Version compatibility confirmation dialog

      Bootstrap 3.4.1 confirmation dialog
      Bootstrap 3.4.1 confirmation dialog

      jQuery popup dialog
      jQuery popup dialog

      When you import a Bootstrap 4.0.0 site or when you migrate a site from previous versions to the next version of Dreamweaver release, the Bootstrap version is set to 4.4.1 in Site Setup > Advanced setting > Bootstrap.

    Note:

    With Bootstrap 4.3.1, the height of a Grid row column is changed from 1 px to 0 px. So, to make it visible in Live view you need to add some content in the Grid row column.

  4. To use existing Bootstrap framework files, perform the following actions:

    1. Click Use Existing, and specify the path of the bootstrap.css file. You can also browse to the location where the CSS is saved.

      Creating Bootstrap documents using existing framework files
      Creating Bootstrap documents using existing framework files

    2. (Optional) if you want to attach any other CSS to your document, click  in the Attach CSS section. In the Attach External Style Sheet dialog box, specify the settings and click OK.

    3. Include A Pre-built Layout option provides a basic Bootstrap document structure. If you do not want the basic structure and want to start off with a blank document, deselect the Include A Pre-built Layout option.

  5. Click Create.

Note:

The bootstrap.css file that is created is read-only. So, you cannot edit these styles using the CSS Designer; the Properties pane in CSS Designer is disabled in Bootstrap files.

If you want to modify the styling of your Bootstrap document, create another CSS file to override the existing styles, and then attach it to the document.

Open Bootstrap files

Note:

It is recommended that you open and edit documents that are created only in Bootstrap version 3 and later in Dreamweaver.

You can open Bootstrap files using one of the following ways:

  • Click File > Open and browse to the Bootstrap HTML file.
  • (Recommended) Create a Dreamweaver site and point the site folder to the folder that contains all your Bootstrap files.

When you open a Bootstrap HTML file in Dreamweaver:

  • The rows are highlighted in gray dashed lines with rounded corners
  • The columns are highlighted in blue dashed lines

Dreamweaver recognizes the CSS files associated with any Bootstrap HTML file if the CSS filename contains 'bootstrap'. The CSS file reference can be any or all of the following:

  • Local path:

    The minified or unminified CSS file is present locally. For example:

    <link href="css/bootstrap.css" rel="stylesheet"> or
    <link href="css/bootstrap.min.css" rel="stylesheet">

  • Remote path:

    • A remote minified or unminified CSS file. For example:

    <link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
    <link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">

  • CDN

    • <link href="http://maxcdn.bootstrapcdn.com/bootstrap/<bootstrap_version_number>/css/bootstrap.min.css" rel="stylesheet">

Note:

Bootstrap style sheets in both link and import tags are supported in Dreamweaver. However, nested import - link to a style sheet that in turn imports another style sheet - is not supported.

Hide, unhide, and manage hidden Bootstrap elements

Sometimes, you may require an element to be displayed in one viewport while in another viewport, you may want to hide the element for design purposes. 

To hide a Bootstrap element, right-click and select Hide Element. The element is temporarily hidden from the view.

Hide Bootstrap elements in Dreamweaver
Hide Bootstrap elements in Dreamweaver

To view and unhide hidden elements, right-click and select Manage Hidden Elements. The hidden elements appear with a gray, hashed background. Click the eye icon to unhide the element.

Manage hidden Bootstrap elements
Manage hidden Bootstrap elements

Add Bootstrap components

The Bootstrap Components option in the Insert panel lists all the Bootstrap components that you can add to your web page in Dreamweaver. According to the Bootstrap version in the bootstrap.css file linked to the HTML page, the respective components are listed in the Insert panel.  For example, in Bootstrap v4.0.0, you see additional components such as Cards, Badges. Similarly, Glyphicons, Panel, Wells, and Thumbnails components are available only in Bootstrap v3.3.7. Depending on the Bootstrap version, you see the respective components in the Insert panel. Also, Spinners component is available only in Bootstrap v4.4.1.

The components in the Insert panel are populated based on the following criteria:

  • The document in focus: The components in the Insert panel are populated based on the Bootstrap version in the Bootstrap file that is linked to the document. 
  • Version in Site Preferences: For a non-bootstrap document, Dreamweaver looks for the version in Site Preferences > Advanced > Bootstrap. Depending on the version in this option, the appropriate components are populated. By default, for new sites, the version is 4.4.1.
  • Where the files are saved: For a non-bootstrap document that is not a part of any site, the Insert panel reflects the 4.4.1 components.
Components supported in Bootstrap 4.0.0
Components supported in Bootstrap 4.4.1

To add a component, drag it from the panel onto the web page. Before you drop the component, take note of the visual aids such as Live Guides, Precision Insert (using DOM), and Position Assist. Use these aids to place the components quickly, and accurately on your page. For more information on inserting elements in your web page, see Insert panel overview.

Add rows

Click the required row after which you want to add the new row. Then, click the Add new row icon. A Bootstrap row along with two child column elements with six columns each is added.

The code for the added row is as follows:

<div class="row">
<div class="col-*-6"></div>
<div class="col-*-6"></div>
</div>

where * represents the current screen size in Dreamweaver.

Add columns

Select the required column and then click the Add new column icon. The selected column is duplicated without its children.

All empty columns are assigned a minimum height of 20px. However, this height is not actually added to the page; it is shown only in Live view for easier insertion of elements within the columns.

Duplicate rows and columns

Click the row or column that you want to duplicate and then click the duplicate icon at the lower right corner. The entire row or column is duplicated along with its contents.

Note:

The Add Row or Add Column option duplicates the row or column with classes, but without the content.

Resize and offset columns

Resizing and offsetting columns become imperative especially when you are creating responsive designs for various viewports. 

Resize columns

Click the required column and drag the handle on the right to resize. For a Bootstrap v4.0.0 document, when you resize a column, the col-*-n class is added, where * represents the current media query (sm, md, ld, xl) and n represents the number of columns that it occupies. For the Extra small screen size, the class col-n is added.

For a Bootstrap v3.3.7 document, when you resize a column, the col-*-n class is added, where * represents the current media query (xs, sm, md, or lg) and n represents the number of columns that it occupies.

Dreamweaver detects the current screen size and adds the appropriate class. To resize columns to suit specific viewports, change the viewport size using the options in the lower-right corner or the scrubber. Then resize the columns as appropriate.

Offset columns

Click the required column and drag the handle on the left to offset the column. The offset is shown as a hashed area. For a Bootstrap v4.0.0 document, when you offset the column, the offset-*-n class is added, where * represents the current media query (sm, md, lg or xl) and n represents the number of columns that it occupies.

For a Bootstrap v3.3.7 document, when you offset the column, the col-*-offset-n class is added, where * represents the current media query (xs, sm, md, or lg) and n represents the number of columns by which it shifts.

Dreamweaver detects the current screen size and adds the right class. To offset columns to suit specific viewports, change the viewport size using the options in the lower-right corner or the scrubber. Then, offset the columns as appropriate.

 Adobe

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans

Legal Notices    |    Online Privacy Policy