Bootstrap Layout generator using Angular js


Added by: Sam Deering





Stars: 148

Watchers: 148

Forks: 45

Module Description

BootStrap 3 Grid Builder


TL;DR | A quick layout generator for Bootstrap 3.Visit the link above

Bootstrap 3 has a new super-powerful grid system with four tiers of grid classes—phones, tablets, desktops, and large desktops—you can do some super crazy awesome layouts.But it quickly gets complicated as you try to wrap your head around it.Bootstrap 3 is more flexible in terms of what it can do but keeping 3 different layouts in your head simultaneously is very complex.

The Bootstrap 3 Grid Builder enables to quickly create responsive layouts using just drag and drop. It allows you to quickly test layouts on all types of devices fast & prototype and iterate faster. You can increase widths and offsets and , add different spans of columns while the Builder takes care of the optimization of html code generated.

Thanks to :


  • [x] Drag and Drop functionality
  • [] Nested Grids
  • [x] Pre-made Templates
  • [x] Add a delete column button
  • [x] Instead of toolbar, Use left-click popovers
  • [x] Add buttons inside the cols
  • [] KeyBoard Shortcuts
  • [] Migrate to Grunt.js
  • [x] Content PlaceHolders
  • [x] Tutorial based on Chardin-js
  • [] Undo and Redo functionality
  • [] Copy and Paste functionality
  • [x] Save and Reload functionality
  • [] Html generation should be done via $compile and should be instant
  • [] Implement push-pull classes of bootstrap 3
  • [] Make a Grid Builder for Bootstrap 2.3.2 ,Foundation and other grid systems
  • [] Stamp , Unstamp Elements using Packery

Licensed under the Apache License v2.0

Module stats last updated: 2018-01-12 15:00:07

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!