Back to Top
The nuts and bolts for
Creative web development

DMXzone Bootstrap 3

“Next generation perfect site layout in a few minutes”

DMXzone Bootstrap 3 is the next generation Dreamweaver extension based on the newest Twitter Bootstrap. Supplied with four grid systems, it's responsive by default and makes it easy to create great-looking web pages and web apps, which are automatically compatible with various devices.

Full support for Bootstrap 3 mobile first design and the dedicated floater gives you a quick access to all the options you need. Additionally, there's an integrated converter that transforms Bootstrap 2 based pages to Bootstrap 3 in seconds.

The great design view integration allows you to add/delete cells, rows and containers as well as merge cells, duplicate and spread them in just a mouse click time. 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.

Bootstrap 3 Elements and Bootstrap 3 Navigation are already available!

Features

General Features

  • Full support for the Bootstrap 3 mobile first design - Due to the major changes in the Grid, Bootstrap 3 targets smaller devices first and then expands components and grids (cascades up) for larger screens. When you declare a specific grid size, that is the grid for that size and above.


  • Bootstrap 3 grid dedicated floater - With the greatly helpful and easy accessible floating panel you have all the needed options just a mouse click away. 


  • Design for each device differently, directly in Dreamweaver - There are four Grid systems included in Bootstrap 3 for extra small devices, such as phones < 768px, small devices (tablets>= 768px), medium devices (desktops>= 992px) and large devices (desktops>= 1200px).


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


  • Twitter Bootstrap 12-column responsive grid - It includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.


  • Support for advanced grid layouts and nested columns - You can add as many rows as you wish within a column and it's incredibly easy and much more intuitive!


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


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


  • DMXzone Bootstrap 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
  • Duplicate cell - will duplicate the 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

