How to get sidebar full length of page below top navigation with bootstrap 4? - Twitter bootstrap

SPLDev
July 4, 2017
125 views
0 votes
2 Answers

New to bootstrap and using the alpha version of bootstrap 4 to create a site for my home network.

I’d like the sidebar to fill the entire left side of the page, starting below the top nav bar. Right now there is a small 20 or so pixel gap between the top navbar and sidebar. I’d also like it to continue all the way down, despite the size of the page.

I’m using the admin template from bootstrap and modified it to my needs.

https://jsfiddle.net/ced6ee78/

CSS:

body, html {
  height: 100%;
}

body {
  padding-top: 70px;
}

/* BrandName Top Navbar */
.so-navbar-top {
    background-color: #087ca7;
    height: 48px;
}

.so-navbar-top .navbar-brand {
  font-size: 1.5em;
}

.so-navbar-top .nav-item {
  font-size: 0.75em;
}

/* BrandName Sidebar */
.so-sidebar {
  background-color: #13293d;
}

/* workaround modal-open padding issue */

body.modal-open {

padding-right: 0 !important;

}




#sidebar {

padding-left:0;

}



/*

* Off Canvas at medium breakpoint

* --------------------------------------------------

*/


@media screen and (max-width: 48em) {


  .row-offcanvas {

    position: relative;

    -webkit-transition: all 0.25s ease-out;

    -moz-transition: all 0.25s ease-out;

    transition: all 0.25s ease-out;

  }



  .row-offcanvas-left
  .sidebar-offcanvas {

    left: -33%;
  }



  .row-offcanvas-left.active {

    left: 33%;

    margin-left: -6px;

  }



  .sidebar-offcanvas {

    position: absolute;

    top: 0;

    width: 33%;

    height: 100%;

  }

}



/*

* Off Canvas wider at sm breakpoint

* --------------------------------------------------

*/


@media screen and (max-width: 34em) {

  .row-offcanvas-left
  .sidebar-offcanvas {

    left: -45%;

  }



  .row-offcanvas-left.active {

    left: 45%;

    margin-left: -6px;

  }



  .sidebar-offcanvas {

    width: 45%;

  }

}



.card {

    overflow:hidden;

}



.card-block .rotate {

    z-index: 8;

    float: right;

    height: 100%;

}



.card-block .rotate i {

    color: rgba(20, 20, 20, 0.15);

    position: absolute;

    left: 0;

    left: auto;

    right: -10px;

    bottom: 0;

    display: block;

    -webkit-transform: rotate(-44deg);

    -moz-transform: rotate(-44deg);

    -o-transform: rotate(-44deg);

    -ms-transform: rotate(-44deg);
    transform: rotate(-44deg);

}

