I want to share this technique I've used to implement Bootstrap's grid system for some of the content areas on a customers website.
The same goal has already been reached by the Alloy sample site, but to be frank that solution is quite complex, and it forces itself into all content areas. The first version did not do this, but instead it had no AJAX support in On Page Editing.
My way is a little simpler:
1) Define display options as follows: Half (6 cols), Third (4), Two Thirds (8), Fourth (3), Full (12). [code]
2) Paste the code for the Bootstrap Content Area Renderer in your project. Needs to be synced with 1. [code]
3) Create /Views/Shared/DisplayTemplates/Bootstrap.cshtml, calling the renderer. [code]
4) Render your property by specifying Tag = "Bootstrap" in the PropertyFor call. [code]
5) When dragging/dropping the blocks in this Content Area, lines will be horizontal as the containers are display: block. So, set them to float: left and also set their width to 100% (otherwise, floats collapse and will surely impact rendering in some situations). [code]
You're done!
This is created as a Gist on GitHub: https://gist.github.com/bornemix/760806c3e43864ac96c4
Hello,
I want to share this technique I've used to implement Bootstrap's grid system for some of the content areas on a customers website.
The same goal has already been reached by the Alloy sample site, but to be frank that solution is quite complex, and it forces itself into all content areas. The first version did not do this, but instead it had no AJAX support in On Page Editing.
My way is a little simpler:
1) Define display options as follows: Half (6 cols), Third (4), Two Thirds (8), Fourth (3), Full (12). [code]
2) Paste the code for the Bootstrap Content Area Renderer in your project. Needs to be synced with 1. [code]
3) Create /Views/Shared/DisplayTemplates/Bootstrap.cshtml, calling the renderer. [code]
4) Render your property by specifying Tag = "Bootstrap" in the PropertyFor call. [code]
5) When dragging/dropping the blocks in this Content Area, lines will be horizontal as the containers are display: block. So, set them to float: left and also set their width to 100% (otherwise, floats collapse and will surely impact rendering in some situations). [code]
You're done!
This is created as a Gist on GitHub: https://gist.github.com/bornemix/760806c3e43864ac96c4