Search code examples
htmlcsstwitter-bootstrap-3alignment

Column alignment in Bootstrap

I need three images to be placed in the first row and two images in second row as shown in the below figure. enter image description here

My code for the above image is as follows,

<div class="row" style="margin-left:15%">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="F:\Project P\img\logo_homework.png" alt="Engg">
            </a>
            <p style="text-align:center">I'm a Graduate</p>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="F:\Project P\img\logo_homework.png" alt="Engg">
            </a>
            <p style="text-align:center">I'm a Post Graduate</p>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="F:\Project P\img\logo_homework.png" alt="Engg">
            </a>
            <p style="text-align:center">I'm a PhD Guy</p>
        </div>
    </div>
    <br>
    <div class="row" style="margin-left:20%">
        <div class="col-xs-6 col-md-3" style="margin-left:20%">
            <a href="#" class="thumbnail">
                <img src="F:\Project P\img\logo_homework.png" alt="Engg">
            </a>
            <p style="text-align:center">I'm a Course taking one</p>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="F:\Project P\img\logo_homework.png" alt="Engg">
            </a>
            <p style="text-align:center">Others</p>
        </div>
   </div>

But when I view it in mobile mode using chrome inspect element it is displayed as below

enter image description here

I know I have placed an extra div but if I don't place the div the fourth image is placed in the first row.

How can I get them aligned.

Solution

  • Maybe try this:

    https://jsfiddle.net/68kycb4g/

    <div class="container">
<div class="row">
    <div class="col-xs-4"></div>
    <div class="col-xs-4"></div>
    <div class="col-xs-4"></div>
</div>
<div class="row">
    <div class="col-xs-6 col-sm-offset-1 col-sm-5"></div>
    <div class="col-xs-6 col-sm-5"></div>
</div>