asked on

how to make images and description on the same row inside a div

This is so simple but I can't find how to do it. I want to make 3 images and description appear on the same row inside a DIV, but I've tried several times and I get them BUT LIKE A LIST, one below each other !
I would like :

Image text image text Image text
more text more text

<div class="row">
<div class="col-sm-12">
</div>
</div>

Chris Stanyon

For 3 columns, set them each to a width of 4:

<div class="row">
  <div class="col-sm-4">
  </div>
  <div class="col-sm-4">
  </div>
  <div class="col-sm-4">
  </div>
</div>

Open in new window

crescue

ASKER

Sorry if I didn't explain correctly, what I want is (the image is a small thumbnail) :

<div class="row">
<div class="col-sm-4">
Image text image text Image text
more text more text

</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>

Chris Stanyon

Yeah. I got that. With bootstrap, if you want 3 items next to each other in columns, then wrap each in a column class (within a row wrapper) Bootstrap is based on a 12 column layout, so if you want 3 items next to each other, then you'll need 3 columns - each one being 4 wide.

<div class="row">
  <div class="col-sm-4">
    Image text
    more  text
  </div>
  <div class="col-sm-4">
    Image text
    more  text
  </div>
  <div class="col-sm-4">
    Image text
    more  text
  </div>
</div>

Open in new window

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.