Back to Top
The nuts and bolts for
Creative web development

DMXzone Bootstrap

“The perfect site layout in just a few minutes”

Twitter Bootstrap is the greatest solution for designing CSS based, responsive web layouts and now with the help of the DMXzone Bootstrap extension, it is fully integrated in Dreamweaver! Directly in its design view, you can now fully visual create fluid or fixed grid layouts and follow your work in progress for mobile and desktop browsers by selecting the desired size for mobile phones, tablets or desktop. With the responsive grid and the great design view integration it allows you to visually create even the most complicated grid layouts. The extension comes with 8 predesigned pages to get you started right away.

For even more power and additional 35 ready to go Bootstrap Elements check the DMXzone Bootstrap Elements Extension!

Bootstrap 3 is already available as Dreamweaver extension!

Features

General Features

  • Twitter Bootstrap 12-column responsive grid - The responsive grid system ensures proper content proportions for different resolutions and devices.


  • Fully responsive layout within Dreamweaver - When designing a responsive layout you can follow your work in progress for mobile and desktop browsers directly in Dreamweaver by selecting the desired size for mobile phones, tablets or desktop.


  • Support for advanced grid layouts and nested columns - You can add as many rows as you wish within a column.


  • Support for fluid or fixed grid layouts - Design a common fixed-width layout or a fluid, two-column one.
    • Fixed grid layout


    • Fluid grid layout


  • Eight great Bootstrap starter pages integrated in Dreamweaver - You can even use the supplied sample designs and edit them fully visual in Dreamweaver design view.


  • Great Design View integration - The DMXzone Bootstrap allows you to add/delete cells, rows and containers as well as merge cells and spread them in just a mouse click time.


  • Supported devices - DMXzone Bootstrap supports different devices and screen resolutions.

  • DMXzone Boostrap Options Command - You can choose how to include your bootstrap on your pages; normal, minified or even through CDN, so you can achieve the fastest performance for your website.
  • Automatic file copy and include - If you don't like to automatically copy bootstrap files and inclusion, you can switch it off! 

Bootstrap Grid Management

Grid Cells Management

  • Add cell left  - will add a new grid cell on the left side of the current selected cell
  • Add cell right - will add a new grid cell on the right side of the current selected cell
  • Merge with left cell - will merge the contents of the current grid cell with its right neighbor
  • Merge with right cell - will merge the contents of the current grid cell with its left neighbor
  • Delete cell - will delete the selected cell

Grid Row Management

  • Add row above - will add a grid row above the current selected row
  • Add row inside - will add a grid row inside the current selected cell
  • Add row below - will add a grid row below the current selected row

General Alignment and selection options

  • Spread cells - will make all grid cells on the same row equal in size
  • Select cell - selects the cells and opens the Property inspector
  • Add container - adds a fluid/fixed container that wraps the page content

Property inspector

  • Increase offset - increases the number of columns before the cell
  • Decrease offset - decreases the number of columns before the cell
  • Expand to left - will expand the width of the current grid cell getting the needed width from its left neighbor
  • Contract from left - will contract the width of the current grid cell and increase the width of its left neighbor
  • Expand to right - will expand the width of the current grid cell getting the needed width from its right neighbor
  • Contract from right - will contract the width of the current grid cell and increase the width of its right neighbor

