CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Magic Rabbit
Magic Rabbit

Reputation: 21

Removing margin from Bootstrap?

I simple can't seem to get how to remove these margins, as you can see I made the container have a blue background, and for some reason I can see that in the right and left side, meaning that my two div boxes don't cover 100% of the screen. I tried with margin:0; padding:0; and such but without luck, hope someone can help me out. I been reading other threads, but unable to find one that fixes my issue.

hope you can help.

HTML 

<div class="container">
        <div class="row">
            <div class="col-xs-2 col-md-2 col-lg-2 left_nav">

            <ul>
                <li><p>cheese</p></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>


            </div>
            <div class="col-xs-10 col-md-10 col-lg-10 mid_content">

            </div>
        </div>
    </div>

CSS 

* {

    margin:0;
    padding:0;

    }

    body {

        background:black;
        color:white;
        font-family:Arial;

    }

    .row {

    background:purple;
    margin:0;
    padding:0;

    }

    .left_nav {

    background:black;
    height:auto;
    min-height:500px;

    }

    .mid_content {

    background:#F5D000;
    height:auto;
    min-height:500px;


    }

    .container {

    width:100%;
    background:blue;

    }

Upvotes: 1

Views: 146

Answers (1)

CannonFodder
CannonFodder

Reputation: 332

If you want to cover 100% of the screen, you need to use the container-fluid class.

This isn't a problem with margins. The default "container" class is for fixed width layouts, container-fluid is for full-width.

More information is available on the official boostrap documentation here.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Upvotes: 1

Related Questions