# Bootstrap Thumbnail Issue

**URL:** <https://forum.freecodecamp.org/t/bootstrap-thumbnail-issue/135587>\
**Category:** General\
**Tags:** portfolio, project, bootstrap\
**Created:** [July 12, 2017, 8:18am UTC](https://forum.freecodecamp.org/t/bootstrap-thumbnail-issue/135587 "2017-07-12T08:18:26Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![joshamore](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/joshamore/32/50035_2.png) [@joshamore](https://forum.freecodecamp.org/u/joshamore)\
**Post date:** [July 12, 2017, 8:18am UTC](https://forum.freecodecamp.org/t/bootstrap-thumbnail-issue/135587/1 "2017-07-12T08:18:26Z")

</div>

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:_

 ![](https://global.discourse-cdn.com/freecodecamp/original/3X/1/e/1e068df0416ec1d8af2c0901b848f2dfca32a45f.jpg)

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

 ![](https://global.discourse-cdn.com/freecodecamp/original/3X/7/9/79e3d7bf1a8c395e124142abaee298011bd6e732.png)

You can see my code on [GitHub](https://github.com/joshamore/personal_portfolio) and a live preview of the project [here](https://joshamore.github.io/personal_portfolio/).

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!

---

<div class="post-metadata">

**Author:** ![dhan-Sun](https://avatars.discourse-cdn.com/v4/letter/d/b38774/32.png) [@dhan-Sun](https://forum.freecodecamp.org/u/dhan-Sun)\
**Post date:** [July 12, 2017, 8:29am UTC](https://forum.freecodecamp.org/t/bootstrap-thumbnail-issue/135587/2 "2017-07-12T08:29:00Z")

</div>

> <https://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height>

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

---

<div class="post-metadata">

**Author:** ![joshamore](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/joshamore/32/50035_2.png) [@joshamore](https://forum.freecodecamp.org/u/joshamore)\
**Post date:** [July 12, 2017, 8:45am UTC](https://forum.freecodecamp.org/t/bootstrap-thumbnail-issue/135587/3 "2017-07-12T08:45:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![DaveC](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/davec/32/161518_2.png) [@DaveC](https://forum.freecodecamp.org/u/DaveC)\
**Post date:** [July 12, 2017, 8:50am UTC](https://forum.freecodecamp.org/t/bootstrap-thumbnail-issue/135587/4 "2017-07-12T08:50:44Z")

</div>

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/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

A basic **untested** example:

```auto
.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%;
}

```

---

<div class="post-metadata">

**Author:** ![DaveC](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/davec/32/161518_2.png) [@DaveC](https://forum.freecodecamp.org/u/DaveC)\
**Post date:** [July 12, 2017, 8:54am UTC](https://forum.freecodecamp.org/t/bootstrap-thumbnail-issue/135587/5 "2017-07-12T08:54:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![anon52159105](https://avatars.discourse-cdn.com/v4/letter/a/45deac/32.png) [@anon52159105](https://forum.freecodecamp.org/u/anon52159105)\
**Post date:** [July 12, 2017, 11:04pm UTC](https://forum.freecodecamp.org/t/bootstrap-thumbnail-issue/135587/6 "2017-07-12T23:04:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 5:58pm UTC](https://forum.freecodecamp.org/t/bootstrap-thumbnail-issue/135587/7 "2021-01-16T17:58:39Z")

</div>