Bootstrap Thumbnail Issue

1

Hi guys,

I’m having an issue with Bootstrap thumbnail <div> elements. On my portfolio project, I have 6 thumbnails displaying different project details, images, and link buttons. The thumbnails are contained in a Bootstrap column element.

My issue is with <p> elements inside the thumbnails. The amount of text varies for each project, and this variability is changing the overall size of each containing <div>. Example:

Screen Shot 2017-07-12 at 6.06.02 pm.jpg1771×735 306 KB

This is causing issues when the columns break at different points. Example:

Screen Shot 2017-07-12 at 6.12.54 pm.png445×678 160 KB

You can see my code on GitHub and a live preview of the project here.

I’ve tried to resize the containing <div class="thumbnail">'s height, margin, and padding settings so far without and success. Any idea how to make each thumbnail element the same size at each break point? Thanks!

2

kindly check this link… it might have some tips to help you fix your issue.

1 Like
3

Thanks for the link.

I stumbled on this and tried to use Flexbox, but it messed up the default settings of the Bootstrap thumbnail class. I’m considering pulling Bootstrap off the page and rebuilding with CSS Grid.

4

The issue is in how Bootstrap 3 sets up those boxes (technically, the col- divs… the thumbnail divs are along for the ride on this one). BS3 uses floats to achieve its grid system, which are near-impossible to get “bottom-aligned”.

Two options come to mind. One is to switch to Bootstrap 4, which uses flexbox for much of its grid system. But it will mean a re-write of much of your class calls. Some of those names have changed and some were dropped.

Option 2 is to learn flexbox and write some special styles just for that section of your page. Doing this means you have to re-write both xs-6 and md-4 classes along with the media queries that make that work, but it’s far easier than starting from scratch.

Best place to learn flexbox right now? https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A basic untested example:

.col-md-4 {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: stretch; /* should be default, but just in case */

  width: 30%;
}
5

Wait. I used the wrong class name. You need to attach the flex styles to .row. The width stays in .col-.

My bad. Sorry.

Here’s an example (https://codepen.io/cloudsociety/full/owJqvq/). Use bootstrap classnames for the parts that work for you. Use your own classes for the parts that need custom.

6

Have you considered using bootstrap grids? It’s a nice tool for evenly distributing things across a page.

1 Like