Solved

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

Posted on 2016-09-18
2
119 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 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:Cesar Aracena
ID: 41803819
Perfect! Thanks a lot !!!
0

Featured Post

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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?
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

730 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