CODEWITHSUNDEEP
htmltwitter-bootstrapcssflexbox
user979331
user979331

Reputation: 11851

CSS Bootstrap Row Flex and Display Issues

I am trying to build a simple webpage with 2 col-md-6 and they need to be equal height without setting the height. I have added the style display flex to the row, so it is now equal height, its just the elements inside my col-md-6 are acting up.

In the second col-md-6 I have a long HTML form, this will determine how long the other col-md-6 is (which is currently does.) In my first col-md-6 is in 2 parts, the first part is consist of a logo and text, the second part will be background image that I want to take up the rest of the height. What would be the best way to do this?

Here is what I go so far,

<div class="container-fluid">

    <div class="row" style="display: flex;">

            <div class="col-md-6">

                <div class="info">

                    <!-- Logo and Text -->

                </div>

                <div class="background">

                    <!-- Background Image -->

                </div>


            </div>
            <div class="col-md-6">

                <!-- Long Form Here -->


            </div>      

    </div>


</div>

Upvotes: 0

Views: 1262

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362290

Also make the first col-md-6 display:flex with flex-direction:column. The use flex-grow:1 on the background image div.

https://www.codeply.com/go/rhOBREngxT

<div class="container-fluid">
    <div class="row bg-info" style="display: flex;">
            <div class="col-md-6" style="display: flex;flex-direction:column">
                <div class="info">
                    Logo and Text
                </div>
                <div class="background">
                    Background
                </div>
            </div>
            <div class="col-md-6">

            </div>      
    </div>
</div>

Upvotes: 1

Related Questions