title: prevent wrapping/stacking of columns in bootstrap when shrinking the size?
body: <p>I want to prevent the stacking of col-md-8 on col-md-4 using "nowrap" or any other alternative in the same way i did for the  (Unordered list).</p>
  
  <p>Below is my snippet and i have also mentioned the classes of each box with colors.</p>
  
  <p>Thank you.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  &lt;style&gt;
    #outside-container {
      border: 2px solid red;
      height: 500px;
      white-space: nowrap;
    }
    #container1 {
      border: 2px solid green;
      height: 300px;
    }
    #colmd8 {
      border: 2px solid yellow;
      height: 400px;
    }
    #row1 {
      border: 2px solid pink;
    }
    #list1 {
      border: 2px solid red;
      width: 200px;
      height: 200px;
    }
    #container2 {
      border: 2px solid navy;
      height: 300px;
    }
    li {
      display: inline-block;
    }
    ul {
      white-space: nowrap;
    }
    #col4 {
      border: 2px groove darksalmon;
    }
  &lt;/style&gt;
  
  &lt;body&gt;
  
    &lt;div class="container-fluid" id="outside-container"&gt;
      &lt;div class="col-md-8" id="colmd8"&gt;colmd8
        &lt;div class="container-fluid" id="container1"&gt;container1
          &lt;div class="row" id="row1"&gt;row1
            &lt;ul class="col-md-12 list-inline" id="colmd3" style="list-style: none"&gt;
              &lt;li id="list1"&gt;
                &lt;a href="#"&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li id="list1"&gt;
                &lt;a href="#"&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li id="list1"&gt;
                &lt;a href="#"&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li id="list1"&gt;
                &lt;a href="#"&gt;&lt;/a&gt;
              &lt;/li&gt;
  
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="col-md-4" id="col4"&gt;colmd4
        &lt;div class="container-fluid" id="container2"&gt;container2
  
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://www.bootply.com/kOyetvHiZZ" rel="noreferrer">bootply</a></p>