Class="row" not working

HTML-CSS
1

Here’s my work: https://codepen.io/bradrar1/pen/zjGRRZ

In my “contact me” section at the bottom of my portfolio, the second grid is not working.

this paragraph:

Blockquote
Want to get in touch with me? Be it to request more info about myself or my experience, to ask for my resume, tips on how to solve your sudoku, random questions about the universe and the meaning of life, or even if only for some nice Fika here in stunning Toronto… just feel free to drop me a line anytime. I promise to reply A.S.A.P.

Should be on the right side. But it appears below my form.

Help Please

2

Hi!

Actually the .row is working. What happens is that you have a .left-margin for the form of 50px in the css and this is causing your form taking more than half of the space. If you try class=col-lg-5 you’ll see that the text will go to the right where you want it.

Hope that helps.

2 Likes
3

Thank you for the explanation. What I did is remove the .left-margin . I will try to figure out what to do next.

Thank you again

4

Speaking of which. Do you know how to add a margin for the form without moving the text on the right side besides class=col-lg-5 ?

5

I would put the contact info section inside a container like this:

<div class="container">
    <div class="row">
        <div class="col-lg-6">
           Your code here
        </div>

        <div class="col-lg-6">
           The text here
        </div>

    </div>
</div>
1 Like
6

if you want to keep the left edge of that form from butting up against the edge of the browser, but are worried about margins pushing things out… try offsets…

something like: col-lg-5 .col-lg-offset-1

It will offset the column and leave that 1/first column (of 12 across a page) empty

from: https://getbootstrap.com/docs/3.3/css/#grid-offsetting

1 Like
7

Ok I went in and tried it because I realized you probably have Bootstrap 4.00… and offset has a bug!

So a workaround seems to be to use offset-lg-1 instead of col-lg-offset-1 as per Bootstrap 3.X.X

played around with it here if you want to see what it looks like…

1 Like
8

Just tried it. It works. Container is very usefull. Thank you LervinU

9

Hello Darren,

Thanks for the solution. But I think I will go with the class=container

because I think it’s easier.

Thanks again for the reply.

1 Like
10

sorry… missed his reply… yah the usual bootstrap syntax works with a container around everything, then a row… then the columns… didn’t realize it was missed. good catch @LervinU :smiley:

2 Likes
11

This actually solved my problem but only Internet Explorer… Its still not working for EDGE Browser…

12