Center the image and text below horizontally and vertically with background color of responsive height

Question

 body{ margin: 0; padding: 0; } .bg-color{ background: linear-gradient(180deg, #BA894D 0%, #FFBC6A 100%); } .main-content{ display: flex; justify-content: center; align-items: center; } .main-content div{ max-width: 595px; margin-bottom: 100px; text-align: center; }

 <div class="container-fluid"> <div class="row"> <div class="col-lg-5 bg-color"> <div class="main-content"> <div> <img src="./download.jpeg" alt="LOGO" class="img-fluid"> <h5>Brand Name</h5> <h3>Build your own shop</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque inventore perferendis sit optio vero totam voluptatibus alias expedita, in neque natus, rerum officia nobis nihil, sapiente maxime beatae porro perspiciatis.</p> </div> </div> </div> <div class="col-lg-7"> <h1>CONTACT US</h1> </div> </div> </div>

It is a contact form with 2 columns, One side is logo and text with the background of full height and one side is formed with inputs like name, email I want to center the logo and text below vertically and horizontally with a background color of 100% height.

Answer 1

 body{ margin: 0; padding: 0; } .contact{ min-height: 100vh; } .bg-color{ background: linear-gradient(180deg, #BA894D 0%, #FFBC6A 100%); } .main-content{ display: flex; justify-content: center; align-items: center; } .main-content div{ max-width: 595px; text-align: center; }

 <div class="container-fluid"> <div class="row contact"> <div class="col-lg-5 bg-color main-content"> <div> <img src="./download.jpeg" alt="" class="img-fluid"> <h5>Brand Name</h5> <h3>Build your own shop</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque inventore perferendis sit optio vero totam voluptatibus alias expedita, in neque natus, rerum officia nobis nihil, sapiente maxime beatae porro perspiciatis.</p> </div> </div> <div class="col-lg-7"> <h1>CONTACT US</h1> </div> </div> </div>

I think this is what you are expecting.