Bootstrap 3.0.0 adding extra space on row class

I am using Bootstrap 3.0.0. I am trying to have a row that spans the whole screen (as opposed to putting it in a 'container' where it will be centred with the rest of the content.

For some reason, when I do this, the row adds an extra space to the end of the page, causing the horizontal scroll bar to appear. The space is approximately 5px.

My code looks like this:

    <body>
        <div class="row">
            <div class="col-xs-6">
                hello
            </div>
            <div class="col-xs-6">
                Hello
            </div>
        </div>
    <script src="js/bootstrap.min.js"></script>
</body>

I have not made any modifications at all, and no custom CSS. Basically I want to change the background colour of the row, but I want it to span accross the entire page.

Thanks

Answers


This is a known issue in BS 3 - https://github.com/twbs/bootstrap/issues/9862?source=cc

You can workaround it using...

.row {
  margin-left: 0px;
  margin-right: 0px;
}

Skelly is right ! with that solution you problem will be solved... but in case you see that your cols are stick to the left or right and are not centered , you can use this code ( with a little change to the Skelly's Code)

.row {
  margin-left: auto !important;
  margin-right: auto !important;
}

Need Your Help

How to load data dynamically on tab click from controller in spring mvc in same jsp page?

java ajax spring

I am working with Ajax/jquery to reload a division of the page after clicking on a tab, but when I am running the code new jsp is displaying...

Access VBA remove CR & LF only from the beginning of a text string by searching for them

ms-access vba

I need to remove line breaks from the beginning of a memo type records. I dont want to use the replace function as it would remove all line breaks from the record which is not desired. Its only the...