CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
programmer-bigwoods
programmer-bigwoods

Reputation: 69

how to stick buttons on the same height bootstrap

I am developing this site, and i got stuck in a problem.

on the "Lançamentos" section i have to always keep the "trailer" and "sinopse" links on the same height, but i can't since the bootstrap columns dont have equal height

bootply here by JordanD

can anybody help me please?

Upvotes: 2

Views: 303

Answers (1)

Tyler Petrochko
Tyler Petrochko

Reputation: 2641

One way you could do this is by splitting your content into rows. Designate one row for the poster/title, and a separate row for the Trailer/Synopsis links. As long as the columns within each row match up (and the container is fluid) it will all match up.

Bootply: http://www.bootply.com/2jz49daGa1

You could also break it up into a table (pretty similar approach actually).

Bootply: http://www.bootply.com/7dxa8ndiac

Now, if you still want it to be responsive design, I would FIX the height of the entire column AND the height of the title. This way, you can add as many movies as you want and it'll appropriately put them side-by-side. If you want their widths to remain static as well, change the container-fluid to container.

Bootply: http://www.bootply.com/GcuLvlmdOI#

Without fixing heights, you can use a flex layout to achieve the desired result. Also see this post to see how to position an element relative to the bottom.

Bootply: http://www.bootply.com/PSE8nAvaL3

Upvotes: 1

Related Questions