Back to Top
The nuts and bolts for
Creative web development

DMXzone Bootstrap Elements

“35 ready to go elements for DMXzone Bootstrap”

DMXzone Bootstrap Elements is an amazing addition to the DMXzone Bootstrap extension. With its 35 extremely useful and ready to go elements you can design fantastic pages within minutes, directly in Dreamweaver. The extension comes with easy accessible elements panel and inspector floating panel where you can customize each element with just a few mouse clicks.

It includes a wide range of elements for typography, tables, forms, buttons, images, icons, pagination, layouts, thumbnails, media and many more. Supplied with lightweight designs, the elements can be styled for any page layout. Build your fully responsive pages with DMXzone Bootstrap and select from 35 different, fully customizable Bootstrap elements to bring your website to a whole new level!

DMXzone Boostrap Elements is only compatible with DMXzone Bootstrap. If you own DMXzone Bootstrap 3, please get Bootstrap Elements 3!

Features

Typography

Title
The default title element is H3. You can change it with another heading between H1 and H6.   From the element properties you can change the alignment to be none, left, center or right. Also you can choose from six default lightweight styles (emphasis).



Paragraph
Paragraphs are by default 14px font size with a line height of 20px. In addition, paragraphs receive a bottom margin of half their line-height.



Address 
Add contact information such as address, name, phone number, etc.




Blockquote
You can quote any block of content from another source within your page. Blockquote can be aligned to the left or to the right.



Unordered List
Add a list of items with bullets, where the order doesn't matter. From the element properties you can remove the default styling and also show all list items on a single line (inline).



Ordered List
Add a list of items with numbering, where the order does matter. From the element properties you can remove the default styling and also show all list items on a single line (inline).



Definition List
Add a list of terms, features or anything that needs a definition or explanation. From the element properties you can make the list vertical as well.



Tables

Table
Add a table with as many rows and columns as you wish. From the element properties you can choose the table row style and also style the table with borders and rounded corners. You can enable the rows hover state.



Forms

Form
Add a form where your users enter data for processing. From the element properties, the form can also be inline.



Search Form
Add a search field to your forms, where your users will type in keywords to search through the content.



Horizontal Form
In the horizontal form, the labels and input fields are on the same line.



Control Group
Add a simple input field with a label. You can customize the labels with some predefined lightweight styles.

Buttons 

Button
You can add buttons with different sizes (large, default, small and mini) and choose one of the predefined lightweight designs. From the element properties you can make a button non-clickable by disabling it or make it fit the cell entirely by width. Note that the rounded corners are not supported in IE9.



Anchor Button
If you need to use a text link that looks like a button, anchor button element is the right one to choose.



Button with icon
There are 140 icons supplied in the extension that you can use on any button size or design. Each icon has a white version for dark button backgrounds.



Button group
You can add as many buttons next to each other as you need. They can be with or without styling and icons. The alignment can be horizontal as well as vertical.



Images

Image
There are 4 styles you can add to the images - default, rounded corners, circle and polaroid-like. Note that the rounded corners and circle are not supported in IE7-8 due to the lack of support.



Icons 

Icon
140 icons in sprite form, available in dark gray (default)for light backgrounds and white for dark ones.



Pagination 

Pagination
Add a simple pagination, great for apps and search results. From the element properties you can choose the position and the size of the paginator.



Pager
Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.



Aligned pager
Quick links for simple pagination aligned to each side.



Breadcrumb
Add easy navigation that allows users to keep track of their locations within programs or documents.


Labels and Badges

Label
Create eye catching labels and annotate text with inline labels. From the element properties you can style the labels with lightweight designs.




Badge
Add small and simple badges for displaying an indicator or count. They're commonly found in email clients or on mobile apps for push notification. From the element properties you can style the badges with lightweight designs.



Layouts

Hero unit
Add a lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites. From the element properties you can add a simple effect to give it an inset effect with padding and rounded corners.



Page header
Add text that is separated from the main body of text and appears at the top. From the elements properties it can be aligned center, left and right.



Text
Use this element to add content on your page with a header, paragraph and button.



Thumbnails

Thumbnails
Add grids of photos, videos, products or anything that needs thumbnail display.



Advanced thumbnails
Add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

 



Progress bars

Progress bar
Visualize the progression of an action with a progress bar. From the element properties you can customize the color and add striped effect. Also you can animate the stripes during process. Note that the animation is not supported in any IE version.



Stacked progress bar
Put multiple bars into the same progress bar to stack them. From the element properties you can use the same lightweight styles like the ones for buttons. Also they can be striped and animated.

Note: Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox. Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

Alerts 

Alert
Add a simple text for a basic warning alert message with a close button that can be styled.

 


Alert Block
Add a longer warning alert message with description and close button.

 


Media

Media object
Float a media object (images, video, audio) to the left or right of a content block.

 



Media list
You can use media inside list, which is useful for comment threads or articles lists.

 

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 ...

  • 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 ...

  • 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.

  • 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 ...

  • 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.

  • 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 ...

  • 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 ...

  • 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 ...

  • 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 ...

  • 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 ...

  • Bootstrap Elements Preview Showcase

    This showcase is just a sneak preview of some of the 35 ready to go Bootstrap Elements included in the DMXzone Bootstrap Elements extension. We have group buttons for the registration as well as the ...

Videos


Requirements

Type: Behavior
License: External link
Product: Dreamweaver CS5.5, Dreamweaver CS6, Dreamweaver CC
Browser: IE 7, Firefox 3.6+, Chrome 9+, IE 8, Safari 4+, Opera 10+, IE 9, Safari 5+, Chrome 10+, Opera 11
Used Technologies: CSS, JavaScript


This Extension Requires:


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 ...

Read More

History

Version 1.0.2

Version 1.0.1

  • Support for the latest DMXzone Bootstrap 1.1.0
  • Updated DMXzone Head Include global component to support full paths from CDN

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