Arranging an image next to a form with rows

Note: Utilizing Bootstrap Framework

This is the design I am aiming for: https://i.sstatic.net/vAhzY.png

Code:

<!DOCTYPE>
<html>

<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>

<style>
.jumbotron
{
  margin-top: 20px;
}
.input-group, textarea
{
  margin-bottom: 10px;
}
</style>
<body>

  <div class = "container">
      <div class = "jumbotron text-center">
        <h2>Form</h2>
      </div>

        <form>
        <div class = "row">
          <div class = "col-md-4">
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1">First Name:</span>
              <input type="text" class="form-control" placeholder="First Name" aria-describedby="basic-addon1">
            </div>
          </div>

          <div class = "col-md-4">
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1">Last Name:</span>
              <input type="text" class="form-control" placeholder="Last Name" aria-describedby="basic-addon1">
            </div>
          </div>
        </div>

        <div class = "row">
          <div class = "col-md-2">
                <div class="input-group">
                   <span class="input-group-addon" id="basic-addon1">Age:</span>
                    <input type="text" class="form-control" placeholder="Age" aria-describedby="basic-addon1">
               </div>
              </div>

               <div class = "col-md-2">
                <div class="input-group">
                   <span class="input-group-addon" id="basic-addon1">Gender:</span>
                    <input type="text" class="form-control" placeholder="Gender" aria-describedby="basic-addon1">
               </div>
              </div>
            </div>

        <div class = "row">
          <div class = "col-md-4">
            <div class="input-group">
              <span class="input-group-addon" id="basic-addon1">Email Address:</span>
              <input type="text" class="form-control" placeholder="Email Address" aria-describedby="basic-addon1">
            </div>
            </div>

            <div class = "col-md-4">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">Phone Number:</span>
                <input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon1">
              </div>
            </div>
         </div>

         <div class = "row">
            <div class = "col-md-8">
              <textarea class="form-control" rows="3" placeholder = "Additional comments"></textarea>
            </div>
          </div>

          <div class = "row">
            <div class = "col-md-2">
              <button type="button" class="btn btn-default btn-lg">Submit</button>
            </div>
          </div>
        </form>
      </div>
  </body>
</html>

View the Demo Fiddle

I'm struggling to position an image next to my form as illustrated in figure 1.

I've experimented with various methods such as nested columns and fluid containers, but they caused the text boxes to shrink and created a large gap between the form and the image.

It appears that the rows are taking up 100% of the container width, making it challenging to adjust the width using CSS.

Any thoughts on how to achieve this layout?

Additionally, how can I center the form? I have tried several techniques that work for other elements without success.

htmlcss

Answer №1

To create the desired layout, you should implement a nested row structure. The outer columns act as wrappers for the form elements and image, while the inner columns that contain the form fields themselves should add up to 12.

Check out this Fiddle for reference

Keep in mind that all columns have been set to XS for the demo purpose. However, please note that the smaller columns may not display well on small screens.

