Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2016-09-18
2
Medium Priority
?
155 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:Cesar Aracena
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 6

Accepted Solution

by:
ResQTek Nancy earned 2000 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:Cesar Aracena
ID: 41803819
Perfect! Thanks a lot !!!
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
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 learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

609 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