CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
georgej
georgej

Reputation: 3311

Bootstrap columns throws off html width

I am building an Angular2 app and I am working in a component that takes up the whole width of the page. When I have this in the html file for my component the page is fine:

<div class="row">
    (literally nothing in here)
</div>

But when I add a col-md-12 div in side this row, my html get thrown off and becomes too wide for the page and allows me to scroll horizontally, which I don't want to be able to do: 

<div class="row">
    <div class="col-md-12">
        (literally nothing in here)
    </div>
</div>

Any help on how to fix this is greatly appreciated.

Upvotes: 1

Views: 62

Answers (2)

user5201343
user5201343

Reputation:

First off, you should be wrapping your <div class="row"> tags in <div class="container"> OR <div class="container-fluid">, like so.

<div class="container">
    <div class="row">
        <div class="col-md-12"></div>
    </div>
</div>

In this case, use container-fluid which will allow your content to span the entire width of the screen.

Upvotes: 1

Stefan Svrkota
Stefan Svrkota

Reputation: 50643

Always use container-fluid instead of col-md-12 when you want to use full width of the container, that's the fix you are looking for. From Bootstrap doc:

Use .container-fluid for a full width container, spanning the entire width of your viewport.

Upvotes: 1

Related Questions