Layout builder
Create bootstrap layouts easily.
-
Drag drop interface
Instant preview of what you are doing
No html coding required!
Work offline
Available for Mac. Windows and GNU/Linux versions coming soon.
How to build a responsive layout in 4 steps
Step 1: Install
Download, install and launch the Bootui layout builder application.
Step 2: Drag and Drop
Click on the bootstrap component you want (on the left hand side) , for example a navbar or a row, Drag and Drop the the selected component from the left hand side panel on the right hand side canvas. You can select a variety of components on the left hand side panel in the user interface and drop them on the right hand side canvas in the UI.
Step 3: Edit (double-click the component)
Double click on the bootstrap component that has been dropped in the right hand side canvas of the software. You will see that a property editor pops up. You modify the brandname that shows up in the navbar. As you edit it you will see that the preview on the bottom is getting updated real time as you type!! Keep repeating steps 2 and step 3 to create multiple components.
Step 4: Publish
Click on the publish button at the bottom of the UI of the bootrap builder. You have just created a responsive layout without writing a single line of code. You will get a neatly organised folder structure containing files and all dependencies. This published structure can be deployed easily. You can use these published files as responsive templates and enhance and build on top of it.
ScreenShot
Why use a tool to create a responsive bootstrap layout?
The effectiveness of having the ability to visually design responsive layout using Bootstrap is amazing. It will enhance your productivity and prevent common mistakes. The draggable elements of bootstrap are a refreshing change over the find code snippet, select, copy, paste, debug , edit cycle that plagues most software developers doing responsive web page coding. You can now focus on design and creative aspects of development instead of balancing tags in your code. As soon as you edit the attributes of an element or a component of bootstrap, you get to see an instant, real-time preview of the changes you are making. For example: when you are typing, each letter will show up in the preview just like you are typing in a WYSIWYG editor !! You don't have to save to preview. You don't have to click on any button to see the preview of the page you are building. You can easily drop elements into other elements. for example: dropping a few columns into a row, or an image into a column. Some of the common elements are navbar, row, column, text, image, carousel, button etc. If an element should not be droppable into another element, a relevant error is popped up. The drop operation is allowed only if it results in a valid output!
Responsive layouts
1. Frameworks
There are many frameworks available for free in the market that allow building of responsive layouts for web pages. Some popular names are Bootstrap, Pure, Foundation, Montage, Skeleton, SemanticUI, Gumby, Siimple etc. All claim easy of use, simplicity, speed and other advantages but so far Bootstrap framework seems to be the most popular framework for building layouts for webpages that are responsive. You could use any framework, but bootstrap layout builder is the one dedicated to Bootstrap framework. In the future we plan to release a tool ( in addition to the bootstrap builder ) that can allow you to build on top of other frameworks of your choice apart from bootstrap. ! Most such frameworks will give you a grid based layout, UI elements like navbar, carousel, button, table etc. Such a grid based design will help you design and customize your web page for multiple form factors such as phones, tablets, laptop, desktop.