Grid System Layout

Download billboard >

Quick start

Looking to quickly add billboard to your project? Use billboardCDN,  Using a package manager or need to download the source files?  Download billboard >

Grid


<div class="main">
 <div class="bcontainer">
   <div class="bcol-6-6"> 1of1 </div>
 </div>
</div>

Multi col


<div class="main">
 <div class="bcontainer">
   <div class="brow">
     <div class="bcol-1-6"> 1of3 </div>
     <div class="bcol-4-6"> 2of3 </div>
     <div class="bcol-1-6"> 3of3 </div>
   </div>
  </div>
 </div>

Automatic col Flex


<div class="main"> 
 <div class="bcontainer"> 
   <div class="box-h">
     <div class="brow">
       <div class="bcol"> 1of3 </div> 
       <div class="bcol"> 2of3 </div>
       <div class="bcol"> 3of3 </div> 
     </div> 
   </div>
  </div>
 </div>

Row & col



<div class="main"> 
 <div class="bcontainer"> 
   <div class="box-h">
     <div class="brow">
       <div class="bcol-3-6"> 1of2 </div> 
       <div class="bcol-3-6"> 2of2 </div> 
     </div> 
   </div>
  </div>
 </div>


Horizontal Grid


<div class="main-h">
 <div class="bcontainer-h">
   <div class="box-h"> 1 </div>
   <div class="box-h"> 2 </div>
   <div class="box-h"> 3 </div>
 </div>
</div>

Horizontal Box Grid


<div class="main-h">
 <div class="bcontainer-h">
   <div class="box-h">
     <div class="bcol-1-6"> 1of3 </div>
     <div class="bcol-4-6"> 2of3 </div>
     <div class="bcol-1-6"> 3of3 </div>
   </div>
  </div>
 </div>

Horizontal Automatic Grid


<div class="main-h"> 
 <div class="bcontainer-h"> 
   <div class="box-h">
     <div class="brow">
       <div class="bcol-3-6"> 1of2 </div> 
       <div class="bcol-3-6"> 2of2 </div> 
     </div> 
   </div>
  </div>
 </div>

Horizontal Free Grid



<div class="main-h"> 
 <div class="bcontainer-h"> 
   <div class="box-h">
     <div class="brow">
       <div class="bcol-2-6"> 1of2 </div> 
       <div class="bcol-2-6"> 2of2 </div> 
     </div> 
   </div>
  </div>
 </div>


Horizontal Auto Center



<div class="main-h"> 
 <div class="bcontainer-h"> 
   <div class="box-h">
       <div class="bcol-6-6 auto-bcol"> 1of1 </div> 
   </div>
  </div>
 </div>


By Amir Mahmoud Mirzargar @ thebravo.cc