0

I would like to give automatically the same height for #div1 and #div2 whatever my logo size is. Is there a specific Bootstrap3 class to do the job ? If not which is the best css rules to apply ?

https://jsfiddle.net/bzq9bhop/4/

<div class="masthead">
    <!-- Logo + Titre du site -->
    <div class="row">
        <div id="div1" class="col-xs-6" style="border:solid 1px;"><img src="http://drawception.com/pub/panels/2012/12-28/MnbfrYALQj-2.png" width="250" height="150" /></div>
        <div id="div2" class="col-xs-6" style="border:solid 1px;"><h1>My website title</h1></div>
    </div>

Edit: Finally I used this solution. http://www.bootply.com/wr4u8YOFpj

Simple and elegant with only 1 bootstrap class list-inline

Which in my code gives:

            <div class="row">
                <ul class="list-inline">
                    <li><img src="//placehold.it/150x50"></li>
                    <li><h1>My text</h1></li>
                </ul>
            </div>
zm455
  • 489
  • 11
  • 26
  • Possible duplicate of [How can I make Bootstrap columns all the same height?](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) – Satej S May 02 '16 at 06:58

2 Answers2

3

just add display:flex; to the style of the parent div that you want to have same height..flexbox will take care of the rest..

Dhaval Chheda
  • 4,637
  • 5
  • 24
  • 44
  • Nice to see you again sir. Your answer is the good one. The stackoverflow's system is telling me I must wait 8minutes to be able to accept your answer ... so in 8 minutes I will accept it ... Thanky you ! – zm455 May 02 '16 at 06:54
  • you're welcome..I really needed a lot of help when i got started and felt really happy when somebody took the time to help me so I feel obliged to help others ( whenever i can ) who need some assistance..take care and god bless – Dhaval Chheda May 02 '16 at 06:55
  • Can I center the content of my div with a flex property ? I need content of my div is centered – zm455 May 02 '16 at 06:56
  • 1
    yes..use justify-content: center; in the parent div .. just an advise..take some time and learn flexbox..it will probably take a couple of hours to learn it but you will save hundreds of hours in coding.. – Dhaval Chheda May 02 '16 at 06:58
  • Yes I will learn felxbox because actualy css is a kind of little nightmare to me. Sorry but justify-content: center; does not work. What I would exactly need is content of #div1 and content of #div2 having bottom align. Like any header of every website. – zm455 May 02 '16 at 07:06
  • 1
    i am assuming you meant contents sticking to the baseline of the div and in that case you can do align-items: baseline; – Dhaval Chheda May 02 '16 at 07:11
  • That's a good answer. But my

    tag is too big. So it's hard to have a content align beetween my logo and the

    tag. I need to look for my solution Thank you for having helped me sir ! ;-)

     – zm455 May 02 '16 at 07:20
  • https://jsfiddle.net/bzq9bhop/12/ maybe you could look at this jsfiddle ? there are not many lines of code. I would content of both div are aligned – zm455 May 02 '16 at 07:23
0

Just add display: flex to the parent container. Check update fiddle.

Change <div class="row"> to <div class="row" style="display: flex">

Pugazh
  • 9,453
  • 5
  • 33
  • 54