Just like the demo website shows the Media Boxes, this tutorial will help you make them.
You can have 1, 2, 3, 4, or even 6 media boxes, but ideally, the suggested column count would be 2, 3, or 4. Media Boxes can be used for a variety of things, but what you put into them will be up to you. You should also have some basics of HTML and CSS to get creative with them.
Start with a container:
<div class="row"></div>
The above container will start things off, and the next step is to decide how many columns you plan to have. If you want to have 3 like the demo site, then you now need to insert the following code inside the container we just did above:
<div class="col-md-4"></div>
You will make three of these instances, and then inside each one will be your content. These containers we just made will give you a responsive 3 column layout, so your code would look like this:
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
Again, if you want to do what the demo site has, then inside the col-md-3 containers, you can paste the following between the div containers that have the class="col-md-4" in each:
<div class="cir-mediabox1" style="">
<p><img alt="..." src="http://demo.styledthemes.com/circumference-lite/wp-content/uploads/2167437.jpg"></p>
<h3>Media Box – Style 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas posuere tortor, in tempus viverra turpis quis ante nec orci dapibus aliquet eu sed enimusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis tincidunt mauris pulvinar eu. Duis nisl sem, porta nec luctus ac, semper ut nisi.</p>
<p><a class="btn btn-sm" href="#">Sign Up</a></p>
</div>
Replace the above image and text with your own and then you have a basis for the remaining columns.
What About Changing Column Count?
Changing columns to say 4 instead of three, you will change the “col-md-4” class to be “col-md-3” because this theme works off a Bootstrap framework and is laid out with 12 grid columns in width.
If you want 3 columns, each column takes up 4 grid columns each for a total of 12 (because total width is 12 columns wide). If you want 4 columns, then we use col-md-3 because 4 into 12 = 3
If you want 2 columns, then each column needs to take up 6 grid columns in width, which means 6 into 12 = 2 columns. Your div class would then be class=”col-md-6″ so you get 2 columns.