Grid

Bootstrap Grid System

1/1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/6
1/6
1/6
1/6
1/6
1/6
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12

HTML5
In each div with the class row jeg kan place as many col's as wanted. But put in mind, that one row consists a max. of 12 col-s. If the row gets higher than 12, it will just be placed on the next line, but can make some trouble for the responsive part. See more about the Bootstrap Gridsystem at www.getbootstrap.com.

<div class="container">
	<div class="row">
	    <div class="col-xs-12">1/1</div>
	</div>
	<div class="row">
	    <div class="col-xs-6">1/2</div>
	    <div class="col-xs-6">1/2</div>
	</div>
	<div class="row">
	    <div class="col-xs-4">1/3</div>
	    <div class="col-xs-4">1/3</div>
	    <div class="col-xs-4">1/3</div>
	</div>
	<div class="row">
	    <div class="col-xs-3">1/4</div>
	    <div class="col-xs-3">1/4</div>
	    <div class="col-xs-3">1/4</div>
	    <div class="col-xs-3">1/4</div>
	</div>
	<div class="row">
	    <div class="col-xs-2">1/6</div>
	    <div class="col-xs-2">1/6</div>
	    <div class="col-xs-2">1/6</div>
	    <div class="col-xs-2">1/6</div>
	    <div class="col-xs-2">1/6</div>
	    <div class="col-xs-2">1/6</div>
	</div>
	<div class="row">
	    <div class="col-xs-1">1/12</div>
	    <div class="col-xs-1">1/12</div>
	    <div class="col-xs-1">1/12</div>
	    <div class="col-xs-1">1/12</div>
	    <div class="col-xs-1">1/12</div>
	    <div class="col-xs-1">1/12</div>
	    <div class="col-xs-1">1/12</div>
	    <div class="col-xs-1">1/12</div>
	    <div class="col-xs-1">1/12</div>
	    <div class="col-xs-1">1/12</div>
	    <div class="col-xs-1">1/12</div>
	    <div class="col-xs-1">1/12</div>
	</div>
</div>

Example of Use

You can arrange the different col's as wanted, as long as every row contains a maximum of 12.

1/3
2/3
1/3
1/3

CSS3
You arrange rows inside rows as shown in the content tab.

<div class="row">
    <div class="col-xs-3">
    	<div class="grid-background3">1/3</div>
    </div>
	<div class="col-xs-9">
   		<div class="grid-background2">
   			<div class="row">
   				<div class="col-xs-12">
   					<div class="product-background overkasse">2/3</div>
   				</div>
                <div class="col-xs-6">
                	<div class="product-background">1/3</div>
                </div>
           		<div class="col-xs-6">
           			<div class="product-background">1/3</div>
           		</div>
            </div>
   		</div>
	</div>
</div>

@screen-ms - custom made screen size (view on desktop)

To prevent the big screensize gap between col-xs and col-sm, a new custom made col-ms has been created. An element with the col-ms class included will display it's content between screensize 480 pixels and 768 pixels.
To see the working difference on the 2 examples underneath here, you have to decrease the screen size to under 480 pixels.

Example of bootstrap grid with col-xs, col-sm and the custom made col-ms included.

1/1
1/3
1/3
1/3

Same example but without the custom made col-ms.

1/1
1/3
1/3
1/3

CSS3
To prevent the big screensize gap between col-sm- and col-xs-, just insert the class col-ms- to element you want to be resized.

// Example with the col-ms included //
<div class="row">
	<div class="col-xs-9">
		<div class="grid-background2">
			<div class="row">
				<div class="col-xs-12">
					<div class="product-background overkasse">1/1</div>
				</div>
            <div class="col-sm-6 col-ms-6 col-xs-12">
            	<div class="product-background">1/3</div>
            </div>
       		<div class="col-sm-6 col-ms-6 col-xs-12">
       			<div class="product-background">1/3</div>
       		</div>
        </div>
		</div>
	</div>
	<div class="col-xs-3">
		<div class="grid-background3">1/3</div>
	</div>
</div>

// Example without the col-ms //
<div class="row">
	<div class="col-xs-9">
		<div class="grid-background2">
			<div class="row">
				<div class="col-xs-12">
					<div class="product-background overkasse">1/1</div>
				</div>
            <div class="col-sm-6 col-xs-12">
            	<div class="product-background">1/3</div>
            </div>
       		<div class="col-sm-6 col-xs-12">
       			<div class="product-background last">1/3</div>
       		</div>
        </div>
		</div>
	</div>
	<div class="col-xs-3">
		<div class="grid-background3">1/3</div>
	</div>
</div>