DevLiv DevLiv - 3 months ago 23
CSS Question

Bootstrap columns inside column placement issue

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:
current

What I am trying to achieve:
trying



.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

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

Comments