Twitter Bootstrap White Gap on Right Side of Page

Twitter bootstrap white gap on right side of page

This might be a little late but I found the other answers to be misleading.

It is true that the row class is what is causing the issue, but that is because it is always supposed to be placed inside a container element.

from http://getbootstrap.com/css/ :

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

The container element usually has a -15px padding on both right and left and the row class has a 15px padding on right and left. The two cancel each other out. If one of the two is not present you will see extra space.

White Space Right Side of Bootstrap Website

I've added :

 html  {

    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 

}

Into your CSS at the very top above the other classes and it seemed to fix your issue.

Twitter Bootstrap: white space on left and right side in smaller screen widths?

In bootstrap-responsive.css, the body gets a 20px padding on the left and right at smaller windows sizes. If you don't want that at all, remove it from your version. It's at line 803 and looks like this:

@media (max-width: 767px) {
  /*body { These are the lines you want to remove
    padding-right: 20px; 
    padding-left: 20px;
  }*/

If you just want to remove the white space on a certain element or class, add these margins to it:

 margin-left:-20px;
 margin-right:-20px;

Bootstrap 4 white space on right side

Your issue is because your footer has a row without a container so you get margin out of the right side. A little tip for you in future, inspect your elements and delete them until the error disappears, then you know what is causing the error

Fix your page by adding a container class to your footer:

<footer class="pt-4 my-md-5 pt-md-5 border-top text-center container">
  <div class="row">
    <div class="col-12 col-md">
      <img class="mb-2" src="img/logo-kurz.svg" alt="Sample Image" width="75" height="75">
      <small class="d-block mb-3 text-muted">© 2018</small>
    </div>
    <div class="col-6 col-md text-center">
      <h5>Links</h5>
      <ul class="list-unstyled text-small">
        <li><a class="text-muted" href="http://drohnen-vz.de/agb">AGB</a></li>
        <li><a class="text-muted" href="http://drohnen-vz.de/impressum">Impressum</a></li>
        <li><a class="text-muted" href="#">Datenschutzrichtlinien</a></li>
      </ul>
    </div>
    <div class="col-6 col-md text-center">
      <h5>Partner</h5>
      <ul class="list-unstyled text-small">
        <li><img src="img/partner-1.svg" width="100px"> <img src="img/partner-dhl.svg" width="100px"></li>
        <li><br></li>
        <li><img src="img/partner-sofort.svg" width="100px"> <img src="img/partner-paypal.svg" width="100px"></li>
      </ul>
    </div>
  </div>
</footer>

Webpage shows white right margin on mobile screen. How to remove this white margin?

Oh, it's a very frequent problem with bs3. Until you understand the principle of bootstrap grid system. You should never change .container's side paddings because inside .rows have negative side margins.

All you need to fix your webpage is to remove this (design.css line 185):

.container{padding:10px 0;}

If default bootstrap grid's margins and paddings doesn't fit your needs, you can overwrite it, but firstly you should learn how it works taking into account that you should make changes for all resolutions.

Unwanted white space on right side in mobile view

I think there might be one element on your page which might have a width and a padding or margin exceeding 100%.
When 'inspecting' the page and hover over the white space you might select an element there which is going outside of the wanted page.

Try and find this using the inspect element and change this in CSS with using media queries

Bootstrap 4, remove white space next to dark column on the right side

You can add the class .justify-content-between to the .row:

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";

body {

  font-family: 'Poppins', sans-serif;

  background: #fafafa;

}

p {

  font-family: 'Poppins', sans-serif;

  font-size: 1.1em;

  font-weight: 300;

  line-height: 1.7em;

  color: #999;

}

a,

a:hover,

a:focus {

  color: inherit;

  text-decoration: none;

  transition: all 0.3s;

}

.navbar {

  padding: 15px 10px;

  background: #fff;

  border: none;

  border-radius: 0;

  margin-bottom: 40px;

  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);

}

.navbar-btn {

  box-shadow: none;

  outline: none !important;

  border: none;

}

.line {

  width: 100%;

  height: 1px;

  border-bottom: 1px dashed #ddd;

  margin: 40px 0;

}

.wrapper {

  display: flex;

  width: 100%;

  align-items: stretch;

}

#sidebar {

  min-width: 250px;

  max-width: 250px;

  background: #7386D5;

  color: #fff;

  transition: all 0.3s;

}

#sidebar.active {

  margin-left: -250px;

}

#sidebar .sidebar-header {

  padding: 20px;

  background: #6d7fcc;

}