Cell properties

  • Increase offset - increases the number of columns before the cell
  • Decrease offset - decreases the number of columns before the cell
  • Increase push - will increase the number of pushed columns in the grid right
  • Decrease push - will decrease the number of pushed columns in the grid right
  • Increase pull - will increase the number of pulled columns in the grid left
  • Decrease pull - will decrease the number of pulled columns in the grid left
  • 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


  • Car Configurator Showcase

    For this showcase we designed an awesome car configuration page where we used HTML5 Data Bindings and DMXzone Database Connector to connect to our database where our images are stored. Also we used ...

  • Sandstone Design App Showcase

    For this showcase we used the Extended Bootstrap 3 Collection which features DMXzone Bootstrap 3 for the responsive layout, Elements for the content, Navigation for the menu and also the sandstone ...

  • Extended Dynamic Web Store Showcase

    For this showcase we used Extended Dynamic Web Store Collection which features HTML5 Data Bindings and DMXzone Database Connector to connect to our database, DMXzone Bootstrap 3 for the great page ...

  • Horse Farm Showcase

    For this showcase we used Advanced Tooltips to enhance the description which appears on hover. Also we added sound that you can play on mouse click, and DMXzone Bootstrap 3, Navigation, Elements and ...

  • Web MP3 Player Showcase

    For this showcase we used DMXzone Bootstrap 3 for the responsive layout, DMXzone Bootstrap 3 Elements for the page content, DMXzone bootstrap 3 Navigation for the page menu and also DMXzone Font ...

  • Recipes Showcase

    For this showcase we used the Extended Bootstrap 3 Collection which features DMXzone Bootstrap 3 for the fully responsive layout, DMXzone Bootstrap 3 Navigation for the menu and DMXzone Bootstrap 3 ...

  • Luxury Yachts Showcase

    For this showcase we used DMXzone Bootstrap 3 to create the responsive page layout and DMXzone Bootstrap 3 Elements for the page content. For the HTML elements of the content we also used HTML5 ...

  • Restaurant Weekdays Specials Showcase

    For this showcase we used DMXzone Bootstrap 3 and its Elements to create the page layout and its content. Thanks to HTML5 Animate CSS we managed to animate the HTML5 Data Bindings repeat region. In ...

  • Animated Restaurant Showcase

    For this showcase we designed an amazing page which triggers onload animations with the help of HTML5 Animate CSS. The layout is created with DMXzone bootstrap 3, DMXzone Bootstrap 3 Navigation and ...

  • Animated Icons Showcase

    For this showcase we used DMXzone Bootstrap 3 and Navigation for the responsive layout. The page content features all 71 new shiny icons included in the latest version of DMXzone Font Awesome. ...

  • Web Development Company Showcase

    For this showcase we used the Extended Bootstrap 3 Collection in order to design an awesome Development Company website. The page features fully responsive layout with animated content, great ...

  • Extended Bootstrap 3 Store Showcase

    For this showcase we used the entire Extended Bootstrap 3 Collection, which includes various DMXzone extensions. The responsive layout, content, navigation and the design theme are created with all ...

  • Interactive CV Showcase

    For this showcase we designed animated timeline with HTML5 Animate CSS and branded navbar, using DMXzone Bootstrap 3, Elements and Navigation.

  • Responsive Animated Portfolio Showcase

    For this showcase we used DMXzone Bootswatch flatly theme, DMXzone Bootstrap, Elements and Navigation for the page layout and content. Also the images are stored in a local JS file, using HTML5 Data ...

  • Mauritius Guide Showcase

    For this showcase we used the Yeti themed which is included in the DMXzone Bootswatch. We also used DMXzone Bootstrap 3, Elements and Navigation to create a responsive page and animated its elements ...

  • DMXzone Bootswatch Showcase

    For this showcase we used one of the 15 amazing designs supplied in the DMXzone Bootswatch extension. We first built the design and the content using DMXzone Bootstrap 3 and Elements, then used ...

  • Apparel Store Showcase

    For this showcase we build an apparel store with out DMXzone Bootstrap 3 Collection. In order to create the layout and the page content we used DMXzone Bootstrap 3 and Elements. The page features a ...

  • Travel Agency Showcase

    For this showcase we used the full DMXzone Bootstrap 3 Collection, which features DMXzone Bootstrap 3 for the responsive page layout, DMXzone Bootstrap 3 Elements for the page content and DMXzone ...

  • Luxury Beach Villa Showcase

    For this showcase we used DMXzone Bootstrap 3 Navigation in order to create a fully responsive navbar, which becomes collapsible when viewed on mobile devices. We also added a fully responsive ...

  • Restaurant Onscroll Menu Showcase

    For this showcase we used DMXzone Bootstrap 3 for the page layout and DMXzone Bootstrap 3 Navigation for the top menu and is placed fixed on the top. The menu on the sidebar is stacked, which ...

  • Graphic Designer Portfolio Showcase

    For this one page scrollable showcase we used DMXzone Bootstrap 3 and the Elements for the responsive design and HTML5 Animate CSS for the content elements animations. Using DMXzone Bootstrap 3 ...

  • Test Drive Showcase

    For this showcase we created a custom slider with HTML5 Animate CSS which is also dynamic and fully responsive. It comes with custom control buttons to navigate through the images that are retrieved ...

  • Luxury Veach Village Showcase

    For this showcase we used DMXzone Bootstrap 3 and its Elements for the page layout, and DMXzone Font Awesome for the beautiful icons. The page content has been animated onscroll with HTML5 Animate ...

  • Task Management App Showcase

    In this task management app demo page you can create tasks, see what you need to do, track your progress and see what you've already done. The page has been created using DMXzone Boostrap and ...

  • Web App Landing Page Showcase

    In this showcase we used DMXzone Bootstrap 3 for the page layout, DMXzone Bootstrap 3 Elements for the content, DMXzone Font Awesome for the customized icons and DMXzone Nivo Slider for the amazing ...

  • Joe's Portfolio Showcase

    For this showcase we used DMXzone Font Awesome for the beautiful icons which are customized through the CSS so that the color matches our page design. Also we used them to appear on mouse over for ...

  • DMXzone Font Awesome Preview

    For this showcase we used DMXzone Bootstrap 3 and its Elements for the page layout and also DMXzone Font Awesome for the icons, which are used in different size and colors.

  • Photography Print Store Showcase

    For this showcase we used DMXzone Bootstrap 3 for the responsive page layout and also its Elements add-on for the buttons, which appear on mouse over. The shopping cart is executed with Sliding ...

  • Responsive Online Store Showcase

    For this showcase we used HTML5 Data Bindings and DMXzone Database Connector to connect to our database in order to retrieve the products and HTML5 Data Bindings SEO for the content to be searchable ...

  • Admin Panel With Realtime Preview

    For this showcase we used Advanced HTML Editor 3 and HTML5 Data Bindings on an article edit page. The changes that we make in Advanced HTML Editor 3 are immediately applied in the Preview section of ...

  • Architecture Studio Showcase

    For this showcase we used the fully customizable Responsive Bootstrap 3 Sliding Template, which features three amazing DMXzone extensions. Using DMXzone Bootstrap 3, we designed the fully responsive ...

  • Car Rental Service Showcase

    Fot this car rental service showcase page we used the Responsive Bootstrap 3 Sliding Template, which is only built with three DMXzone extensions - DMXzone Bootstrap 3, DMXzone Bootstrap 3 Elements ...

  • Responsive Island Villa Showcase

    For this showcase we used the Responsive Bootstrap 3 Sliding Template and customized it for a villa web page. The different images of the villa are presented in the awesome HTML5 Slideshow and the ...

  • Digital Photo Exhibition

    For this showcase we used DMXzone Bootstrap 3 for the page layout, DMXzone Bootstrap 3 Elements for the content and DMXzone Supersized to display the amazing images.

  • Responsive Fullscreen Gallery Showcase

    For this showcase we used DMXzone Supersized to show our images in the best possible way - fullscreen, with thumbnails preview for quick navigation. For the page layout we used DMXzone Bootstrap 3 ...

  • Interior Design Studio Showcase

    For this showcase we used DMXzone Supersized for the background image, DMXzone Bootstrap 3 for the design layout and Elements for the page content.

  • Responsive Cruise Services Showcase

    For this showcase we used titles, images, buttons with icons, icons and text elements for the content with the help of Bootstrap 3 Elements, and also Bootstrap 3 for the fully responsive design.

  • Valentine's Gift App Showcase

    This showcase is build completely with only two DMXzone extensions - DMXzone Bootstrap 3 and DMXzone Bootstrap 3 Elements. The first one is needed for the responsive layout and the second one for the ...

  • UX Designer Portfolio Showcase

    For this showcase we used several of the awesome elements included in DMXzone Bootstrap 3 Elements extension. Starting with titles, we also added button with an icon, icons for the different section ...

  • Responsive Personal Blog Showcase

    For this showcase we used DMXzone Bootstrap 3 for the fully responsive page layout that fits any screen size. Also we used image, paragraph, title, button, label and pagination elements for the ...

  • Bootstrap 3 Elements Preview Showcase

    For this showcase we used DMXzone Bootstrap 3 for the fully responsive layout and DMXzone Bootstrap 3 Elements such as headings, buttons, form, responsive images, circle images and page header for ...

  • Bootstrap 3 Landing Page Template Showcase

    This showcase has been created with the Bootstrap 3 Landing Page Template and customized with DMXzone Bootstrap 3 and HTML5 Parallax Slider. The slider is visible on any screen device except for ...

  • Restaurant Daily Menu Showcase

    This is another showcase where we used Responsive Bootstrap 3 Portfolio Template and turned it into a restaurant menu page with great image effects on mouse over.

  • Home Design Store Showcase

    For this showcase we used DMXzone Bootstrap 3 to design the completely responsive page layout. Also we used HTML5 Image Enhancer in order to add beautiful effects to the images. In our case we used ...

  • Responsive Bootstrap 3 Portfolio Showcase

    This showcase has been created with the Responsive Bootstrap 3 Portfolio, DMXzone Bootstrap 3 to be fully responsive, HTML5 Image Enhancer for the amazing gray scale image effects, and DMXzone ...

  • Minimalistic Responsive Portfolio Showcase

    This fully responsive and minimalistic layout showcase focuses on the images in the content, which are available on any device. The additional text description is only visible on desktop and large ...

  • Custom Motorcycles Showcase

    For this showcase we created a page with DMXzone Bootstrap 3 that contains text and image content that's available on any screen size, from small devices to large desktop screens.

  • Responsive Web Design Studio Showcase

    Using mobile-first approach for this showcase we were able to add/remove certain parts of the content for various devices. When browsing the page from a phone or tablet, the text in the header ...

  • Digital Agency Showcase

    For this showcase we used DMXzone Bootstrap 3 that's completely responsive and looks amazing on smart phones, tablets, desktop and large desktop browser. Users' Tweets are only visible in large view ...

