BNL Home

.boundingBox Content

Important! Now that BNL templates are available in a fixed-width and a fluid grid, it is important that the first and last grid element in a row inside a bounding box must properly employ alpha and omega classes.

.container_12

<div class="boundingBox">
	<div class="container_12">
		Grid Content Goes Here
	</div><!--.container_12-->
</div><!--.boundingBox-->
12 a/o
1 a
11 o
2 a
10 o
3 a
9 o
4 a
8 o
5 a
7 o
6 a
6 o
12 a/o

.container_16

<div class="boundingBox">
	<div class="container_16">
		Grid Content Goes Here
	</div><!--.container_16-->
</div><!--.boundingBox-->
16 a/o
1 a
15 o
2 a
14 o
3 a
13 o
4 a
12 o
5 a
11 o
6 a
10 o
7 a
9 o
8 a
8 o
16 a/o

.container_24

<div class="boundingBox">
	<div class="container_24">
		Grid Content Goes Here
	</div><!--.container_24-->
</div><!--.boundingBox-->
24 a/o
1 a
23 o
2 a
22 o
3 a
21 o
4 a
20 o
5 a
19 o
6 a
18 o
7 a
17 o
8 a
16 o
9 a
15 o
10 a
14 o
11 a
13 o
12 a
12 o
24 a/o

Multiple Containers

<div class="boundingBox">
	<div class="container_12">
		Grid Content Goes Here
	</div><!--.container_12-->
	<div class="container_16">
		Grid Content Goes Here
	</div><!--.container_16-->
</div><!--.boundingBox-->
12 a/o
1 a
11 o
2 a
10 o
3 a
9 o
4 a
8 o
5 a
7 o
6 a
6 o
12 a/o
16 a/o
1 a
15 o
2 a
14 o
3 a
13 o
4 a
12 o
5 a
11 o
6 a
10 o
7 a
9 o
8 a
8 o
16 a/o
24 a/o
1 a
23 o
2 a
22 o
3 a
21 o
4 a
20 o
5 a
19 o
6 a
18 o
7 a
17 o
8 a
16 o
9 a
15 o
10 a
14 o
11 a
13 o
12 a
12 o
24 a/o

Image Within Grid

<div class="boundingBox">
	<div class="container_12">
		<div class="grid_12 alpha omega">
			<img src="...
		</div><!--.grid_12 .alpha .omega-->
		Grid Content Goes Here
	</div><!--.container_12-->
</div><!--.boundingBox-->
sample image
12 a/o
1 a
11 o
2 a
10 o
3 a
9 o
4 a
8 o
5 a
7 o
6 a
6 o
12 a/o

Full-Width Image

<div class="boundingBox"
	style="padding-top:0;">
	<img src="...
	<div class="container_12">
		Grid Content Goes Here
	</div><!--.container_12-->
</div><!--.boundingBox-->
sample image
12 a/o
1 a
11 o
2 a
10 o
3 a
9 o
4 a
8 o
5 a
7 o
6 a
6 o
12 a/o

Rounded Corners

<div class="boundingBox rounded">
	<div class="container_12">
		Grid Content Goes Here
	</div><!--.container_12-->
</div><!--.boundingBox-->
12 a/o
1 a
11 o
2 a
10 o
3 a
9 o
4 a
8 o
5 a
7 o
6 a
6 o
12 a/o

Rounded Images

<div class="boundingBox rounded"
	style="padding:0;">
	<img class="roundedTop" src="...
	<div class="container_12">
		Grid Content Goes Here
	</div><!--.container_12-->
	<img class="roundedBottom" src="...
</div><!--.boundingBox-->
sample image
12 a/o
1 a
11 o
2 a
10 o
3 a
9 o
4 a
8 o
5 a
7 o
6 a
6 o
12 a/o
sample image

Nested Child Grid Elements in Bounding Box

<div class="boundingBox">
	<div class="container_12">
		<div class="grid_12 alpha omega">
			Some text...
			<div class="clear"></div>
			<div class="grid_8 alpha">
				Some text...
			</div><!--.grid_8-->
			<div class="grid_8 alpha">
				Some text...
			</div><!--.grid_8-->
			<div class="grid_8 omega">
				Some text...
			</div><!--.grid_8 .omega-->
		</div><!--.grid_12 .alpha .omega-->
	</div><!--.container_12-->
</div><!--.boundingBox-->
12 a/o Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at leo at nulla aliquam imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ac euismod turpis, vel laoreet augue. Sed auctor, sem nec viverra tempus, nisl nulla aliquam ligula, eu rutrum lorem purus a odio. Curabitur vitae mi vel orci fringilla pretium at quis nisl. Nam eu fermentum dolor. Nullam eget ante et turpis venenatis vehicula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at leo at nulla aliquam imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ac euismod turpis, vel laoreet augue. Sed auctor, sem nec viverra tempus, nisl nulla aliquam ligula, eu rutrum lorem purus a odio. Curabitur vitae mi vel orci fringilla pretium at quis nisl. Nam eu fermentum dolor. Nullam eget ante et turpis venenatis vehicula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at leo at nulla aliquam imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ac euismod turpis, vel laoreet augue. Sed auctor, sem nec viverra tempus, nisl nulla aliquam ligula, eu rutrum lorem purus a odio. Curabitur vitae mi vel orci fringilla pretium at quis nisl. Nam eu fermentum dolor. Nullam eget ante et turpis venenatis vehicula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at leo at nulla aliquam imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ac euismod turpis, vel laoreet augue. Sed auctor, sem nec viverra tempus, nisl nulla aliquam ligula, eu rutrum lorem purus a odio. Curabitur vitae mi vel orci fringilla pretium at quis nisl. Nam eu fermentum dolor. Nullam eget ante et turpis venenatis vehicula.