Box

The box element is a simple container with a different background, some padding, and a box shadow.

Simple Box

<div class="box">
-- your content inside box --
</div>

Primary Background Color Box

<div class="box-primary">
-- your content inside box --
</div>

Secondary Background Color Box

<div class="box-secondary">
-- your content inside box --
</div>

Dark Box

<div class="box-dark">
-- your content inside box --
</div>

Box WIth Title

<div class="box">
<h3 class="box-title">Box With Title</h3>
<p>your content inside box</p>
</div><!-- /box -->

Create Responsive Two Column Box

<div class="items">
<div class="box">
box one content
</div><!-- /box -->
<div class="box">
box two content
</div><!-- /box -->
</div><!-- /items -->

Create Responsive Three Column Box

<div class="items">
<div class="box">
box one content
</div><!-- /box -->
<div class="box">
box two content
</div><!-- /box -->
<div class="box">
box three content
</div><!-- /box -->
</div><!-- /items -->

Create Responsive Four Column Box

<div class="items">
<div class="box">
box one content
</div><!-- /box -->
<div class="box">
box two content
</div><!-- /box -->
<div class="box">
box three content
</div><!-- /box -->
<div class="box">
box four content
</div><!-- /box -->
</div><!-- /items -->

Box With an Image in Left Side

<div class="box">
<img class="align-left" src="/images/placeholder.jpg" alt="image" />some text in this box..
</div>
<div class="box">
<img class="align-left" src="https://drupar.com/images/demo/placeholder/100-100.png" alt="image" />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac felis donec et odio pellentesque diam volutpat commodo sed. Aliquet nibh praesent tristique magna sit amet. Arcu felis bibendum ut tristique et egestas. Massa enim nec dui nunc mattis enim ut tellus elementum. Sed libero enim sed faucibus turpis. Tincidunt eget nullam non nisi. Id semper risus in hendrerit gravida.
</div>

Box With an Image in Right Side

<div class="box">
<img class="align-right" src="/images/placeholder.jpg" alt="image" />Some text in this box..
</div>
<div class="box">
<img class="align-right" src="https://drupar.com/images/demo/placeholder/100-100.png" alt="image" />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac felis donec et odio pellentesque diam volutpat commodo sed. Aliquet nibh praesent tristique magna sit amet. Arcu felis bibendum ut tristique et egestas. Massa enim nec dui nunc mattis enim ut tellus elementum. Sed libero enim sed faucibus turpis. Tincidunt eget nullam non nisi. Id semper risus in hendrerit gravida.
</div>