Daniel Alexander Daniel Alexander - 16 days ago 5
CSS Question

Bootstrap, Two columns won't go side by side (Form + Message)

I'm trying to make a contact section with two columns, an lg-8 and lg-3 (EDIT) + 1 buffer column:


  • First Column: Contact Form

  • Second Column: A simple text message from me.



I've looked around several places and cannot understand what is wrong with my code. I've done everything [bootstrap][1] resource says to and I'm getting one column underneath the other.

This is in a 'div class="container"'

<div class="formattedContact" id="contact">
<h3>Contact Me</h3>
<div class="wrapper">
<div class="content-main">
<form id="contactForm">
<form class="form-item">
<label for="inputName" ></label>
<input type="text" name="name" placeholder="Name" width="100%"></input>
</form>
<form class="form-item">
<label for="inputEmail" ></label>
<input type="text" name="email" placeholder="Email" width="100%"></input>
</form>
<form class="form-item">
<label for="inputPhone" ></label>
<input type="text" name="phone" placeholder="Phone" width="100%"></input>
</form>
<form class="form-item">
<label for="inputMsg" >Message</label><br>
<textarea rows='5' placeholder='Message' > </textarea>
</form>
<button type="submit">Send</button>
</form>
</div>
<div class="content-secondary">
<p>Hullo, Shoot me a text</p>

</div>
</div>
</div>


and the CSS

.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}

Answer

I made several changes, both to get it to work as you describe and to get the labels linked to the inputs. It is a little redundant to have the placeholders match the labels, but you can do what you want to with that. You can change the 'xs' back to 'lg' in the grid class names, so they will be more appropriate outside of a small snippet. You may find that you want something in between, such as 'sm', (ex 'col-sm-8') since the classes take effect for the size specified between the dashes and larger.

Also, you know that the width numbers at the end of these bootstrap grid system class names are typically supposed to add up to 12, not 11 for a given screen width specifier, right?

#contactForm label {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="formattedContact" id="contact">
        <h3>Contact Me</h3>
        <div class="wrapper">
            <div class="content-main">                  
                <form id="contactForm" class="col-xs-8">
                  <label for="inputName" >Name</label>
                  <input type="text" name="inputName" placeholder="Name" width="100%">
                  <label for="inputEmail" >Email</label>
                  <input type="text" name="inputEmail" placeholder="Email" width="100%">
                  <label for="inputPhone" >Phone</label>
                  <input type="text" name="inputPhone" placeholder="Phone" width="100%">
                  <label for="inputMsg" >Message</label>
                  <textarea rows='5' placeholder='Message' name="inputMsg" > </textarea>
                  <button type="submit">Send</button>
                </form>
            </div>
            <div class="content-secondary col-xs-3">
                <p>Hullo, Shoot me a text</p>

            </div>
        </div>
    </div>
</div>