This appears to be working as I'd expect it to. [**According to the Documentation**][Grid Options], a small screen is anything less than **`768px`** which can actually be quite large. By opening the developer tools, you can see the screen dimensions whenever you resize a web page. You can use this to see how it deals with different breakpoints.

### Here's a live demo of your code:

## [jsFiddle with Original Code][Original Fiddle]

### Screenshot:

[![screenshot][screenshot]][Original Fiddle Demo]

### Solution:

If you would like it to still have two columns at anything below 768 pixels, then change `col-xs-12` to `col-xs-6`, like this:

<pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row col-md-offset-0 col-lg-offset-2&quot;&gt;
        &lt;p&gt;&lt;b&gt;We Offer:&lt;/b&gt;&lt;/p&gt;
        &lt;div class=&quot;<b>col-xs-6</b> col-sm-6 col-md-6 col-lg-4&quot;&gt;
            &lt;ul&gt;
                &lt;li&gt;test&lt;/li&gt;
                &lt;li&gt;test&lt;/li&gt;
                &lt;li&gt;test&lt;/li&gt;
                &lt;li&gt;test&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class=&quot;<b>col-xs-6</b> col-sm-6 col-md-6 col-lg-4 &quot;&gt;
            &lt;ul&gt;
                &lt;li&gt;test&lt;/li&gt;
                &lt;li&gt;test&lt;/li&gt;
                &lt;li&gt;test&lt;/li&gt;
                &lt;li&gt;test&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

## [Working Demo in jsFiddle][New Demo]


[screenshot]: http://i.imgur.com/XBLiBOz.png
[Original Fiddle]: http://jsfiddle.net/KyleMit/dpW85
[Original Fiddle Demo]: http://jsfiddle.net/KyleMit/dpW85/show/light
[Grid Options]: http://getbootstrap.com/css/#grid-options
[New Demo]: http://jsfiddle.net/KyleMit/dpW85/4/

The code correctly shows two columns on large screens. But for tablet sized screens, both divs take up their own row, each using 12 columns.  

I want each of them to be in the same container using 6 columns. I have tried changing the numbers in the classes `col-xs-12 col-sm-6 col-md-6 col-lg-4` 
but nothing has worked. 

Here's my code:

    <div class="container">
        <div class="row col-md-offset-0 col-lg-offset-2">
            <p><b>We Offer:</b></p>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
                <ul>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                </ul>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 ">
                <ul>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                </ul>
            </div>
        </div>

How do I make the div inside the container use just 6 of the 12 columns in bootstrap 3?

All bootstrap grid rows work off a 12 column layout.  If you use more than 12 columns in a single row, the extra column fields will automatically wrap to the next line. Since the left and right table are both defined as `col-xs-8`, the second one will get bumped to the next line (16 > 12).

Try `col-xs-6` instead:



<pre><code>&lt;!-- Left side --&gt;
&lt;div class=&quot;<b>col-xs-6</b>&quot;&gt;

&lt;!-- Right side --&gt;
&lt;div class=&quot;<b>col-xs-6</b>&quot;&gt;
</code></pre>

When you nest rows, you begin working off a new, inner 12 column layout that is constrained by the parent of your new row class. I'd update your inner rows to use the following:



<pre><code>&lt;div class=&quot;row&quot;&gt;
    &lt;!-- 1st column --&gt;
    &lt;div class=&quot;<b>col-xs-6</b>&quot;&gt;a&lt;/div&gt;
    &lt;!-- 2nd column --&gt;
    &lt;div class=&quot;<b>col-xs-6</b>&quot;&gt;b&lt;/div&gt;
    &lt;!-- colspan 2 --&gt;
    &lt;div class=&quot;<b>col-xs-12</b>&quot;&gt;c&lt;/div&gt;
&lt;/div&gt;
</code></pre>


### [Working Demo in Fiddle][fiddle]

[![screenshot][screenshot]][fiddle demo]



[fiddle]: http://jsfiddle.net/KyleMit/pe7UC/
[fiddle demo]: http://jsfiddle.net/KyleMit/pe7UC/show/light

[screenshot]: http://i.imgur.com/vbPnWtE.png

I can't seem to wrap my head around this.  
How do I make [this table][1] in the bootstrap grid system?

Here's a regular `table`:

    <table>
      <tr>
    	<td>
    	  <table>
    		<tr>
    		  <td>a</td>
    		  <td>b</td>
    		</tr>
    		<tr>
    		  <td colspan="2">c</td>
    		</tr>
    	  </table>
    	</td>
    	<td>
    	  <table>
    		<tr>
    		  <td>d</td>
    		  <td>e</td>
    		</tr>
    		<tr>
    		  <td colspan="2">f</td>
    		</tr>
    	  </table>
    	</td>
      </tr>
    </table>

