CODEWITHSUNDEEP
twitter-bootstrapcsstwitter-bootstrap-3
doums
doums

Reputation: 450

Bootstrap responsive grid with right fixed sidebar

I would like to create a template with bootstrap like that, which respect the grid's responsive system :

template

In the picture, the navbar and the right side (which contains the two buttons) are sticky (always show on the view)

My problem is the right side because, in bootstrap grid system the right side block would be considered a single row while the main content contains multiples row. How I can do that ?

Upvotes: 4

Views: 7081

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362430

Create a wrapper around the entire Bootstrap grid (container>row>cols..) to contain the fixed nav and right sidebar.

<div class="wrapper">
        <!-- top nav -->
        <nav>
            ...
        </nav>

        <!-- main -->
        <div class="left" id="main">
            <div class="container-fluid">
                <h1>Bootstrap Grid...</h1>
            </div>
        </div>

        <!-- sidebar -->
        <div class="right" id="sidebar">
            Fixed right sidebar
        </div>
</div>

http://www.codeply.com/go/37bttGte6c

Upvotes: 3

Safal Pillai
Safal Pillai

Reputation: 1637

Are you looking for something like this? You can adjust the width of right container as you wish. No need to edit bootstrap.css or write custom bootstrap classes.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
    body{
      width: 100%;
      height: 100%;
      color: #fff;
    }
    header, footer{
      height: 100px;
    }
    header{
      width: 100%;
      background: #000;
    }
    .content-container{
      width: 100%;
      position: relative;
    }
    .left-container{
      width: calc(100% - 90px); /* adjust */
      height: 100%;
    }
    .right-container{
      width: 90px; /* adjust */
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      background: blue;
    }
    .main-content{
      height: 500px;
      background: #ff0000;
    }
    footer{
      width: 100%;
      background: #ed1899;
    }
  </style>
</head>
<body>
<div class="container-fluid">
  <div class="row">

    <header class="nav">nav bar</header>

    <div class="content-container">

      <div class="left-container">
        <div class="main-content">
          //main content
        </div>
        <footer>
          //footer content
        </footer>
      </div>

      <div class="right-container">buttons</div>

    </div>

  </div>
</div>
</body>
</html>

Upvotes: 1

zureka
zureka

Reputation: 66

You could potentially separate them into their respective <div> containers, for example:

<body>
    <div class="navbar navbar-default"> Navbar </div>

    <div class="main-content col-md-10"> Main Content </div>

    <div class="right-btn-group col-md-2"> Right buttons </div>
</body>

That way the right-side is separated from the main content. Then again I might be misinterpreting the question.

Upvotes: 1

Related Questions