HTML

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/brandname/css/style.css" rel="stylesheet">

    <script src="assets/jquery/jquery.min.js"></script>
    <script src="assets/jquery-ui/jquery-ui.min.js"></script>

    <title>Dashboard | BrandName</title>

  </head>

  <body>

    <nav class="navbar fixed-top navbar-toggleable-sm navbar-light bg-fade mb-3 so-navbar-top">

      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="flex-row d-flex">

        <a class="navbar-brand mb-1" href="#" title="ServiceOps">BrandName</a>

        <button type="button" class="hidden-md-up navbar-toggler" data-toggle="offcanvas" title="Toggle responsive left sidebar">
          <span class="navbar-toggler-icon"></span>
        </button>

      </div>

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

        <ul class="navbar-nav ml-auto">

          <li class="nav-item">
            <a class="nav-link" href="#">
              <i class="fa fa-bell-o"></i><span class="badge badge-pill badge-danger">1</span> Alerts</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">
              <i class="fa fa-cog"></i> Settings
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">
              <i class="fa fa-user"></i> Profile
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">
              <i class="fa fa-sign-out"></i> Logout
            </a>
          </li>

        </ul>

      </div>

    </nav>

    <div class="container-fluid" id="main">

      <div class="row row-offcanvas row-offcanvas-left">

        <div class="col-md-3 col-lg-2 sidebar-offcanvas so-sidebar" id="sidebar" role="navigation">

          <ul class="nav flex-column pl-1">

            <li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>

            <li class="nav-item">

              <a class="nav-link" href="#submenu1" data-toggle="collapse" data-target="#submenu1">Sites</a>

              <ul class="list-unstyled flex-column pl-3 collapse" id="submenu1" aria-expanded="false">
                <li class="nav-item"><a class="nav-link" href="">Item 1</a></li>
                <li class="nav-item"><a class="nav-link" href="">Item 2</a></li>
              </ul>

            </li>

          </ul>

        </div>

        <div class="col-md-9 col-lg-10 main">

          <!--toggle sidebar button
          <p class="hidden-md-up">
            <button type="button" class="btn btn-primary-outline btn-sm" data-toggle="offcanvas"><i class="fa fa-chevron-left"></i> Menu</button>
          </p>-->

          <h1 class="display-2 hidden-xs-down">Dashboard</h1>

          <div class="row mb-3">

            <div class="col-xl-3 col-lg-6">

              <div class="card card-inverse card-success">

                <div class="card-block bg-success">

                  <div class="rotate">
                    <i class="fa fa-user fa-5x"></i>
                  </div>

                  <h6 class="text-uppercase">Users</h6>
                  <h1 class="display-1">134</h1>

                </div>

              </div>

            </div>

            <div class="col-xl-3 col-lg-6">

              <div class="card card-inverse card-danger">

                <div class="card-block bg-danger">

                  <div class="rotate">

                    <i class="fa fa-list fa-4x"></i>

                  </div>

                  <h6 class="text-uppercase">Posts</h6>
                  <h1 class="display-1">87</h1>

                </div>

              </div>

            </div>

            <div class="col-xl-3 col-lg-6">

              <div class="card card-inverse card-info">

                <div class="card-block bg-info">

                  <div class="rotate">

                    <i class="fa fa-twitter fa-5x"></i>

                  </div>

                  <h6 class="text-uppercase">Tweets</h6>
                  <h1 class="display-1">125</h1>

                </div>

              </div>

            </div>

            <div class="col-xl-3 col-lg-6">

              <div class="card card-inverse card-warning">

                <div class="card-block bg-warning">

                  <div class="rotate">

                    <i class="fa fa-share fa-5x"></i>

                  </div>

                  <h6 class="text-uppercase">Shares</h6>
                  <h1 class="display-1">36</h1>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

    <footer class="container-fluid">

      <p class="text-right small">&copy;2017 BrandName</p>

    </footer>

  </body>

</html>

Answers

- AJMaxwell
- July 4, 2017 at 1:51 am
- 0 votes
0
padding-top on body should be the same height as your navbar.

In this case:
```
body { padding-top: 48px; }
```
If you need more spacing for the content in the left nav and main content area, add padding/margin to .so-sidebar and .main.
Login or Signup to reply.

- ChavaGeldzahler
- July 4, 2017 at 2:43 am
- 0 votes
0
1. The gap between the header and sidebar is caused by padding-top: 70px; on the body, which causes everything besides for the fixed header to be 70px from the top of the page.
You need this rule to prevent all other elements from starting behind your fixed header, however, to prevent any gap, give it the exact height of your header.
```
padding-top: 48px;
```
1. To make the sidebar take up the entire length of the page, give it a minimum height of 100vh minus the body’s padding (header’s height)
You can do that with CSS3’s calc():
```
min-height: calc(100vh - 48px);
```
With this layout, you can put the footer together with the rest of the app to prevent it from appearing below the sidebar.

Here’s a jsFiddle.

The other option would be adding position: fixed to the sidebar, and adding padding/margins so the rest of the elements don’t overlap.
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

How to get sidebar full length of page below top navigation with bootstrap 4? – Twitter bootstrap

Answers