Videos



Full Width Layout with DMXzone Bootstrap 3


Adding a Scalable Headline in your Page Header


Create Fixed to Bottom Icon Menu


Using DMXzone Bootswatch


Add Dynamic Dropdowns to a Navbar


Add Contextual Dropdowns to your Content


Create Onscroll Navigation


Create a Vertical Sidebar Nav


Use Nav Dropdowns in DMXzone Bootstrap 3 Navigation


Add DMXzone Bootstrap 3 Navigation Navbar


Add DMXozne Bootstrap 3 Navigation Nav


Enable DMXzone Bootstrap 3 Navigation


Control the Returned Results by HTML5 Data Bindings


Validating If a Record Exists in a Database


Custom Supersized Controls with Bootstrap 3 Elements


Dynamic Responsive Thumbnail Gallery with Bootstrap 3


Using DMXzone Bootstrap 3 List Group and Panel Elements


Using Bootstrap 3 Thumbnails and Label Elements


Using Bootstrap 3 Button Elements


Using Bootstrap 3 Table Elements


Using Bootstrap 3 Typography Elements


Accessing DMXzone Bootstrap 3 Elements


Using HTML5 Parallax Slider on Responsive Bootstrap 3 Pages


Convert Bootstrap 2 Based Page to Bootstrap 3


