CODEWITHSUNDEEP
htmlcssbootstrap-4
HalfWitCrab
HalfWitCrab

Reputation: 53

Trouble Aligning Content w/ Bootstrap and CSS

My mentor wants me to create a site based off a wireframe he sent, but I haven't been able to position the text on these "hero" images.

What the hero image should look like What the hero image actually looks like

It seems like the text is kind of stuck in the right half of the container, which is weird because offsetting them should have shoved them over to the left. Unless, of course, I did it wrong.

I didn't do much to it and I'm confused, especially since I used an offset in the same document that's functioning properly. I tried using classes like justify-content-left, but they seemed to hit an invisible wall in the middle of the container.

<div class="p-2" id="navigationFilter">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 offset-lg-6">
                        <header class="pt-5">
                            <p>Enjoy peace of mind knowing that you can</p>
                            <h1>Quickly send for help and alert loved ones</h1>
                            <button class="btn btn-lg btn-primary" type="button">Get Started</button>
                        </header>
                    </div><!-- col -->
                </div><!-- row -->
            </div><!-- container -->
        </div><!-- translucent-->

Upvotes: 1

Views: 26

Answers (1)

Arleigh Hix
Arleigh Hix

Reputation: 10877

You need to remove the offset-lg-6 class.

Offset classes

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

-- https://getbootstrap.com/docs/4.3/layout/grid/#offset-classes

Upvotes: 1

Related Questions