how can I make the two card with same height[Answered] RSS

1 reply

Last post Feb 09, 2021 02:38 AM by yij sun

‹ Previous Thread|Next Thread ›

Shortcuts

polachan

Member

411 Points

1327 Posts

how can I make the two card with same height

Feb 08, 2021 07:16 AM|polachan|LINK

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

yij sun

Contributor

3730 Points

1431 Posts

Re: how can I make the two card with same height

Feb 09, 2021 02:38 AM|yij sun|LINK

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

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

‹ Previous Thread|Next Thread ›