Solved

How can I build a mixed-columns form in PHP using bootstrap 3?

Posted on 2016-09-18
2
106 Views
Last Modified: 2016-09-18
I'm trying to make a 1 column form in bootstrap with some rows sharing a second column. It's for making an employee profile editing page in an intranet so I don't really care about medium or small screen sizes.

I'm trying to make it using an example I found here but the result is not what I need. I'm used to work with CSS style sheets but to be honest, bootstrap grid system always confuses me.

Here's a mockup of what I need:
This is the format I need
Here's what I'm getting:
This is what I needIf anyone could give me an empty structure with a couple of lines so I can start from there... it would be awesome!!!

Thanks in advance!
0
Comment
Question by:Caracena
2 Comments
 
LVL 5

Accepted Solution

by:
ResQTek Nancy earned 500 total points
ID: 41803782
With a second row spanning the two columns in the first row, I achieved your layout (give or take some details). I hope this is helpful!

<div class="container">
<div class="row">
    <div class="col-md-4">
      First Name<br/>
      <p><input type="text" /></p>
      <p><input type="text" /></p>
      <p><input type="text" /></p>
      <p><input type="text" /></p>
    </div>
    <div class="col-md-4">
      <img src="http://www.aal-europe.eu/wp-content/uploads/2014/10/green.jpg" height="275"/>
    </div>
</div>
<div class="row">
  <div class="col-md-8">
    <p><input type="text" /></p>
    <p><input type="text" /></p>
  </div>
</div>
<style>
  p {
    margin: 5px 5px 40px 5px;  
  }
  input {
    width: 100%;
  }
</style>
1
 
LVL 6

Author Closing Comment

by:Caracena
ID: 41803819
Perfect! Thanks a lot !!!
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
login jsp example 24 47
Loop through multiple arrays 13 27
Help to align the buttons in a row 2 26
Creating Functions in phpMyAdmin 8 12
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question