11

Bootstrap is a great framework, and I want know if there is a tool that gives you the possibility of dragging html components, re-sizing and moving them, changing colours, all while generating the bootstrap html code.

I don't want to use Dreamweaver because you need to go and add classes and IDs to the html, which could be a pain sometimes.

  • 1
    I dont think that hard thing to do specially if you want to use one specific css, the button and all UI component should be pre-styled, thats the only deference and this could save a lot of time – Kamel Labiad May 10 '13 at 3:19
  • 1
    @DA01 WYSIWYGs are tricky. They keep getting better, but never seem to catch up enough before the web takes a turn and becomes exponentially more complex again. They're at a point where they can work fine for very basic websites that'll run on desktops and laptops, but that seems to be about it. – Eric Aug 1 '13 at 12:41
  • finally this seems an answer for what I was looking for pingendo.com – Kamel Labiad Feb 3 '16 at 0:43
5

Jetstrap is an online tool that lets you drag-and-drop a large set of official Bootstrap components right to your page.

enter image description here

They apparently guarantee responsiveness and clean HTML export.

It's free for one project, and $8 for 10 projects.

  • This is no longer available. – Skelly Feb 10 '17 at 13:57
3

Check out Bootply.com -- It's a free browser-based editor for Bootstrap HTML, JS and CSS.

  • Toolbar with all Bootstrap CSS, Components, and JavaScript
  • Preview in full screen or mobile/responsive
  • Includes FontAwesome, jQueryUI and other Bootstrap extensions
  • Support for Bootstrap 3

UPDATE

Bootply now has support for the upcoming Bootstrap 4.

  • This looks really great solution – Arefe Sep 6 '17 at 10:11
2

Might it be something like this that you are looking for?

http://www.layoutit.com/

Haven't tried it, though.

1

http://stylebootstrap.info/

http://www.bootstrapthemeroller.com/

It's not really drag and drop, but these may be a solution to what you are actually trying to solve - an easy way to customize bootstrap.

0

There is the newest Bootstrap visual editor/builder here:

UMyProto Bootstrap Builder

It's extremely user friendly, you can edit responsive grid in several clicks, add custom CSS styles, change Bootstrap theme through LESS variables, preview/share/download completed HTML files. And the builder works on tablets!

  • It seems gone for good! – Arefe Sep 6 '17 at 10:16
0

I think that dreamweaver cc 2014 has templates that are very similar to bootstrap that you can use right out of the box.

  • Thanks for the contribution and welcome to GraphicDesign! If you have any questions let us know. – Zach Saucier Feb 17 '15 at 17:37
0

Check out this app I developed: Bootstrap 3 drag'and'drop builder

enter image description here

0

Pinegrow is another very good option. Helps you with layouts in Bootstrap & Foundation, which you can easily edit in other apps too.

Not the answer you're looking for? Browse other questions tagged or ask your own question.