Evenly spaced logos using bootstrap

Question

Using bootstrap 3, how can I create a single row of evenly spaced logos? The logos are simple JPG images, and I'm currently using code like this:

<table class="logotable text-center">
     <tr>
        <td>
          <img ..>
        </td>
     </tr>
</table>

.logotable {
   width: 100%
}

Even though this looks great on PC, it does not convert to stacked form for smaller screen devices.

Whatever I tried didn't work (the logos always appear in stacked form)

For some reason row-fluid or container-fluid doesn't work (my parent container cannot be fluid since I also need some text within the container)
I tried placing a div.row-fluid within my container and adding every image inside a div.row but that didn't work
I don't want to "hard code" for a fixed number of columns
After lots of confusion I realized I don't need a container-fluid, ie. it does not evenly space out rows, instead it just expands to fill the available space

I would use a div but the bootstrap version does not work. Therefore right now I'm using plain-HTML awaiting help with bootstrap. — Robin Rodricks, Jan 12 '16 at 15:37
Tables are for tabular data, a row of evenly spaced logos is not tabular data. — APAD1, Jan 12 '16 at 15:47
@APAD1 - That comment is neither meaningful nor helpful. We are discussing practical ways to achieve something here. If you have a tip, add an answer. Don't just fire off your personal policies that are impossible to always follow. — Robin Rodricks, Jan 12 '16 at 15:49
Yes it is both meaningful and helpful. In your question you posted HTML for a table and I am telling you that this is not the correct situation to use a table. It is not a "personal policy" it is the generally accepted best practice for this day and age. — APAD1, Jan 12 '16 at 15:50

martincarlin87 · Accepted Answer · 2016-01-12T15:58:18.133

7

You need a col-[breakpoint]-[columns] as well as the row div, which is probably why it didn't work when you tried it.

In addition to that, in Boostrap 3 you need to use the img-responsive class on images to make them responsive.

row-fluid was used in Bootstrap 2 I believe and deprecated in Bootstrap 3.

I'm not sure how many logos you want on one row, but you could do something like the following to have 3 images on one line:

<div class="row">
  <div class="col-md-4">
    <img class="img-responsive" alt="" src="/path/to/image" />
  </div>
  <div class="col-md-4">
    <img class="img-responsive" alt="" src="/path/to/image" />
  </div>
  <div class="col-md-4">
    <img class="img-responsive" alt="" src="/path/to/image" />
  </div>
</div>

EDIT

To avoid hardcoding, you could use flexbox like so:

HTML

<div class="flex-container">
  <div class="flex-item">
    <img src="" alt="1" class="img-responsive" />
  </div>
  <div class="flex-item">
    <img src="" alt="2" class="img-responsive" />
  </div>
  <div class="flex-item">
    <img src="" alt="3" class="img-responsive" />
  </div>
  <div class="flex-item">
    <img src="" alt="4" class="img-responsive" />
  </div>
  <div class="flex-item">
    <img src="" alt="5"class="img-responsive" />
  </div>
</div>

CSS

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 10px;
}

/* to center flex-items */
.flex-item {
   margin: auto;
}

Non-Centered Items Fiddle | Centered Items Fiddle

Flexbox Guide

UPDATE

To vertically centre the flexbox items, just add a height to the container:

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  height: 200px;
  background: red;
}

.flex-item {
  margin: auto;
}

Vertically Centred Fiddle

edited Jan 12 '16 at 15:58

answered Jan 12 '16 at 15:39

martincarlin87

10,848
24
98
145

Since we have `col-md-4`, is that not hard coding for the number of logos? I want a way to add any number of logos without calculating the `col-*`. Currently I have 5 logos, so its a wierd number and does not work with the 12 col system. – Robin Rodricks Jan 12 '16 at 15:42
it's hardcoding yes, if you didn't want to do that then flexbox would be an option. – martincarlin87 Jan 12 '16 at 15:44
Does flexbox play well with bootstrap? Is there a quick start guide somewhere? I want `flex-grow` with `justify-content = space-between` and `align-items = center`. Flexbox is a JS/CSS lib or is it just a spec? I want my thing to work well on older/all browsers not just the latest. – Robin Rodricks Jan 12 '16 at 15:45
Hi, flexbox should be fine with bootstrap, I've updated my answer and there's a fiddle there too. – martincarlin87 Jan 12 '16 at 15:50
Wow. It works amazing. Just one last snag... the images are all aligned to TOP. Is there a way to align the images to the V-CENTER of the row? I checked with the inspected and the flex-items are correctly sized (h and w) its just the images that are not centered vertically to the flex items. – Robin Rodricks Jan 12 '16 at 15:54
vertical-align css property ? – Walfrat Jan 12 '16 at 15:58
@Geotarget - answer updated with new fiddle, give that a try? – martincarlin87 Jan 12 '16 at 15:58

score 1 · Answer 2 · edited Jan 17 '16 at 05:03

What are the requirements? How many logos per line? Is that should be centered/justified?

If not you can just write/generate div with the class col-xs-3 col-sm-2 col-md-1 for instance that contain each icon and you will have what you want.

With those classes you'll be able to get 4 icon per line on mobile, 6 on tablets, 12 otherwise.

Let me know if it's not enough

EDIT:

So 5 icons per line, a grid is 12 column per line, let's centered it and skip the 1st column. So we get:

<div class="row">
     <div class="col-sm-offset-1 col-sm-2 col-xs-12"><img ... /></div>
     <div class="col-sm-2 col-xs-12"><img ... /></div>
     <div class="col-sm-2 col-xs-12"><img ... /></div>
     <div class="col-sm-2 col-xs-12"><img ... /></div>
     <div class="col-sm-2 col-xs-12"><img ... /></div>
</div>
<div class="row clearfix">
    <div class="col-sm-offset-1 col-sm-2 col-xs-12"><img ... /></div>
     <div class="col-sm-2 col-xs-12"><img ... /></div>
     <div class="col-sm-2 col-xs-12"><img ... /></div>
     <div class="col-sm-2 col-xs-12"><img ... /></div>
     <div class="col-sm-2 col-xs-12"><img ... /></div>
</div>

Some technical (and not very mastered by me) points: col-sm-* apply for tablets : so this code will display 5 icons per line from tablet up to large desktop. col-xs-* : for mobile so 1 icon per line

The clearfix: I'm not sure about this but it's useful when you don't ended your last container with just 12 column so better to use it from 2nd div. You can even you it from 1 div, it won't cause trouble as fair as I know.

If the division of the row cause some extra space, you can either remove it by using some style attribute or CSS classes.

5 logos per line. 1 line/row. They should all show in one line on PC and be stacked on mobile. How do I do this? — Robin Rodricks, Jan 12 '16 at 15:42
answer edited does it seems good for you ? You can test in your broswer jus resize your window until to get less than 300px of width — Walfrat, Jan 12 '16 at 15:54
Thanks for helping, but martincarlin87's answer worked for me. I don't want to hard-code. — Robin Rodricks, Jan 12 '16 at 15:55

Evenly spaced logos using bootstrap

2 Answers2