Boxes Placement

Many users of WP Visual Slide-Box Builder have asked me how do they place boxes next to each other (in a row) in a page. Well I have decided to answer all of you with this simple post, which will help future users with the same question.

Horizontal Placement

so you want to place your boxes like this:

You need columns layout. It is actually pretty simple to do. In theory all you need is to float divs and assign them a width.

There are 2 easy solutions: (there are actually many more but 2 is more than what we need for this simple task)

Using Bootstrap

I am a big fan of bootstrap myself. And it is pretty easy to incorporate with WordPress with the aid of plugins. Here is a plugin I use:

http://wordpress.org/plugins/wordpress-bootstrap-css/

if you want to use this solution what you will need to do is install the plugin and then place your boxes in a page or post this way:

The code above will place 4 boxes horizontally. If you notice “span3″ as the class is what define the width of the columns. Bootstrap uses column system of 12 so 12/3 = 4. If you want 2 boxes next to each other instead of 4 then you will do span6, if you want 3 you will do span4 etc…

Dont forget that you need to select the version of bootstrap to load once you install the Bootstrap plugin:
2014-03-08_1811

But if you don’t want to install bootstrap just to accomplish this simple task of placing the boxes horizontally that it is totally fine here is an alternative:

Custom CSS columns

Solution 2 is more lightweight, all you need to do is add these simple css classes to your css file, and then wrap your boxes around a div that has such class (wp_col4 allows you to place 4 boxes, wp_col3 allows you to place 3 and so on so forth)

.wp_col4{
float:left!important;
width:25!important;
}
.wp_col3{
float:left!important;
width:33!important;
}
.wp_col2{
float:left!important;
width:50!important;
}

I hope this answers your questions. If you still need assistance please post your questions on the forum and I will be glad to help you.

Thank you for using WordPress Visual Slide-Box Builder

Profile photo of Enmanuel Corvo

Enmanuel Corvo

Software Engineer at LiveAnswer, Inc.
Enmanuel Corvo is a passioned software engineer who enjoys contributing to the web community by creating plugins, blog post and providing technical help to those who need it.
Profile photo of Enmanuel Corvo

Latest posts by Enmanuel Corvo (see all)

Posted in Uncategorized.

4 Comments

  1. Pingback: {xifaxan versus cipro|atenolol xifaxan|rifaximin flagyl|cipro xifaxan|tylenol xifaxan|zoloft xifaxan|azithromycin xifaxan}

  2. Pingback: Rod Plant

Leave a Reply