Building Page with Mobile First Approach


Building Nested Layouts with DMXzone Bootstrap 3


Using the Cell Offset Options in DMXzone Bootstrap 3


Using Pull and Push Options in DMXzone Bootstrap 3


Inserting DMXzone Bootstrap 3 on a Page

Requirements

Type: Behavior
License: External link
Product: Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5.5, Dreamweaver CS6, Dreamweaver CC
Used Technologies: CSS, Responsive
Screen Shot: External link
Tags: twitter, bootstrap 3, responsive, layour


History

Version 3.1.3

  • Included the latest jQuery 1.11.1
  • Improved for Dreamweaver CC 2014
  • Improved for DMXzone Extension Manager

Version 3.1.2

Version 3.1.1

  • Support for the new Fluid Containers in Bootstrap 3
  • Full support for the new DMXzone Bootstrap 3 Navigation extension
  • Improved Bootstrap 3 CDN linking
  • Lowered extension requirements! Now it works in DW CS3+ but the rendering in Dreamweaver design view might not be optimal for versions under DW CS5.5 due to lack of media query support and modern browser rendering engine. Still, the extension is fully functional.

Version 3.1.0

  • Allow custom bootstrap builds with own paths to be used in the DMXzone Bootstrap 3 Options
  • Performance Speed gain in Dreamweaver design view rendering
  • Improved selection retaining after adding new grid rows
  • Improved UI for Dreamweaver on a Mac
  • Included the latest Bootstrap 3.1.1

Version 3.0.2

  • Full support for DMXzone Bootstrap 3 Elements
  • Included the latest Bootstrap 3.1.0
  • Full support for rendering the bootstrap glyphicons in Dreamweaver Design View
  • Improved pagination rendering in Design View
  • Great Rendering speed performance increased in Design View
  • fixed DW Mac bug causing crashes on load
  • Improved DW design view rendering of lists and form controls

Version 3.0.1

  • Greatly improved the speed of the page convert from Bootstrap 2 to 3
  • General speed improvement of the Dreamweaver integration
  • Improved Dreamweaver floating panel to be more responsive and retain focus of the current editing selection
  • Fixed some minor editing bugs

 

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