How to use Bootstrap 3 to make a structure of 5 columns with images and with the header on top, as in the screenshot? enter image description here

2 answers 2

You can make five two-column columns and add the first one an offset by one column .

.five-blocks .text { background: #fde; padding: 4px 8px; text-align: center; } .five-blocks img { width: 100%; } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="container-fluid five-blocks"> <div class="row"> <div class="col-xs-2 col-xs-offset-1"><div class="text">Text</div><img src="//placehold.it/600x300/c69/fff/?text=Photo" alt=""></div> <div class="col-xs-2"><div class="text">Text</div><img src="//placehold.it/600x300/c69/fff/?text=Photo" alt=""></div> <div class="col-xs-2"><div class="text">Text</div><img src="//placehold.it/600x300/c69/fff/?text=Photo" alt=""></div> <div class="col-xs-2"><div class="text">Text</div><img src="//placehold.it/600x300/c69/fff/?text=Photo" alt=""></div> <div class="col-xs-2"><div class="text">Text</div><img src="//placehold.it/600x300/c69/fff/?text=Photo" alt=""></div> </div> </div>

    I don't think you need bootstrap for this. If you use its columns, then there will be extra empty space between the service cards. I would make them inline-block with the distance between the letters of some px (to set the empty space between them) or with float-left and indentation on the sides.

    Look at the float-left example (here you will need a clearfix hack , in the bootstrap it is already embedded). Perhaps this will suit you.

     .services { clear: both; } .services:before, .services:after { content: ' '; display: table; } .services:after { clear: both; } .service-card { float: left; margin: 10px; width: 130px; padding: 0; background-color: pink; color: #777; } .service-card > h4, .service-card > p { margin: 5px 2px; padding: 0; text-align: center; font-size: 12px; } .service-card > h4 { font-size: 14px; height: 16px; } .service-card > p { height: 45px; } .service-card > img { display: block; } 
     <div class="services"> <div class="service-card"> <h4> Caption 1 </h4> <p> Some text description goes here goes here </p> <img src="https://placehold.it/130x80" /> </div> <div class="service-card"> <h4> Caption 2 </h4> <p> Some text description goes here </p> <img src="https://placehold.it/130x80" /> </div> <div class="service-card"> <h4> Caption 3 </h4> <p> Some text description goes here </p> <img src="https://placehold.it/130x80" /> </div> <div class="service-card"> <h4> Caption 4 </h4> <p> Some text description goes here goes here goes here here </p> <img src="https://placehold.it/130x80" /> </div> <div class="service-card"> <h4> Caption 4 </h4> <p> Some text description goes here goes here goes here here </p> <img src="https://placehold.it/130x80" /> </div> </div>

    Here I set the height for the heading and for the subtitle so that the cards have the same height. If you have more pictures than you need, then give them the bootstrap img-responsive and set the required card width.