Twitter Bootstrap Question posted in

How to have two columns(One with a form and One with a image) of bootstrap row to be of same height, and responsive too-Twitter bootstrap

I have two bootstrap columns, One has a form, another has image. The image division is set to 100% width, Which when resizing the screen, gets responsive. But the form stands to be in same height irrespective of screen size.

enter image description here

Please refer the below code

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-page-contents">
  <div class="row">
    <div class="col-md-6">
      <p class="headingdescription" style="padding-left:0px;text-align:left">Request a Office space</p>
      <p>Bla bla bla</p>
      <div class="col-md-6" style="padding-left:0px">
        <input class="formtextarea" placeholder="Full Name " />
        <input class="formtextarea" placeholder="Job Title" />
        <input class="formtextarea" placeholder="Phone Number" />
      </div>
      <div class="col-md-6" style="padding-left:0px">
        <input class="formtextarea" placeholder="Business Name" />
        <input class="formtextarea" placeholder="Email Address" />
        <input class="formtextarea" placeholder="Zipcode" />
      </div>
      <input class="formtextarea" placeholder="Message" style="height: 100px !important" /> <br> <br>
      <button class="actionbuttons" href="">SUBMIT REQUEST</button> &nbsp;&nbsp; &nbsp;&nbsp;
    </div>
    <div class="col-md-6">
      <img src="http://dummyimage.com/600/f0d/&text=illo.png" width="100%">
    </div>
  </div>
</div>

Thanks in advance for helping.

Tags:

3

Answers


  1. 0

    If I understood, you wish to see image be aligned to bottom of the form when becoming smaller. You can align the column itself with the class mt-auto (margin-top: auto).

    Demo:

    form {
  background: yellow;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="text-page-contents">
  <div class="row">
    <form class="col-md-6 mt-auto ">
      <p class="headingdescription" style="padding-left:0px;text-align:left">Request a Office space</p>
      <p>Bla bla bla</p>
      <div class="col-md-6" style="padding-left:0px">
        <input class="formtextarea" placeholder="Full Name " />
        <input class="formtextarea" placeholder="Job Title" />
        <input class="formtextarea" placeholder="Phone Number" />
      </div>
      <div class="col-md-6" style="padding-left:0px">
        <input class="formtextarea" placeholder="Business Name" />
        <input class="formtextarea" placeholder="Email Address" />
        <input class="formtextarea" placeholder="Zipcode" />
      </div>
      <input class="formtextarea" placeholder="Message" style="height: 100px !important" /> <br> <br>
      <button class="actionbuttons" href="">SUBMIT REQUEST</button> &nbsp;&nbsp; &nbsp;&nbsp;
    </form>
    <div class="col-md-6 mt-auto">
      <img src="http://dummyimage.com/600/f0d/&text=illo.png" width="100%">
    </div>
  </div>
</div>

    Note, the class align-items-end on parent is also good to align both columns to bottom.

    form {
  background: yellow;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="text-page-contents">
  <div class="row align-items-end">
    <form class="col-md-6 ">
      <p class="headingdescription" style="padding-left:0px;text-align:left">Request a Office space</p>
      <p>Bla bla bla</p>
      <div class="col-md-6" style="padding-left:0px">
        <input class="formtextarea" placeholder="Full Name " />
        <input class="formtextarea" placeholder="Job Title" />
        <input class="formtextarea" placeholder="Phone Number" />
      </div>
      <div class="col-md-6" style="padding-left:0px">
        <input class="formtextarea" placeholder="Business Name" />
        <input class="formtextarea" placeholder="Email Address" />
        <input class="formtextarea" placeholder="Zipcode" />
      </div>
      <input class="formtextarea" placeholder="Message" style="height: 100px !important" /> <br> <br>
      <button class="actionbuttons" href="">SUBMIT REQUEST</button> &nbsp;&nbsp; &nbsp;&nbsp;
    </form>
    <div class="col-md-6 ">
      <img src="http://dummyimage.com/600/f0d/&text=illo.png" width="100%">
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    If you expect the form to resize somehow to be the same height of the image this will not happen.

    The reason for the image to behave responsively is that it has an aspect ratio. That means, it has its own native height and width. What you are doing here is to set just the width, and because the aspect ratio, the image height adjusts accordingly.

    Form elements have a fixed size by default. They are not supposed to scale like images.

    What you can do instead is to set a width of 100% on the inputs and let the width be determined by the width of the parent container. However this will not affect the height of the form elements in any way.

    The css for that looks like this:

    input[type="text"] {
    width: 100%;
    /*you also need to change box-sizing,
    since the input itself already has a padding
    and a border and would exceed the boundaries
    of the parent container because of that:*/
    box-sizing: border-box;
}

    Note that I have used [type="text"]. This selector will only work if you set the type text on your inputs as well like this:

    <input type="text" class="formtextarea" placeholder="Business Name">

    If you want your layout to adjust according to the width or height of your screen, I suggest you have a look at media queries in css.

    Login or Signup to reply.
  3. 0

    It can be done with Bootstrap but there are 3 problems to overcome:

    1. the image must be 100% of it’s parent height but must not affect it’s parent column height. Solution: make it a background image:
    <div class="col-md-6 col-sm-12 image-col">

<style>
  .row .image-col {
    background-image: url(url(http://dummyimage.com/600/f0d/&text=illo.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center right;
  }
</style>
    1. when the window is less than medium (<768px) the image will wrap underneath the form and it’s height will collapse. Solution: set an image height for that case with a media query:
    /* small screens (the default) */
<style>
  .row .image-col {
    background-image: url(http://dummyimage.com/600/f0d/&text=illo.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 20rem;    /* image height when image wraps underneath form */
    background-position: center right;
  }

  /* medium and greater screens */  
  @media (min-width: 768px) {
    .row .image-col:last-child { 
      background-size: auto 100%;
      height: auto;
    }
  }
</style>
    1. For small screens (less than medium, when the image wraps below the form), we need both columns to be 100% wide. So we need to specify that with bootstrap by adding class col-sm-12 to both columns.

    Here’s a working fiddle.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search