Home > Web development > Responsive top-of-page logo image with Bootstrap

Responsive top-of-page logo image with Bootstrap

We’re working on a new version of the School of ICT web site recently.

It uses Drupal 7, and we have configured it to use the Bootstrap framework.

One of the things we wanted to do was to have a full-width logo image at the top of the page. However, we did not want it to scale, so I looked for a way to show an image that matched the Bootstrap style for the viewport. Without using JavaScript.

Here’s what we settled on.

.

Four logo images

We created four logo images:

  1. logo-1100-plus.png
  2. logo-910-plus.png
  3. logo-690-plus.png
  4. logo-690-minus.png

.

Wrap the images

Wrap the image in a suitable container, if necessary. Then, use the Bootstrap classes “hidden-??”.

Here’s a code sample. Replace the <a href and <img src values with your own. Enjoy.


<p>Responsive images, using Bootstrap grid breakpoints</p>

<p>Width 1100 or more</p>
<div class="hidden-md hidden-sm hidden-xs">
  <a href="https://ict.senecacollege.ca/home/">
  <img src="~/Content/Images/logo-1100-plus-v1.png" /></a>
</div>

<p>Width between 992 and 1100</p>
<div class="hidden-lg hidden-sm hidden-xs">
  <a href="https://ict.senecacollege.ca/home/">
  <img src="~/Content/Images/logo-910-plus-v1.png" /></a>
</div>

<p>Width between 768 and 992</p>
<div class="hidden-lg hidden-md hidden-xs">
  <a href="https://ict.senecacollege.ca/home/">
  <img src="~/Content/Images/logo-690-plus-v1.png" /></a>
</div>

<p>Width less than 768</p>
<div class="hidden-lg hidden-md hidden-sm">
  <a href="https://ict.senecacollege.ca/home/">
  <img class="img-responsive" src="~/Content/Images/logo-690-minus-v1.png" /></a>
</div>

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Advertisements
Categories: Web development
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: