?
Solved

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

Posted on 2016-09-18
2
Medium Priority
?
141 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

770 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