CODEWITHSUNDEEP
htmlcsstwitter-bootstrapsidebar
SoftTimur
SoftTimur

Reputation: 5540

Apply bootstrap grid to a part of the page

I want to make a sidebar with a fixed width, and use bootstrap grid to the rest of the page. The following code (JSBin) does not work: we see that the bootstrap grid is applied to the entire page.

Does anyone know if it is achievable?

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
      .fixed {
        width: 202px;
      }
      .sidebar {
        display: none;
      }
      @media (min-width: 768px) {
        .sidebar {
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          z-index: 1000;
          display: block;
          background-color: #f5f5f5;
        }
      }
    </style>
  </head>
  <body>
    <div class="fixed sidebar">
      <ul class="nav">
        <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Reports</a></li>
      </ul>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-sm-6 col-md-6">
          abcsfdsqdfdqfdqsdfdqfdsqdfssd
        </div>
        <div class="col-sm-6 col-md-6">
          efg
        </div>
      </div>
    </div>
  </body>
</html>

Upvotes: 1

Views: 388

Answers (2)

Tieson T.
Tieson T.

Reputation: 21246

Fixed and absolute positioned elements are no longer part of the document flow, so they don't reserve the space they normally would. In your example, that means the sidebar doesn't push the rest of the content over, which is why you see it overlap the main content.

What I find normally works is to use the fluid container (so the page content spans the whole viewport) and then add padding to the "main" section to clear the horizontal space the sidebar would otherwise overlap.

Here's an example based off of a project I've built recently:

CSS

/* Hide for mobile, show later */
.sidebar
{
    display: none;
}

@media (min-width: 768px)
{
    .sidebar
    {
        position: fixed;
        top: 55px;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: block;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
        width: 175px;
    }

        .sidebar.student
        {
            background-color: #71B1D1;
            color: #fff;
            border-right: 1px solid #eee;
        }
}

/*
 * Main content
 */

.main
{
    padding: 20px;
}

@media (min-width: 768px)
{
    .main
    {
        padding-left: 215px;
        padding-right: 40px;
    }
}

Markup

<div class="container-fluid">

    <div class="col-sm-3 col-md-2 sidebar">
      <ul class="nav nav-sidebar">
        <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Reports</a></li>
        <li><a href="#">Analytics</a></li>
        <li><a href="#">Export</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a href="">Nav item</a></li>
        <li><a href="">Nav item again</a></li>
        <li><a href="">One more nav</a></li>
        <li><a href="">Another nav item</a></li>
        <li><a href="">More navigation</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a href="">Nav item again</a></li>
        <li><a href="">One more nav</a></li>
        <li><a href="">Another nav item</a></li>
      </ul>
    </div>

    <div class="main">

        <h2>Content Header</h2>

        <p>Some content here...</p>

        <hr />
        <footer>
            <p>
                &copy; 2017
            </p>
        </footer>
    </div>
</div>

Demo: https://jsbin.com/giwozanavi

Code: https://jsbin.com/giwozanavi/edit?html,css,output

Upvotes: 1

Mostafa Sabeghi
Mostafa Sabeghi

Reputation: 382

Try this :

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
        .fixed {
            width: 202px;
        }

        .sidebar {
            display: none;
        }        
        @media only screen and (min-width: 481px) and (max-width: 1124px) {
            .fixed {
                width: 140px;
            }
        }
        @media (min-width: 768px) {
                .sidebar {
                    position: fixed;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    z-index: 1000;
                    display: block;
                    background-color: #f5f5f5;
                }
            }
    </style>
</head>
<body>
    <div class="row">
        <div class="col-sm-2">
            <div class="fixed sidebar">
                <ul class="nav">
                    <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Reports</a></li>
                </ul>
            </div>
        </div>
        <div class="col-sm-10">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 col-md-6">
                        abcsfdsqdfdqfdqsdfdqfdsqdfssd
                    </div>
                    <div class="col-sm-6 col-md-6">
                        efg
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Upvotes: 0

Related Questions