This Plugin easily adds responsive ( BootStrap ) columns layout into posts and pages by wrapping content with a shortcode.
Use the Plugin's button on the editor to add columns or simply copy and paste the beneath codes. Use the shortcode in the text widget or posts/pages like this:
- 2 column layout: -
[bscolumns class="one_half"]Your Content Goes here[/bscolumns]
[bscolumns class="one_half_last"]Your Content Goes here[/bscolumns]
[bscolumns class="clear"][/bscolumns]
- 3 column layout: -
[bscolumns class="one_third"]Your Content Goes here[/bscolumns]
[bscolumns class="one_third"]Your Content Goes here[/bscolumns]
[bscolumns class="one_third_last"]Your Content Goes here[/bscolumns]
[bscolumns class="clear"][/bscolumns]
- 4 column layout: -
[bscolumns class="one_fourth"]Your Content Goes here[/bscolumns]
[bscolumns class="one_fourth"]Your Content Goes here[/bscolumns]
[bscolumns class="one_fourth"]Your Content Goes here[/bscolumns]
[bscolumns class="one_fourth_last"]Your Content Goes here[/bscolumns]
[bscolumns class="clear"][/bscolumns]
- 5 column layout: -
[bscolumns class="one_fifth"]Your Content Goes here[/bscolumns]
[bscolumns class="one_fifth"]Your Content Goes here[/bscolumns]
[bscolumns class="one_fifth"]Your Content Goes here[/bscolumns]
[bscolumns class="one_fifth"]Your Content Goes here[/bscolumns]
[bscolumns class="one_fifth_last"]Your Content Goes here[/bscolumns]
[bscolumns class="clear"][/bscolumns]
- 6 column layout: -
[bscolumns class="one_sixth"]Your Content Goes here[/bscolumns]
[bscolumns class="one_sixth"]Your Content Goes here[/bscolumns]
[bscolumns class="one_sixth"]Your Content Goes here[/bscolumns]
[bscolumns class="one_sixth"]Your Content Goes here[/bscolumns]
[bscolumns class="one_sixth"]Your Content Goes here[/bscolumns]
[bscolumns class="one_sixth_last"]Your Content Goes here[/bscolumns]
[bscolumns class="clear"][/bscolumns]
- 1/3 and 2/3 column layout: -
[bscolumns class="one_third"]Your Content Goes here[/bscolumns]
[bscolumns class="two_third_last_clear"]Your Content Goes here[/bscolumns]
[bscolumns class="clear"][/bscolumns]
- 2/3 and 1/3 column layout: -
[bscolumns class="two_third"]Your Content Goes here[/bscolumns]
[bscolumns class="one_third_last_clear"]Your Content Goes here[/bscolumns]
[bscolumns class="clear"][/bscolumns]
The columns are responsive and will occupy the whole width of your screen.
Checkout the demo
here
With new plugin, you can enter the column combination from Tinymce button like 1/3+2/3. This will give you one third of column, and 2 third of the column.
If you have any questions and suggestions, leave a comments or post it in support forum. Thank you!