Skip to main content
M
markf26988182
Known Participant
May 29, 2019
Answered

Photo Collage in Bootstrap...possible?

  • May 29, 2019
  • 3 replies
  • 1841 views

hello again...

not talking about a responsive grid here, where images are fully separated from each other & fixed in their own block...but rather a typical photo collage, similar to magazine page design, where images *overlap* each other.  Is this possible, in bootstrap (or any other form that can be incorporated into a bootstrap site)...???

thanx,

mf

This topic has been closed for replies.
Correct answer pziecina

To target a specific image using css requires an attribute selector, e.g. -

img[src="file_path_to_image"]

{

css goes here

}

This is probably the easiest method of targeting the css to a specific image. Replace the file_path_to_image with the exact same file path as used in your html code, complete with file extension, (jpg, png, etc).

The specific css would be a positive or negative value for the margin-top, margin-right, margin-bottom, margin-left. To move the image in a specific direction.

As for rotating the image, (you can also scew, or animate using css) use css transform, see -

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Remember though, that if you change an image, you must also change the file path in the css if necessary.

3 replies

HARSHIKA_VERMA
Community Manager
HARSHIKA_VERMACommunity Manager
Community Manager
May 29, 2019

Hi Mark,

Thank you for reaching out. As you mentioned that you want to create a photo collage, I would suggest checking this article How To Create a Responsive Image Grid and see if that helps.

Additionally, as Nancy has suggested, there are different other Adobe application that you can use like Adobe Photoshop to create a photo collage of your choice.

Would you mind checking the links for how to create a Photo collage in Adobe Photoshop?

Please let me know if you need more info. I am happy to help.

Thanks,

Harshika

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
May 29, 2019

OPTION 1: Create a collage in Photoshop and export as a large JPG.   To take it one step further, use the JPG as a backdrop for an SVG image map with hotspots that link out to individual slides in a Fancybox viewer. 

Nancy O'Shea— Product User & Community Expert
pziecina
pziecina
Legend
May 29, 2019

Bootstrap is nothing but html/css/js, so writting your own css rules to do this is possible.

All it requires is the use of negative margins, and css transforms applied to the appropriate images. The problems arise with writting the css for each layout, as you would have to set the css back to the defaults then write the css for each device.

I'm not cetain how such a layout would look on a smartphone, but my instincts say it would look terrible.

M
markf26988182Author
Known Participant
May 29, 2019

thanx...

can you give me an example of such a code (or point me in the direction of how I might get started)?

thanx again,

mf

pziecina
pziecinaCorrect answer
Legend
May 29, 2019

To target a specific image using css requires an attribute selector, e.g. -

img[src="file_path_to_image"]

{

css goes here

}

This is probably the easiest method of targeting the css to a specific image. Replace the file_path_to_image with the exact same file path as used in your html code, complete with file extension, (jpg, png, etc).

The specific css would be a positive or negative value for the margin-top, margin-right, margin-bottom, margin-left. To move the image in a specific direction.

As for rotating the image, (you can also scew, or animate using css) use css transform, see -

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Remember though, that if you change an image, you must also change the file path in the css if necessary.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices