CODEWITHSUNDEEP
htmlcsstwitter-bootstrapgridfrontend
Gonzalo Dambra
Gonzalo Dambra

Reputation: 980

Why is my bootstrap grid system not working?

I don't get why my grid system is not being displayed as expected.

Html code:

<header class="navbar navbar-dark navbar-expand bd-navbar bg-dark p-0 shadow">
    <div class="col-sm-12 col-md-12 col-lg-12">
        <div class="col-sm-12 col-md-12 col-lg-3 text-sm-center text-md-center text-lg-left">
            <a class="navbar-brand"><!-- img src is django code, ignore it-->
                <img src="{% static 'images/logo.jpg' %}" class="rounded-circle" style="height:30px;width:30px;">
                <label style="font-family: 'Oswald', 'DejaVu Sans Mono' !important; color:white;">Title</label>
            </a>
        </div>

        <div class="col-sm-12 col-md-12 col-lg-9 text-sm-center text-md-center text-lg-left">
            <!--my form here-->
        </div>
    </div>
</header>

The important thing is the lg allingment here. You can see how I have a div with 12 cols, which has two divs inside, one with 3 cols and the other with 9 (so they make 12 in addition). The expected is to see them as explained in Grid system - Bootstrap. But the result I'm getting is...

=)

Why???!!! Thanks!

Upvotes: 0

Views: 365

Answers (1)

Maxime Delgado
Maxime Delgado

Reputation: 96

Your col <div>s should be placed inside row <div>s as follows:

<div class="row">
  <div class="col-9"></div>
  <div class="col-3"></div>
</div>

Upvotes: 1

Related Questions