Tips for creating two columns within a Bootstrap row, one with a form and the other with an image, that are both the same height and responsive

I am facing an issue with my bootstrap columns. One column has a form, while the other contains an image. The image section is set to 100% width, making it responsive when the screen size changes. However, the form remains at a fixed height regardless of the screen size.

Here is the code snippet:

<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>

Thank you for any assistance provided.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you're looking to have the image aligned at the bottom of the form when it shrinks in size, you can use the mt-auto class (which sets margin-top to auto) on the column itself.

Check out the demo below:

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: Using the align-items-end class on the parent element is another option to align both columns to the 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>

Answer №2

Utilizing Bootstrap to achieve this task poses three challenges:

  1. The image should take up 100% of its parent's height without affecting the parent column's height. Solution: Use the image as 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 size is less than medium (<768px), the image will move below the form and its height will decrease. Solution: Set an image height for such scenarios using a media query:
/* small screens (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 it moves under the form */
    background-position: center right;
  }

  /* Medium and larger screens */  
  @media (min-width: 768px) {
    .row .image-col:last-child { 
      background-size: auto 100%;
      height: auto;
    }
  }
</style>
  1. For smaller screens (less than medium, where the image appears below the form), both columns must be 100% wide. This can be achieved by adding the col-sm-12 class to both columns.

View a live demonstration here.

Answer №3

Don't expect the form to automatically adjust its height to match the image.

The reason images are responsive is due to their aspect ratio, which determines their natural height and width. By only setting the width of an image, the height adjusts proportionally.

Form elements have a fixed size by default and do not scale like images.

To make inputs adjust to the parent container's width, set a width of 100% on the inputs. However, this won't affect the height of the form elements.

This can be achieved with the following CSS:

input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

Make sure to use [type="text"] selector and set the type text on your inputs as shown below:

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

If you want your layout to adapt based on screen width or height, consider using media queries in CSS.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Expanding CSS styles on hover

When my mouse pointer moves out of the red color box, it still triggers the hover function. However, I only want the hover effect to work within the red color box and hide the menu when it's outside the box. This is the source code from JSfiddle: htt ...

csshover

Insert a new, unique div onto an HTML webpage using JavaScript, ensuring no duplicates are created

Having an issue with this code snippet where nothing is being added. It seems like the variable result may not be taking a number or something else, but I'm not entirely sure why. $(document).ready(function () //document.getElementById(1).style. ...

javascriptjqueryhtmlcss

Tips for invoking a JavaScript class method from an HTML document

