locked
how can I make the two card with same height RRS feed

  • Question

  • User-1355965324 posted

    I am using two card horizontally  one card being used for storing contact address, another card being used for image. But the  height of the  image card always being showed  higher than the left  card size. How can I make both card make same  height in boot strap. Here is the code

    <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <!--main css-->
      <link rel="stylesheet" href="main.css">
      <!--font awesome-->
    <script src="all.js" ></script>
      <!--google fonts-->
      <link href="https://fonts.googleapis.com/css?family=Kalam:700" rel="stylesheet">
    </head>
     <section id="contact" class="py-5">
            <div class="container">
                <div class="row height-60 ">
                    <div class="col-lg-6 col-sm-10 mx-auto my-3">
                        <div class="card text-center">
                            <div class="card-header text-centertext-uppercase">
                                <h1 class="text-uppercase">contact form</h1>
                            </div>
                            <div class="card-body">
                                <form>
                                    <div class="input-group my-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="input-text"><i
                                                    class="fas fa-user"></i></span>
                                        </div>
                                        <input type="text" class="form-control form-control-lg text-capitalize"
                                            placeholder="Enter your email here">
                                    </div>
                                    <div class="input-group my-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="input-phone"><i
                                                    class="fas fa-phone"></i></span>
                                        </div>
                                        <input type="number" class="form-control form-control-lg text-capitalize"
                                            placeholder="Enter your phone number here">
                                    </div>
    
                                    <div class="input-group my-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="input-email"><i
                                                    class="fas fa-envelope"></i></span>
                                        </div>
                                        <input type="email" class="form-control form-control-lg text-capitalize"
                                            placeholder="Enter your email here">
                                    </div>
    
    
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- This part only see large screen -->
                    <div class="col-lg-6 d-none d-lg-block  text-center my-3 ">
                        <div class="card">
                            <img src="img/banner-1.jpeg" alt="images" class="img-fluid rounded">
                        </div>
    
                    </div>
    
                </div>
            </div>
        </section>




    css file

    /*##########contact##########################*/
    .height-60 {
        min-height: 40vh;
    }
    
    #contact {
        background: linear-gradient(rgba(42, 145, 52, 0.3), rgba(42, 145, 52, 0.3)), url(img/banner-1.jpeg)center/cover fixed no-repeat;
    }
    

    Here is the  layout view

    https://drive.google.com/file/d/1bkWIdOVdTGuHdi7UCucxLbmY3uWoVTKR/view?usp=sharing

    Thanks

    Pol

    Monday, February 8, 2021 7:16 AM

Answers

  • User1535942433 posted

    Hi polachan,

    As far as I think,your problem is "my-3". "my-3" is same with 1rem and not "my-2.5".So I suggest you could use margin or padding.

    Since you don't post full css file,I have created a demo like this:

        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css?family=Kalam:700" rel="stylesheet" />
        <style>
            /*##########contact##########################*/
            .height-60 {
                min-height: 40vh;
            }
            .input-group {
                padding:12.5px 0px;
            }
    
            #contact {
                background: linear-gradient(rgba(42, 145, 52, 0.3), rgba(42, 145, 52, 0.3)), url(image/image1.jpg)center/cover fixed no-repeat;
            }
        </style>
       <section id="contact" class="py-5">
            <div class="container">
                <div class="row height-60">
                    <div class="col-lg-6 my-3">
                        <div class="card text-center">
                            <div class="card-header text-centertext-uppercase">
                                <h1 class="text-uppercase">contact form</h1>
                            </div>
                            <div class="card-body">
                                <form>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="input-text"><i
                                                    class="fas fa-user"></i></span>
                                        </div>
                                        <input type="text" class="form-control form-control-lg text-capitalize"
                                            placeholder="Enter your email here">
                                    </div>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="input-phone"><i
                                                    class="fas fa-phone"></i></span>
                                        </div>
                                        <input type="number" class="form-control form-control-lg text-capitalize"
                                            placeholder="Enter your phone number here">
                                    </div>
    
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="input-email"><i
                                                    class="fas fa-envelope"></i></span>
                                        </div>
                                        <input type="email" class="form-control form-control-lg text-capitalize"
                                            placeholder="Enter your email here">
                                    </div>
    
    
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- This part only see large screen -->
                    <div class="col-lg-6  text-center my-3">
                        <div class="card">
                            <img src="image/image1.jpg" alt="images" class="img-fluid rounded">
                        </div>
                    </div>
                </div>
            </div>
        </section>

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, February 9, 2021 2:38 AM