Adding Logos

Columns columns and more columns

Adding logos is all about columns. Bootstrap handles responsiveness with the column system.

What is the column system?

Think of you whole screen as 12 columns! Now let's say you wanted to make logo take the whole screen width, what would you do? Wrap that around a col-12 div tag! Quite simple right? Just make a column that takes up the whole screen. But now, let's say you wanted your logo to be the size of the full screen width when it's seen on a computer but only half the screen size when it's on mobile. In that case, you would wrap the image around a col-lg-12 col-sm-6 col-6 div tag.

Let's break that down a bit more.

col-lg-12 This will tell the browser that your image should be the width of the whole screen when the screen is large, hence the 'lg' tag.

col-sm-6 This will tell the browser that on small screens (i.e. phones), we want the image to talk up half of the screen width.

col-6 This will tell the browser that ANY screen smaller than sm will also display the image at half of the screen width. This is simply a safe way to program.

On our site...

So on our site we use this for sponsors and partner logos. The small sponsonsors will displayed in 6 logos per row. The code should look something like this:

<div class="col-lg-2 col-md-3 col-sm-4 col-4">
   <img src="assets/img/sponsors/logo-name.png" alt="">
</div>

The medium sponsors will be displayed in 4 sponsors per row.

<div class="col-lg-3 col-md-3 col-sm-4 col-4">
   <img src="assets/img/sponsors/logo-name.png" alt="">
</div>

And platinum sponsor will be one per row.

*This is subject to change in the future