1

I am getting started with bootstrap grid and am trying to get this layout ready.[![enter image description here][1]][1]

I am a bit confused about how to divide the the three main columns into separate parts so I can place the corresponding text/images as shown in the figure

I started creating a basic layout but I am not able to get it to the right point:

<div class="row" style="border: 1px solid;">
    <div class="col-xs-4"> 
        <div class="col-xs-12 col-md-offset-4">
            XXX
        </div>
        <div class="col-xs-12 ">
            <div class="col-xs-12 ">
                first column second
            </div>
            <!--<div class="col-xs-12 ">
                first column second
            </div>-->
        </div>

    </div>

    <div class="col-xs-4" style="border: 1px solid;">
        <div class="col-xs-12 ">
            second column first
        </div>
        <div class="col-xs-12 ">
            second column second
        </div>

    </div>

    <div class="col-xs-4" style="border: 1px solid;">
        <div class="col-xs-12 ">
           third column first
        </div>

    </div>
</div>

I tried to centralize the first row in the first column which seem to look OK. But then, I am not able to divide the second row into separate columns. And similar issues will be there for 2nd and 3rd columns. Can you give some pointers on how to go about getting the attached layout?

user1892775
  • 2,001
  • 6
  • 37
  • 58

1 Answers1

0

Bootstrap works using a 12 column layout. So if you would like 2 equal columns you would need to set each value as 6.

Using your example for the second column you would put

<div class="col-xs-4" style="border: 1px solid;">
    <div class="col-xs-6 ">
        second column first
    </div>
    <div class="col-xs-6 ">
        second column second
    </div>

</div>

Thanks

white_reece
  • 15
  • 3
  • white_reece, My question is not just about creating 2 equal columns. Its more about partionining the columns in a way that I could fill in the elements like in attachment. Lets say the first column above, I am trying to arrange the different elements as per screenshot, second row should have that text like 1000 and then an image and then a percentage value and also aligned centrally in that outer column just as shown there – user1892775 Aug 17 '17 at 00:05
  • I figure I can just use span inside those divs to keep the content on one line and can just center them to get the above UI – user1892775 Aug 17 '17 at 00:48