I tried the following:

    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <div class="row">
                    
                    <div class="col-xs-8">
                        <div class="row">
                            
                            <div class="col-xs-4">a</div>
                            
                            <div class="col-xs-4">b</div>
                            
                            <div class="col-xs-8">c</div>
                        </div>
                    </div>
                    
                    <div class="col-xs-8">
                        <div class="row">
                            
                            <div class="col-xs-4">d</div>
                            
                            <div class="col-xs-4">e</div>
                            
                            <div class="col-xs-8">f</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


  [1]: http://plnkr.co/edit/F80TxvYBB6JjAK5WMOWs?p=preview

Multiple nested columns with grid system

`container-fluid` was originally taken out of Bootstrap 3.0, but [**added back in 3.1.1**][container commit]

To fix this, you can *either*:

1. Use the [newer version of Bootstrap style sheet][bootstrap.css]

    ### [Demo with New Style Sheet in Fiddle][fiddle style]

2. Or add in the class yourself

    The `.row` adds a `15px` margin to the left and right.  Since `.container-fluid` fills up `100%` of the screen width, the extra margin space causes overflow issues.

    To fix this, you need to add padding to `.container-fluid` class

    

        .container-fluid {
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }

    ### [Demo with Custom container class in Fiddle][fiddle class]

[container commit]: https://github.com/twbs/bootstrap/commit/6273604601c58284f49b38ae4e52533b9689437c
[bootstrap.css]: http://getbootstrap.com/dist/css/bootstrap.css
[fiddle style]: http://jsfiddle.net/KyleMit/p23EB/7/
[fiddle class]: http://jsfiddle.net/KyleMit/p23EB/8/

Here is a simple example: 

    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">DUMMY CONTENT</div>
        </div>
    </div>

###[Demo in Fiddle](http://jsfiddle.net/KyleMit/p23EB/1/)

When I see the result in browser I get a horizontal scrollbar.

Why is this happening? 

What am I doing wrong? 


using container-fluid within bootstrap cause horizontal scrollbar

## Bootstrap Version 3.x

As always, read Bootstrap's great documentation:

**3.x Docs**: https://getbootstrap.com/docs/3.3/css/#grid-nesting

Make sure the parent level row is inside of a `.container` element.  Whenever you'd like to nest rows, just open up a new `.row` inside of your column.

Here's a simple layout to work from:



    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                <div class="big-box">image</div>
            </div>
            <div class="col-xs-6">
                <div class="row">
                    <div class="col-xs-6"><div class="mini-box">1</div></div>
                    <div class="col-xs-6"><div class="mini-box">2</div></div>
                    <div class="col-xs-6"><div class="mini-box">3</div></div>
                    <div class="col-xs-6"><div class="mini-box">4</div></div>
                </div>
            </div>
        </div>
    </div>

## Bootstrap Version 4.0

**4.0 Docs**: http://getbootstrap.com/docs/4.0/layout/grid/#nesting

Here's an updated version for 4.0, but you should really read the entire docs section on the grid so you understand how to leverage this powerful feature



    <div class="container">
      <div class="row">
        <div class="col big-box">
          image
        </div>
        
        <div class="col">
          <div class="row">
            <div class="col mini-box">1</div>
            <div class="col mini-box">2</div>
          </div>
          <div class="row">
            <div class="col mini-box">3</div>
            <div class="col mini-box">4</div>
          </div>
        </div>
        
      </div>
    </div>

### Demo in Fiddle [jsFiddle 3.x][fiddle-3.x] | [jsFiddle 4.0][fiddle-4.0]

Which will look like this (*with a little bit of added styling*):

![screenshot][screenshot]

[fiddle-3.x]: http://jsfiddle.net/KyleMit/fbtw6/
[fiddle-4.0]: http://jsfiddle.net/KyleMit/4bo2uxgs/

[screenshot]: http://i.imgur.com/y2kk0xi.png

I want 1 larger image with 4 smaller images in a 2x2 format like this: 

![Figure 1 Example][1]

My initial thought was to house everything in one row. Then create two columns, and, in the second column, create two rows and two columns to create the 1x1 and 2x2 effect. 

However, this doesn't seem to be possible, or I am just not doing it correctly?


  [1]: http://i.stack.imgur.com/tdxuMm.png