Solved

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

Posted on 2016-09-18
2
85 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
Comment Utility
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
Comment Utility
Perfect! Thanks a lot !!!
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

772 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now