Showcases


  • Tasks Management System

    For this interactive task management system we used a few DMXzone extensions in order to allow you to add tasks, assign them to different users, set priority levels and due dates. You can edit any of ...

  • Dynamic Web Store Collection Showcase

    For this photographers' web store we used the Dynamic Web Store Collections for PHP and ASP. The product images, model names and prices are dynamically retrieved from our database. The add to cart ...

  • Interactive Designer Collection Showcase

    For this showcase we used the extensions packed in the Interactive Designer Collection. The accommodation images and titles are retrieved from a data source with HTML5 Data Bindings. We added ...

  • Fashion Deals Daily Showcase

    For this fully responsive page showcase we used DMXzone Bootstrap for the layout and its Elements add-on for the details and time labels. With the HTML5 Database Connector PHP/ASP and HTML5 Data ...

  • Single Page Portfolio Showcase

    For this showcase we used the Single Page Portfolio Template, where we used the DMXzone Bootstrap and its Elements addition for the page layout, and DMXzone Supersized for the background image.

  • Interior Design Studio Showcase

    For this showcase we used detailed regions (HTML5 Data Bindings) in order to display detailed data (DMXzone Database Connector) in a separate view, once an image is clicked. You can control which ...

  • Front End Developer Portfolio Showcase

    For this one page scrollable showcase we used HTML5 Data Bindings and DMXzone Database Connector PHP/ASP in order to populate the content from a dynamic source, including text, images, links and ...

  • Scrollable Store Showcase

    For this showcase we used the Scrollable Store Template that's been designed with DMXzone Bootstrap and Bootstrap Elements. Also we added purchase functionality with the Sliding PayPal Shopping Cart.

  • Facebook Fan Page Showcase

    For this showcase we designed the page layout with DMXzone Bootstrap and put it on Facebook with the help of Facebook Fan Page extension. You can choose which regions of the page will be visible ...

  • Bio Food Showcase

    For this showcase we used DMXzone Google Maps for the locations and also the HTML5 3D Flipping Gallery for the variety of food images, which also contain additional information on the back, visible ...

  • Off-road Bikes Store Showcase

    For this showcase we used DMXzone Bootstrap for the page layout and Bootstrap Elements for the page content that features price labels, images, buttons and text. Also we used Sliding PayPal Shopping ...

  • Beach Spa Showcase

    For this showcase we used HTML5 Data Bindings repeat region in order to preview the room, restaurant and pool images and detail region for the detailed information and images below. The page layout ...

  • Scuba Diving School Showcase

    For this showcase we created a beautiful full screen background image slideshow with DMXzone Supersized and used DMXzone Bootstrap and its Elements extension for the rest of the page content.

  • Charter Yachts Showcase

    For this showcase we used DMXzone Bootstrap for the design layout and its Elements extension for the content details such as labels, buttons and text. The Advanced CSS Animator triggers a sliding out ...

  • Mobile App Company Showcase

    For this showcase we used DMXzone Bootstrap and Elements for the page layout and buttons as well as Sliding Menu for the iPhone like menu.

  • Online Photo Services Showcase

    For this showcase we added 3 different Sliding Billboards on each device for the images preview and also used DMXzone Bootstrap to create the page layout.

  • Racing League Showcase

    For this showcase we used DMXzone Bootstrap for the page layout and HTML5 Image Enhancer tint filter for the images effects on hover. We also styled the application form with DMXzone Uniform to look ...

  • Swimming Pools and Services Showcase

    For this showcase we used DMXzone Bootstrap to create the page layout and HTML5 Image Enhancer for the effects that are triggered when you hover an image thumbnail.

  • Rent a Car Service Showcase

    For this showcase we used Universal CSS Transforms: Flip to animate the images with cool 3D flipping effects in order to show the car descriptions. Also we used DMXzone Bootstrap for the layout and ...

  • Hair and Beauty Studio Showcase

    For this showcase we used HTML5 Slideshow for the beautiful image preview of the studio interior and the DMXzone Bootstrap for the page layout.

  • Restaurant Menu Showcase

    For this showcase we used a few DMXzone extensions in order to create a beautiful restaurant menu. The responsive layout and the content are executed with DMXzone Bootstrap and its Bootstrap Elements ...

  • Beach Villa Showcase

    For this showcase we used DMXzone Bootstrap for the responsive layout of the page and DMXzone Lightbox to offer a larger image preview on click.

  • Fitness Mobile App Showcase

    For this showcase we used DMXzone Bootstrap for the page layout and Bootstrap Elements for the download now button and labels. For the icon rotation on hover we used Universal CSS Transforms: Rotate ...

  • Weather Info Showcase

    For this showcase we used DMXzone Bootstrap for the fully responsive design and DMXozne Bootstrap Elements for the page content, where we added headings, paragraphs and text.

  • Restaurant Directions Showcase

    For this showcase we created a search field for directions, using DMXzone Google Maps and its Google Maps Directions Add-on. Also the search term is executed with Ajax Autocomplete, which can be used ...

  • Top Beaches Showcase

    For this showcase we used DMXzone Bootstrap for the responsive layout and DMXzone Bootstrap Elements for the view on the map labels. The images are navigating the DMXzone Google Maps through the ...

  • Photo and Video Services Showcase

    For this showcase we used Advanced HTML Editor 3 and its Online Page Editor Add-on to create a page that is editable in the browser. To access the editor, press CTRL+SHIFT+2 and use username: demo; ...

  • Admin Panel Showcase

    For this showcase we used Advanced HTML Editor 3 and its File Manager and Image Gallery Add-ons to create an admin panel for a custom CMS. Also the layout has been designed with DMXzone Bootstrap and ...

  • Artist Personal Page Showcase

    For this showcase we used 3 amazing DMXzone extension to design a page that can be edited directly in the browser. The layout is created with the DMXzone Bootstrap and the edit is executed with ...

  • Coming Soon Page Showcase

    For this coming soon showcase page we used the Fish Eye Menu that gives fantastic fluid look to the social network icons and the DMXzone Bootstrap for the page layout.

  • Personal Portfolio Showcase

    For this showcase we used the free DMXzone Bootstrap extension to create the fully responsive design layout and the Animated Thumbnail Gallery for the images thumbnails that you can preview their ...

  • Interior Project Showcase

    For this showcase we used the DMXzone Bootstrap in order to create the page layout and the CSS Image Gallery for the images overview that can be changed with the gallery navigation or the thumbnails.

  • Digital Cameras Showcase

    For this showcase we used DMXzone Bootstrap for the responsive layout and Bootstrap Elements for the print it and show availability buttons. The printing action is executed with DMXzone PrintIt and ...

  • HTML5 Data Bindings Preview Showcase

    For this showcase we used HTML5 Data Bindings in order to retrieve the info about the houses, without refreshing the page, using a local JSON file that contains the image thumbnail, label, badge and ...

  • Car Dealer with Bootstrap Elements Showcase

    For this showcase we used several DMXzone Bootstrap elements for the car specifications content: heading for the titles, labels and progress bars for the specifications and pagination for the ...

  • Car Features and Test Drive Showcase

    For this showcase, again we used the DMXzone Bootstrap for the responsive one page scrollable layout and the DMXzone Bootstrap Elements for the content that features: list, table, headings, text and ...

  • Travel Agency Destination Page Showcase

    For this showcase we used DMXzone Bootstrap and Bootstrap Elements to design the destination page of our travel agency website. Also we added a location with DMXzone Google Maps.

  • Travel Agency with Bootstrap Elements Showcase

    In this showcase we designed a travel agency site only with DMXzone Bootstrap extension for the responsive layout and DMXzone Bootstrap Elements for the content. We used badges and labels, images, ...

  • Media, Layouts, Badges, Labels and Alert Bootstrap Elements

    For this showcase we created a travel blog with DMXzone Bootstrap for the layout and DMXzone Bootstrap Elements for the content. We have images preview with thumbnails and polaroid-like styling to ...

  • Images, Buttons and Pagination Bootstrap Elements

    For this showcase we designed a fully responsive product page with DMXzone Bootstrap. The page content is created with the DMXzone Bootstrap Elements. The products are presented with image elements ...

  • Typography, Table and Form Bootstrap Elements

    For this showcase we used DMXzone Bootstrap Elements to build a page with info and specifications for a Rent-a-Yacht company. We have title and paragraph for the basic description, definition list ...

  • Restaurant Menu Showcase

    For this showcase we used one free and two commercial DMXzone extensions to create one page restaurant menu with great effects and responsive layout and text. For the welcome text in the header we ...

  • Interior Design Company Showcase

    For this showcase we used the Universal Responsive Bootstrap Template that features the DMXzone Bootstrap tool for the design layout, HTML5 Image Enhancer for the images effects on mouse over and ...

  • Urban Architecture Showcase

    For this showcase we used the DMXzone Bootstrap for the fully responsive design and the HTML5 Image Enhancer to add awesome effects to the images thumbnails. for that purpose we used the tint effect, ...

  • Sky Diving School Showcase

    For this showcase we used the Starter template, which is one of the supplied templates in DMXzone Bootstrap. Also we added the images in a beautiful slideshow with the help of DMXzone Nivo Slider.

  • Online Cookbook Showcase

    For this online cookbook showcase, we divided the content into DMXzone Tabs to separate the different types of recipes. Also, the beautiful, fully responsive design for different devices is executed ...

  • Golf Club Showcase

    For this gold club showcase page we used the DMXzone Nivo Slider for the images slideshow and DMXzone Bootstrap for the responsive layout.

  • Surfing Club Showcase

    For this showcase we used the DMXzone Bootstrap extension in order to create a responsive grid layout so that our page looks awesome on mobile devices, tablets and desktop browsers. Also we used the ...

  • Green Business Page Showcase

    For this showcase we used the DMXzone Bootstrap extension to create a fully responsive design layout suitable for mobile devices, tablets and desktop browsers. We also included the DMXzone Nivo ...

  • Game Site Showcase

    For this showcase we used the DMXzone Bootstrap in order to create a responsive design that looks amazing on any mobile phone, tablet and modern desktop browser. The images preview are awesomely ...

Videos


Requirements

Type: Suite
Product: Dreamweaver CS5.5, Dreamweaver CS6, Dreamweaver CC
Browser: IE 7, Chrome 9+, IE 8, Opera 10+, IE 9, Safari 5+, Firefox 4+, Chrome 10+, Opera 11
Used Technologies: CSS


History

Version 1.2.1

Version 1.2.0

Version 1.1.0

  • New DMXzone Boostrap Options Command - You can choose how to include your bootstrap on your pages; normal, minified or even through CDN, so you can achieve the fastest performance for your website.
  • New option for automatic file copy and include - If you don't like to automaticaly copy bootstrap files and inclusion, you can switch it off!
  • Updated DMXzone Head Include global component to support full paths from CDN
  • Included latest jQuery 1.10.1
  • Improved Dreamweaver CC installation support

Version 1.0.1

  • NEW: Fully rendering the Twitter Bootstrap icons from Glyphicons in Dreamweaver Design View!
  • NEW: Full support for DMXzone Bootstrap Elements extension!
  • Fixed Bootstrap dependent files copy on clean Dreamweaver installations
  • Fixed Starter pages not copying the main bootstrap.css file
  • Set minimum requirement to DW CS5.5

 

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com which is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Share this Article