.row > div {
    margin: 5px 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>    

<div class="container">
    <div class="jumbotron text-center">
        <h2>Form</h2>
    </div>

    <div class="row">
        <div class="col-xs-8">
            <form>
                <div class="row">
                    <div class="col-xs-6">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">First Name:</span>
                            <input type="text" class="form-control" placeholder="First Name" aria-describedby="basic-addon1">
                        </div>
                    </div>

                    <div class="col-xs-6">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">Last Name:</span>
                            <input type="text" class="form-control" placeholder="Last Name" aria-describedby="basic-addon1">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-3">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">Age:</span>
                            <input type="text" class="form-control" placeholder="Age" aria-describedby="basic-addon1">
                        </div>
                    </div>

                    <div class="col-xs-3">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">Gender:</span>
                            <input type="text" class="form-control" placeholder="Gender" aria-describedby="basic-addon1">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-6">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">Email Address:</span>
                            <input type="text" class="form-control" placeholder="Email Address" aria-describedby="basic-addon1">
                        </div>
                    </div>

                    <div class="col-xs-6">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">Phone Number:</span>
                            <input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon1">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12">
                        <textarea class="form-control" rows="3" placeholder="Additional comments"></textarea>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-2">
                        <button type="button" class="btn btn-default btn-lg">Submit</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="col-xs-4">
            <img class="img-responsive" src="http://placehold.it/800x600" />
        </div>
    </div>
</div>

Answer №2

To create a visually appealing layout, consider utilizing Bootstrap's grid classes to separate your <form> section from the image section.

Take a peek at this Codepen example.

I trust this information proves beneficial!

Answer №3

Check out this working fiddle that I've created.

.jumbotron {
  margin-top: 20px;
}

.input-group,
textarea {
  margin-bottom: 10px;
}

img{width:100%}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>

  <div class="container">
    <div class="jumbotron text-center">
      <h2>Form</h2>
    </div>

    <form>
      <div class="row">


        <div class="col-md-9">



          <div class="row">
            <div class="col-md-6">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">First Name:</span>
                <input type="text" class="form-control" placeholder="First Name" aria-describedby="basic-addon1">
              </div>
            </div>

            <div class="col-md-6">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">Last Name:</span>
                <input type="text" class="form-control" placeholder="Last Name" aria-describedby="basic-addon1">
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-3">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">Age:</span>
                <input type="text" class="form-control" placeholder="Age" aria-describedby="basic-addon1">
              </div>
            </div>

            <div class="col-md-3">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">Gender:</span>
                <input type="text" class="form-control" placeholder="Gender" aria-describedby="basic-addon1">
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">Email Address:</span>
                <input type="text" class="form-control" placeholder="Email Address" aria-describedby="basic-addon1">
              </div>
            </div>

            <div class="col-md-6">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">Phone Number:</span>
                <input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon1">
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-12">
              <textarea class="form-control" rows="3" placeholder="Additional comments"></textarea>
            </div>
          </div>

          <div class="row">
            <div class="col-md-4">
              <button type="button" class="btn btn-default btn-lg">Submit</button>
            </div>
          </div>
        </div>
        <div class="col-md-3">
        <img src="http://txtbits.com/wp-content/uploads/2015/07/bootstrap.png">
        </div>
      </div>
    </form>
  </div>

The interesting thing to note here is the grid system used by Bootstrap with 12 columns, which helps in creating responsive layouts. When designing your form, make sure to distribute your elements within these 12 columns effectively.

To achieve a layout similar to yours, consider dividing the content into two columns - one for inputs and another for larger elements like images. This way, you can structure your form using rows and columns while ensuring they collectively fill up the 12-column grid seamlessly.

Answer №4

To achieve the desired layout, simply select a single row and two columns (or manually divide with col-6) in Bootstrap. The framework will automatically adjust the width of elements. By incorporating a div container along with a form and an image on each side, you can create a visually pleasing design.

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

What is the best way to center a menu for a cohesive and balanced appearance?

I am encountering an issue with my design. I am attempting to center-align a menu, but I want it to appear uniform and consistent. I want it to resemble the layout shown in the image link below. https://i.sstatic.net/D3Rep.png I cannot understand why my ...

htmlcssbootstrap-5

Using Jquery to Retrieve the Content of Head and Body Tags from a String

Here is a string that I currently have: <head> This is the Head </head> <body> <div> <div> <p> Body Content <br /></p> <p>&nbsp; Hello World <br />< ...

javascriptjqueryhtmltags

What is the best way to activate CSS filters on VueJS once the project has been compiled?

While working on a Node server locally, my SVG filter functions properly. However, once I build the project and run it on a server, the filter stops working. This VueJS project is utilizing Webpack as its build tool. The process of building the app invol ...

javascriptcsssvgvue.jsfilter

Ways to center a vertically aligned SVG in relation to text using Bootstrap

After experimenting with bootstrap, I have encountered an issue where I cannot vertically center an inline SVG relative to text. Below is a simplified example showcasing this problem: <!DOCTYPE html> <html> <head> <link rel=& ...

htmlcsstwitter-bootstrapbootstrap-4

Div takes on the opacity of its parent element

I want to implement a modal popup using the Ajaxtoolkit's modalpopupextender, and so far it's working perfectly. While the popup is displayed, I need to dim out the rest of the page. To achieve this, I applied the modalPopup CSS class to the pop ...

asp.netcssajax

block the UI when a certain amount of time has passed

When I click on a button, I implement the following code: $(document).ready(function () { $('.find').click(function () { $.blockUI({ message: '<table><tr><td><img src="images/pleas ...

javascriptjqueryhtml

Paste a data point from an Excel spreadsheet into a JavaScript script

I'm encountering a major challenge. Currently, I am creating a login process for a client and here is the approach I have taken: function Jump(pal){ if (pal=='10528'){window.open('http://www.google.es','_parent')} Subs ...

javascripthtmlexcel

Steps for setting a background image for a div

I am facing an issue with 3 horizontally aligned images and a background image. The problem is that when I set the background image for the aligned images, it flows over them instead of staying behind. I want the 3 aligned images to be on top of the backgr ...

htmlcss

Unable to position the button next to the search bar

I'm struggling to get my search bar aligned next to my dropdown button. I've tried various alignment methods without success. Both buttons are within a container, causing the search bar to span 100% of the container's width. I also attempted ...

htmlcssbuttonbootstrap-4

A div positioned in front of a centrally-located div

Managing a website with numerous headlines can be a challenge. When a user clicks on a headline, a button located 10px to the left of the headline should appear. However, the catch is that the headlines must always remain centered, regardless of whether th ...

javascriptjqueryhtmlcss

Using a scrapy spider to navigate through microsoft.com in search of the sign-in link

I have encountered an issue while trying to locate the sign-in link using a scrapy crawler on various websites, such as www.microsoft.com. Initially, the response I receive from the website does not contain the sign-in link. However, upon inspecting the "V ...

htmlscrapyweb-crawler

Experience the seamless transition of new CSS animations

I designed a basic HTML game where a moving box disappears when clicked on. However, the animation that follows does not originate from the click location but rather from the original position. I believe the remove @keyframes at 0% should be based on the ...

javascripthtmlcsscss-animations

Tips for cropping an image using CSS with dimensions specified for width, height, and x and y coordinates

As I work on implementing a cropping feature using react-easy-crop, my goal is to store the user's image along with pixel coordinates that dictate their preferred cropping area. My objective is to utilize the parameters provided by react-easy-crop in ...

javascripthtmlcssreactjs

Stable Banner with Automatic Scroll to Sections

I have implemented a script that allows for smooth scrolling to different sections within a webpage when clicking on links in the top navigation menu. In the HTML, I've assigned IDs to each section (section1, section2, section3, etc.) and linked these ...

javascriptjqueryhtmlcss

Exploring the Functionality of POST in AJAX Requests

I'm facing an issue where the data is not displaying on my page even though I am using a Github URL and Ajax POST. Can anyone help me identify what needs to be fixed in the code below? <div id="content"> </div> window.onload = ...

htmljqueryjsonajax

Concern with Isotope's masonry feature

I'm at my wit's end! The container div I'm dealing with is 1170px wide. My goal is to fit in 3 divs within this width. The first div is 275px wide, the second is 580px wide, and the third is also 275px wide. Altogether, these divs should ad ...

javascriptjqueryhtmlcssjquery-isotope

Manipulating CSS content property in React using Material UI

I am trying to set content: "" on my i element: "& i::before": { content: "" }, "& i::after": { content: "" }, However, the style is not being applied and I am seeing an ...

cssreactjsmaterial-ui

Instructions for changing the background of a specific area to gray

Could use some assistance in changing the red area to grey, tried numerous solutions but can't figure it out. Any help would be highly appreciated! Looking to change the background to a light grey excluding the top bar and navigation. Image Current ...

htmlcsstwitter-bootstrap

Error: Property 'onclick' cannot be set on a null object

JavaScript isn't my strong suit, so I'm struggling to solve this issue. The console is showing me the following error message: Uncaught TypeError: Cannot set property 'onclick' of null <script> var modal = document.getE ...

javascripthtmlcss

When hovering, the CSS border-bottom should extend

I am looking to create an animated border effect. When hovering over the link, I want the border-bottom to extend seamlessly from left to right. After much searching, I am still unsure what this effect is called. Below is the code I have: .a{ width ...

htmlcss