Bootstrap columns inside column placement issue

Question

I am working on a site, of which has to have a description section. I am trying to achieve this by having two Bootstrap columns, one sized 8 and then another sized 4 to make sure it is equal to 12. Then in the column which is 8, I want to have two columns inside, to achieve one column of text on the left and then a second column of text on the right.

There is just a problem, as it doesn't seem to be working and whenever I try to do this, it just creates a second column underneath the first one inside of the 8 column.

I have attached an image to make it easier to see what I got and what I am trying to achieve. Any help is much appreciated.

Image of current situation:

What I am trying to achieve:

.partLineDesc{
  margin-top: 30px;
  text-align: center;
}

.leftContDesc{
  margin-top: 20px;
  background-color:grey;
}

.rightContDesc{
  background-color:grey; 
  margin-top: 20px;
}

.cottonImg{
  margin-top: 15px;
  text-align: left;
}

.partLineDesc2{
  margin-top: 20px;
  text-align: center;
}

.securInfo{
  margin-top: 30px;
  text-align: center;
  background-color:#eff4f9;
  border-radius: 10px;
  border: 2px solid #dddddd;
  padding: 20px; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-md-8">
    <div class="partLineDesc">
      <img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
    </div>

    <div class="leftContDesc">
      <div clas="col-md-6">
        <p>text text text text text text text text text text text text
        <br>text text text text text text text text text text text text
        </p>
        <img src="cottonImg.png" alt="100% Cotton" class="img-responsive" style="width:100px; height:100px;">
      </div>
    </div>

    <div class="rightContDesc">
      <div clas="col-md-6">
        <p>text text text text text text text text text text text text
        <br>text text text text text text text text text text text text
        </p>
      </div>
    </div>

    <div class="partLineDesc2">
      <img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
    </div>
  </div>

  <div class="col-md-4">
    <div class="securInfo">
    </div>
  </div>
</div>

Answer 1

Your left and right DIV's wrap the Bootstrap col-md-6 columns so they no longer float next to each other. Also, always put nested col-*s inside another row so the padding is correct..

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <div class="partLineDesc">
                <img />
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="leftContDesc">
                    <img />
                     </div>
                </div>
                <div class="col-md-6">
                    <div class="leftContDesc">
                    <p>

                    </p>
                    </div>
                </div>
            </div>
            <div class="partLineDesc2">
                <img/>
            </div>
        </div>
        <div class="col-md-4">
            <div class="securInfo">
            </div>
        </div>
    </div>
</div>

Demo: http://codeply.com/go/yRQum3xKKY

Answer 2

It seems your bootstrap columns are all over the place.

You really need to wrap everything you're trying to split into columns into an overhead div that way you're saying that your main container is taking up 12 columns of that grid then you decide which of those 12 the inside columns need to take up.

Quick mock-up below.

---

    .partLineDesc{
        margin-top: 30px;
        text-align: center;
    }
    
    .leftContDesc{
        margin-top: 20px;
        background-color:grey;
    }
    
    .rightContDesc{
       background-color:grey; 
       margin-top: 20px;
    }
    
    .cottonImg{
        margin-top: 15px;
        text-align: left;
    }
    
    .partLineDesc2{
        margin-top: 20px;
        text-align: center;
    }
    
    .securInfo{
        margin-top: 30px;
        text-align: center;
        background-color:#eff4f9;
        border-radius: 10px;
        border: 2px solid #dddddd;
        padding: 20px; 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="row">
      <div class="col-sm-8">
        <div class="partLineDesc">
          <img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
        </div>
       </div>
    
        <div class="col-sm-12 col-md-12 col-lg-12">
        <div class="leftContDesc col-sm-4 col-md-4 col-lg-4">
            <p>
              text text text text text texttext text text text text text
              <br> text text text text text texttext text text text text text
            </p>
            <img src="cottonImg.png" alt="100% Cotton" class="img-responsive" style="width:100px; height:100px;">
        </div>
    
        <div class="rightContDesc col-sm-4 col-md-4 col-lg-4">
            <p>
              text text text text text texttext text text text text text
              <br> text text text text text texttext text text text text text
            </p>
        </div>
          
       <div class="col-sm-4 col-md-4 col-lg-4">
        <div class="securInfo">
        </div>
      </div>
          
    </div>
        <div class="partLineDesc2">
          <img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
        </div>
      </div>