Trouble with row and columns

1

Hi everyone,

I’m having some trouble with my rows and columns. I’m trying to create a contact sheet with 1 row and 2 columns. I’m running into an issue where the right side (and probably left too) of the column does not fill in 50% width of the box as i’d like it to. I’m not sure what i’m doing incorrectly. Any help or insight would be very very helpful. Sorry ahead of time for the messy and probably incorrect coding.

Thanks everyone

2

Hey. They are filling the horizontal space correctly, do you want them to fill the space vertically as well? Or do you just want the content to be in the center of the two columns?

3

Hey noyb, thanks for taking a look. Ultimately, I’d like a contact form to be on the left half of the box and some social media icons on the right half. The content will be going from top to bottom vertically on each half. [ 1 | 2 ] something like that. Do you have any idea why the form codes that I’ve put in seems like it’s only filling 3/12 of the column grid vs the 6/12 I want? Sorry if I’m not making sense.

4

Alright, if you want the form to fill the column it’s in, try using the bootstrap forms (since you’re already using it), like so:

      <div class="col-md-6">
        <form>
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" placeholder="Enter your name">
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" class="form-control" id="email" placeholder="Enter your email address">
          </div>
          <div class="form-group">
            <label for="message">Write something...</label>
            <textarea class="form-control" id="message" rows="5"></textarea>
          </div>
        </form>        
      </div>

Then, if you want the icons to be in the center of the other half, use a text-center class on the container div:

<div class="col-md-6 text-center">

Let me know if this was what you wanted!

5

Thanks noyb. That was really helpful, but i’m still unable to bring the icons to the other half. Is the red box still using a 12 grid layout?

6

It isn’t, it appears you forgot to close two “.form-group” divs (first and second one). Fix that and the icons should be where you want them.

7

Oh my… how careless. Thank you noyb! You’re a life saver. I’m guessing my original codes before 10 rewrites had the same issue… Organizing tags is still a very new thing. Wish there was an easy way to make sure I have closing tags for every start tag.

8

All good, that’s all practice!

No problem, glad you got it sorted out.