Friday 25th July 2014,
Maurizio Conventi

Responsive example integrating Twitter Bootstrap and jQuery Masonry

Maurizio June 19, 2012 Responsive design 41 Comments

In my previous posts I created two examples of Responsive Web Design, one using Twitter Bootstrap and another using jQuery Masonry.

For this post I created an example of minimalistic layout for a blog/portfolio using both Bootstrap and Masonry. Why it should be useful? I like twitter bootstrap because it gives you all the base tools to create your website: forms, modal, alert, buttons, carousel, responsive layout etc…but sometimes it is too limited and jQuery Masonry can give you something more about fluid layout containing images.

In my previous post regarding jQuery Masonry I created a 3 columns layout for big size screens to become one column layout for smartphones. For this post I didn’t follow the same approach but the number of columns is given by the size of the screen divided by the minimum column width (in my example it is 150px).

NOTE: The example uses twitter bootstrap v2.2.2. I am going to update the code to Twitter Bootstrap 3. Subscribe to the mailing list in order to be notified when the new version will be available.

I promise that I won’t sell your email or send you spam ;)



Download the complete code example using the button below.

The images for this post are from my last travel in Agra (India).

Let me know if you appreciate my example and if you used it in your project ;)

Like this Article? Share it!

41 Comments

  1. Alexander August 4, 2012 at 13:30

    Thank you for your example.
    You compile .LESS or enough to edit .CSS?

    • Maurizio December 10, 2012 at 09:38

      Hi Alexander, no, for these examples I use just the CSS file. I customize them from the twitter bootstrap website.

  2. Nick Hoag August 24, 2012 at 20:18

    Great post. Thanks so much for the tutorial.

    Is there any chance you could show me how to do this with images of varying widths?

    I’m thinking something like this:

    http://future.thefutureforward.com/~cycles/assets/images/HUB0002_dAutremont_4WEB.jpg

    The images being in increments of 240px (240, 480, and 720, respectively).

    Let me know if you have any ideas!

  3. Phil Doughty September 14, 2012 at 17:31

    Pretty cool, but because you mixed upper case and lower case on the file extensions (.JPG & .jpg) some of the images were not showing. After a couple fo small edits I got it working.

    • Maurizio December 10, 2012 at 09:49

      Hi Phil, thanks for the feedback, I didn’t notice the issue. I have updated the files!

  4. hans September 15, 2012 at 23:58

    holy moses, this is the shit. i tell you when the project where i use this is ready ;)

  5. Phoenix September 17, 2012 at 14:38

    Fantastic! I’d love to see the same effect for Zurb’s Foundation too!

  6. hans September 24, 2012 at 11:51

    when the site loads the boxes are on the left first (http://herrfischerhamburg.de/re/), then they arrange with the correct gutter width. any idea how to make it that they are arranged with the right gutter width on pageload?

    • Maurizio December 10, 2012 at 09:31

      Thanks for the feedback, you are right. Settings properly the images’ margin should fix the issue.

  7. Craig Gwamba October 3, 2012 at 15:10

    Great template. I have been thinking of integrating Bootstrap and Masonry but wondered if the two would conflict. Your template answers that question.

    Thanks :)

  8. Richard October 5, 2012 at 15:27

    The best combination ever. Thanks, most helpful.

  9. Laura February 24, 2013 at 17:37

    Thanks for this example, just what I was looking for!
    I’ve integrated it into my wp blog, see the result:
    http://nieuweaarde.nu/

    There is only one problem, while loading the site you first see a big post and then it aligns every posts with masonry. Like it loads slow. it’s just a second, but I dont like it. Dont know exactly how to explain this.. Do you have any idea what this could be? I’ve tried to move the scripts up, but no luck.

    • Maurizio February 24, 2013 at 19:20

      Hi Laura,
      I am glad my post has been useful!
      To fix the issue you should set an initial width via css for the box element. Furthermore, set the display property to inline-block

      Let me know ;)

      • Laura February 25, 2013 at 11:39

        That make sense and it works perfectly, thank you!! Much appreciated :-)

  10. James April 6, 2013 at 13:45

    Brilliant – have hit a few walls with bootstrap and masonry, just needed to update the masonry to v2.1.08, then it worked a treat – thanks!

  11. Brent Wilkinson April 16, 2013 at 10:48

    Hello

    First, great work, I love it and works ( I think ) much better than ISOTOPE for my requirements..

    I do have one issue, I want to replace the image when I hover over of of the div box`s, but it never works. Could you help ?

    my CSS.

    .box {
    width: 150px;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 12px;

    }

    .box:hover{
    background-image: url(“../img/Agra-2.jpg”);
    }

    • Maurizio April 29, 2013 at 14:28

      Hello,

      The problem with your implementation is that the images you see in my example are html img elements and not background images.
      Do you see what I mean? You should remove the img elements, then set background, height and width for the boxes.

      Let me know, thanks,
      Maurizio

  12. Paul May 24, 2013 at 10:26

    Complimenti ottimo lavoro e grazie per averlo condiviso!
    Sto cercando di modificare il comportamento del masonry senza avere buoni risultati.
    In pratica dovrei cercare di avere tutte le immagini con la stessa altezza disposte su ogni riga. In poche parole vorrei che si comportasse come google immagini o la nuova interfaccia di flickr. Hai qualche suggerimento?

    • Maurizio May 24, 2013 at 16:06

      Ciao e grazie! Sicuramente il lavoro fatto per flickr è molto interessante. Ad un primo sguardo non mi sembrano foto tagliate o deformate. La prima cosa che mi viene in mente è quella di mettere nella stessa riga le immagini con la stessa proporzione w/h. Ci penso un pochino, se hai novità fammi sapere anche via G+

  13. Paul May 30, 2013 at 10:42

    Ciao alla fine ho risolto utilizzando questo metedo: http://www.techbits.de/2011/10/25/building-a-google-plus-inspired-image-gallery/

    Sicuramente meno raffinato di quello utilizzato da Flickr dove le righe non hanno tutte la stessa altezza.

    Se trovo di meglio ti farò sapere.

    Ciao e grazie ancora

    • Maurizio May 30, 2013 at 16:00

      Grazie per il link, sicuramente interessante. Secondo te flickr e g+ ritagliano le immagini? Perchè nel post c’è scritto così però non mi sembra … tra i commenti al post ho trovato anche questo http://moewashere.com/jglance/ lo hai provato? Magari faccio qualcosa di simile per un mio prossimo progetto e poi ci faccio un post ;)

  14. Paul May 30, 2013 at 19:40

    Si ho controllato ed effettivamente si nota che le immagini vengono croppate, il crop è quasi impercettibile perchè riguarda una piccolissima porzione dell’immagine.
    Se guardi sui bordi delle thumbs noterai che rispetto alle immagini orginali manca una piccolissima porzione. Ci ho messo un po’ per notarlo, ci vuole un immagine con piccoli dettagli sui bordi e una vista da acquila.

    Grazie per il link, mi era sfuggito.

    • Maurizio May 30, 2013 at 19:50

      Hai ragione, vengono leggermente tagliate … mi sto appassionando alla cosa ;)

      Grazie

  15. Mitch June 5, 2013 at 22:36

    Thank you very much for this! I have it working with a site I’m currently developing, this saved me several hours for sure. Do you have a github repository where I can follow some of your creations?

    • Maurizio June 6, 2013 at 16:51

      Hi Mitch, I am glad my work has been useful for you!
      You are right I should move my patches on github. Actually I created the account (https://github.com/mconventi) but I didn’t upload them. I am going to publish my work on github soon. Let’s keep in touch ;)

  16. Mike June 17, 2013 at 13:35

    This is exactly what i was looking for :)
    Now, if you could even combine this (bootstrap + masonry) with lazy-loading the next say 20 images once a user hits the bottom (like pinterest, twitter, etc) you would be my hero of the month :D

    • Maurizio July 2, 2013 at 14:08

      Hi Mike,

      Thanks for the suggestion, in my masonry example I used the infinite scroll in order to do exactly what you need ;)

  17. Lâm July 2, 2013 at 12:24

    Hi Maurizio,

    I wonder that how can i make a box is double bigger? In your code, every box is the same size. However, in my design there a box is double bigger and a box is double heigher.

    How can i slove this, Maurizio?

    Best regards,

    • Maurizio July 2, 2013 at 14:13

      Hi Lâm,

      This is an interesting point. One possible solution is to insert an image attribute like min-width=”..px” for each image. Then in the js file you don’t use anymore the hardcoded min_width but you get it from the image with image.attr(‘min-width’)

      Does it sound good?
      Maurizio

  18. Lâm July 3, 2013 at 05:25

    Hi Maurizio,

    It’s working when i added min-width like this:

    However, when screen under 482px resolution, it’s still the same size. Maybe, i should create media queries to resize that div.

    Thanks for your fast reply, i love your work a lot :)

    • Maurizio July 3, 2013 at 11:38

      Hi Lâm, I am really proud my work has been useful, I hope to make more examples in the future.
      Anyway consider that under 482px it could be good to have the same size otherwise you could get too small (or too large) images.

      Thanks!

  19. Tarek July 18, 2013 at 09:27

    Hello Maurizio, I wanted to see your masonry code to see if I can implement in our github project where you can find from this link http:/twittstrapcom/twittstrap but your link returns me to a 404 page not found

    • Maurizio July 18, 2013 at 09:57

      Hi Tarek,

      I am sorry for the problem, it seems work fine to me, I downloaded it with both FF and Chrome.

      Please let me know, thanks!

  20. Tarek July 19, 2013 at 00:10

    Hi Maurizio,
    This is the link back to me as display

    404 Not Found
    Code: NoSuchKey
    Message: The specified key does not exist.
    Key: demos/images.html
    RequestId: 131A04D88CF8A599
    HostId: GdF2SjE9fTXG7afDJrE6pioBxUb7aJ9vyJA5Qwp7SA15x+KH4cfyuoaqfdsi4XJs
    Greetings

  21. JP August 6, 2013 at 06:43

    Hi Maurizio:
    great work. I look forward to the Bootstrap 3 version. One request, would you be willing to include an example of a category filter at top?
    So by clicking one of your ‘city’ links it narrows down the results.
    Thanks! Regards,
    -JP

    • Maurizio August 11, 2013 at 21:59

      Hi JP,

      This is a good suggestion.
      I’ll work on that!

      Thanks

  22. David January 20, 2014 at 21:27

    Hi,

    I just saw your page. Do you update to bootstrap v3?

    • Maurizio January 21, 2014 at 01:00

      Hi David, unfortunately not but I will. Register to the mailing list to be updated. Thanks!

Leave A Response