Back to Top
The nuts and bolts for
Creative web development

DMXzone Bootstrap 3 Elements

“37 ready to go and fully customizable elements for Bootstrap 3”

DMXzone Bootstrap 3 Elements is the must have add-on if you want to use the full power of DMXzone Bootstrap 3. Its 37 ready to use elements is all you need for designing fully responsive layouts in minutes, directly in your Dreamweaver.

The extension features elements such as tables, forms, buttons, images and icons, and elements for typography, pagination, labels and badges, layouts, thumbnails, progress bars, alerts, media and the brand new list group and panels. All elements are fully customizable through the inspector floating panel and you can choose from various lightweight designs.

You need to have DMXzone Bootstrap 3 installed in Dreamweaver to use Elements!

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 default, left, center, right and justify. Also you can choose from six default lightweight styles (emphasis).



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



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 pulled 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 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 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 also horizontal.



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 and make it more compact by cutting cell padding in half by checking the condensed mode. Now your table can be also responsive.



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.


Buttons 

Button
You can add buttons with different sizes (large, default, small and extra small) 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.



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 200 icons supplied in the extension that you can use on any button size or design.



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 thumbnail. Also you can set the images to be fully responsive.



Icons 

Icon
200 icons in sprite form to be used in buttons, button groups for a toolbar, or prepended form inputs.

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

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




Badges
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



Layouts

Jumbotron
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 IE9 and below versions as well as in older versions of Firefox. Opera 12 does not support animations.



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 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does 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.


List Group

List Group
List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content. You can also add badges to any list group item and it will automatically be positioned on the right.

Panels

Panels
You can put your content within panels to save space on your layout. Easily, you can add headings and make a panel more meaningful to a particular context by adding a background color.

Showcases


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

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

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

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

Videos


Requirements

Type: Behavior
License: External link
Product: Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5.5, Dreamweaver CS6, Dreamweaver CC
Tags: twitter, bootstrap 3, elements, responsive


This Extension Requires:


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

Read More

History

Version 3.1.0

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

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