Create a 5-column Grid in Visual Composer
Latest update: February 4, 2019 | Reading time: 1 to 2 minutesIn order to achieve a 5-column grid in Visual Composer follow the steps below:
1) Open the backend Visual Composer page builder and add a Raw HTML shortcode element in your page.
2) Paste the following markup, replacing the sample <p>BLOCK</p> with the desired markup for each of the 5 blocks:
<div class="fivegrider"> <p>BLOCK</p> </div> <div class="fivegrider"> <p>BLOCK</p> </div> <div class="fivegrider"> <p>BLOCK</p> </div> <div class="fivegrider"> <p>BLOCK</p> </div> <div class="fivegrider"> <p>BLOCK</p> </div>
3) Paste the following CSS in your child theme’s style.css:
/*------ 5 COLUMN GRID ------*/ .fivegrider { width : 20%; float : left; position : relative; min-height : 1px; padding-right : 10px; padding-left : 10px; } @media (max-width: 1024px) { .fivegrider { width : 33%; } } @media (max-width: 768px) { .fivegrider { width : 50%; } } @media (max-width: 480px) { .fivegrider { width : 100%; } } /*------ 5 COLUMN GRID ------*/
References FYI: https://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap/22799354#22799354