#sidebar ul.components {

  padding: 20px 0;

  border-bottom: 1px solid #47748b;

}

#sidebar ul p {

  color: #fff;

  padding: 10px;

}

#sidebar ul li a {

  padding: 10px;

  font-size: 1.1em;

  display: block;

}

#sidebar ul li a:hover {

  color: #7386D5;

  background: #fff;

}

#sidebar ul li.active>a,

a[aria-expanded="true"] {

  color: #fff;

  background: #6d7fcc;

}

a[data-toggle="collapse"] {

  position: relative;

}

.dropdown-toggle::after {

  display: block;

  position: absolute;

  top: 50%;

  right: 20px;

  transform: translateY(-50%);

}

ul ul a {

  font-size: 0.9em !important;

  padding-left: 30px !important;

  background: #6d7fcc;

}

ul.CTAs {

  padding: 20px;

}

ul.CTAs a {

  text-align: center;

  font-size: 0.9em !important;

  display: block;

  border-radius: 5px;

  margin-bottom: 5px;

}

a.download {

  background: #fff;

  color: #7386D5;

}

a.article,

a.article:hover {

  background: #6d7fcc !important;

  color: #fff !important;

}

#content {

  width: 100%;

  padding: 20px;

  min-height: 100vh;

  transition: all 0.3s;

}

@media (max-width: 768px) {

  #sidebar {

    margin-left: -250px;

  }

  #sidebar.active {

    margin-left: 0;

  }

  #sidebarCollapse span {

    display: none;

  }

}

<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1,         shrink-to-fit=no">

    <!-- Font Awesome JS -->

    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>

    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Custom styles for this template -->

    <link href="css/style.css" rel="stylesheet">

    <title>Hello, world!</title>

  </head>

<body>

  <!-- Optional JavaScript -->

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <div class="container-flex">

  

    <!-- navbar top-->

    <nav class="navbar navbar-expand-lg navbar-light bg-dark">

      <a class="navbar-brand" href="#">Navbar</a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>

      </button>

      <div class="collapse navbar-collapse" id="navbarTogglerDemo02">

        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">

          <li class="nav-item active">

            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="#">Link</a>

          </li>

          <li class="nav-item">

            <a class="nav-link disabled" href="#">Disabled</a>

          </li>

        </ul>

        <form class="form-inline my-2 my-lg-0">

          <input class="form-control mr-sm-2" type="search" placeholder="Search">

          <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>

        </form>

      </div>

    </nav>

  </div>

  <div id="wrapper">

    <div class="container-fluid">

      <div class="row justify-content-between">

      

        <!-- Sidebar -->

        <nav id="sidebar">

          <ul class="list-unstyled components">

            <li class="active">

              <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>

              <ul class="collapse list-unstyled" id="homeSubmenu">

                <li><a href="#">Home 1</a></li>

                <li><a href="#">Home 2</a></li>

                <li><a href="#">Home 3</a></li>

              </ul>

            </li>

            <li><a href="#">About</a></li>

            <li><a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>

              <ul class="collapse list-unstyled" id="pageSubmenu">

                <li><a href="#">Page 1</a></li>

                <li><a href="#">Page 2</a></li>

                <li><a href="#">Page 3</a></li>

              </ul>

            </li>

            <li><a href="#">Portfolio</a></li>

            <li><a href="#">Contact</a></li>

          </ul>

          <ul class="list-unstyled CTAs">

            <li><a href="https://bootstrapious.com/tutorial/files/sidebar.zip" class="download">Download source</a></li>

            <li><a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a></li>

          </ul>

        </nav>

        <div class="container-flex d-flex" style="width: 40%">

          <div class="col">

            <!--main page-->

            <p>Main Content</p>

          </div>

        </div>

        <div class="container-flex d-flex" style="width: 40%">

          <div class="col bg-dark">

            <!--Code Editor-->

            <p>Code Editor</p>

          </div>

        </div>

      </div>

    </div>

  </body>

</html>

White space to the right hand side of the footer

Remove the margin-left: -15px; and margin-right: -15px; from your .row css class.

Remove white gap spaces in the left and right sides

I'm assuming that you're trying to make your page full-width, rather than 1170px wide and centered, which is what the .container bootstrap class does. If that is the case, all you need to do is replace .container with .container-fluid:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            foo, bar, foobar 
        </div>
    </div>
</div>

As I don't see any .container declarations in your excerpt, the changes should occur in your master page. Also remember that the number of columns per each .row should always amount to 12 (2 x .col-md-6, 3 x .col-md-4, etc).

CodePen

---

Related Topics