how to stick buttons on the same height bootstrap

Question

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?

Putting your code in bootply i don't see problems, edit this to recreate your problems then update your question with it please: http://www.bootply.com/zEVFwK4515 — Jordan.J.D, Jul 17 '14 at 14:16
what i want is to have the trailer and sinopse links on the same line, in the bootply you can see the problem — programmer-bigwoods, Jul 17 '14 at 14:30

score 1 · Answer 1 · edited May 23 '17 at 10:33

1

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

edited May 23 '17 at 10:33

Community

1
1

answered Jul 17 '14 at 15:04

Tyler Petrochko

2,611
4
24
30

see my edit, that might be more what you're looking for. – Tyler Petrochko Jul 17 '14 at 16:39
thanks for your help, we are almost there, the site has to be responsive, but the title and the height of the columns cannot stay fixed because the title height will change according to the number of its chars, therefore, the column height changes as well – programmer-bigwoods Jul 17 '14 at 17:00
are you trying to achieve this without javascript/jquery? – Tyler Petrochko Jul 17 '14 at 18:12
i dont have the knowledge necessary to do this with jquery or pure javascript, maybe if you help me.. thanks again!! – programmer-bigwoods Jul 17 '14 at 18:25
Is this more what you're looking for? (pure CSS/html) http://www.bootply.com/PSE8nAvaL3 – Tyler Petrochko Jul 17 '14 at 18:33
thats exactly what i'm looking for buddy! is this solution cross-browser? – programmer-bigwoods Jul 17 '14 at 18:40
i'm trying flex box, now height is ok now, but the width bugs when i resize, try it [here] (http://www.cineteatromatao.com.br/index3.php) – programmer-bigwoods Jul 17 '14 at 18:49
no problem ;D but what's the bug you're referring to? What browser are you using? When I resize the window (using Chrome) it seems to behave well. – Tyler Petrochko Jul 17 '14 at 19:50
hmmm you might want to experiment with the flex layout link I gave you. I'll take another look at it this weekend for you – Tyler Petrochko Jul 17 '14 at 21:15
i came with a solution using javascript, if you want to check it here's the [link] (http://www.cineteatromatao.com.br/index3.php) – programmer-bigwoods Jul 18 '14 at 12:40

how to stick buttons on the same height bootstrap

1 Answers1