I've created a Typescript class that dynamically inserts an HTML element to a page after it's loaded. Here is the code snippet: const calcElement: string = ` <div class="container"> <span class="cc-title">Field</span> ...

javascripthtml

Transforming functions with dependencies into asynchronous operations with the help of promises

Can I convert both of my functions into asynchronous functions, even though one function relies on the other? Is it feasible for function b to execute only after function a? ...

javascripthtml

Ways to eliminate the blue outline on a checkbox in bootstrap 4.1

Bootstrap 4.1 Is there a way to get rid of the blue border on a checkbox that shows up when it is in focus? https://i.sstatic.net/e77BV.png I attempted to use outline, but it didn't work as I had hoped. This is the code I have been using: <div ...

csstwitter-bootstrapbootstrap-4

The function $.ajax may not be available, but rest assured that the jquery library is functioning properly

Upon checking the console, I noticed the following: Here is the AJAX code snippet in use: $("#accept").click(function(){ id = $("#idInput").val(); password = $("#passwordInput").val(); alert(id) alert(password) $.aja ...

jqueryhtmlajax

Adding text to the end of a web address through a submission form

Here is an example of a form: <form method="post"> {% csrf_token %} <input class="search" type="text" name="q" placeholder="Search Engine"> <input type="submit"> I am looking t ...

pythonhtmldjangovisual-studio-code

Interactive HTML5 map featuring geo tagged points

Seeking an HTML5-based tool to efficiently display a zoomable, panable map (similar to Google Maps) and incorporate a circle at a specific location upon clicking a button on a webpage. Any suggestions for HTML5-compatible frameworks or would JQuery be the ...

jqueryhtmlsencha-touchmappingkendo-ui

Activate the popup for sharing or bookmarking by clicking on a regular link

I am currently utilizing a Share/Bookmark script: <div class="singles-right"> <a href="#" class="bookmark"></a> <script type="text/javascript" src="http://static.addinto.com/ai/ai2_bkmk.js"></script> <a href="#" clas ...

javascripthtml

Using the ng-class directive to dynamically set classes based on the value returned from

I am facing an issue with setting the icon style based on a value returned from the controller. The console log confirms that the value is triggered correctly, but it appears that there is a problem with the Ng-class expression. Any assistance on this matt ...

javascriptcssangularjshtmlionic-framework

"Customizing the website's font: A step-by-step guide to replacing the default Roboto font with a custom font

Despite my efforts to globally override the font, I am still encountering instances where the Roboto font is not being replaced, particularly on MUI select and autocomplete components. import { createTheme } from '@material-ui/core/styles'; // A ...

cssreactjsmaterial-ui

Keep scrolling! There's no need to worry about reaching the end of the page and having to start over

I'm experiencing an issue where scrolling only works once when the page is initially loaded. I need it to be able to repeat from the beginning each time. <div class="content"> <div class="next-section blue">First Section</div> & ...

jquerycss

Strong tags are not functioning properly within paragraph tags in Firefox

It has come to my attention that when I insert <strong> into a <p>, the text does not appear bold. This issue seems to only occur in Firefox, as Chrome and Safari display it correctly. However, when I place <strong> inside a <li>, e ...

htmlcss

What is the process for integrating internal PHP code into this HTML form instead of relying on an external PHP file?

I am looking to create a basic HTML form and I want to use the method below for posting. My goal is to include all PHP code within the HTML file itself. (I understand that simply renaming contact.htm to contact.php is an option, but I need guidance on tra ...

phphtmlformspost

Arranging elements in HTML for Manipulating with JavaScript

I haven't started coding yet, but I'm contemplating the overall strategy. My front end is primarily composed of HTML tables, giving it an Excel-like appearance. I am considering generating default pages and then using JavaScript to dynamically m ...

javascripthtmlcss

What could be the reason for Chrome breaking up this straightforward bootstrap header into two lines?

Why is it that the code below displays correctly in one line in both FF and IE, but Chrome for some reason is showing it on two lines as if both span and button elements had "display:block;"? Even though the button has a computed display of "inline-block," ...

htmlcssgoogle-chrometwitter-bootstrap

Set the CSS table to have a width of 100% and ensure that the table data cells have hidden

My table has a 100% width, and some of the td elements have overflow hidden. I want to make their text appear as ellipsis when it's too long. I can achieve this with fixed td sizes, but I need them to be relative to the content. This question was fi ...

htmlcsshtml-tableoverflow

Django: Struggling with static files and navigating paths for CSS rendering

Sorry to ask, but I'm struggling with a problem and could use some help: My project directory has the following structure (there are more directories, but for now let's focus on these): projectfolder/ wsgi/ openshift/ templates ...

htmlcssdjangodjango-templatesdjango-staticfiles

Transform the appearance of a complex image by altering its color using CSS

In my quest to bring a unique functionality to life, I am looking to achieve the following: I want to layer two transparent images within a <div>: one representing an object and the other depicting a glowing effect around the object. When hovering ...

htmlcssimage

Developing tabbed sections in XSLT

Utilizing Angular JS within XSLT, I am aiming to develop a tab-based user interface using XML data. The requirement is to generate multiple links and corresponding div elements based on the number of nodes in the XML. To manage the display of these div ele ...

xmlangularjshtmlxslt