CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
ProfHase85
ProfHase85

Reputation: 12233

bootstrap: slim vertical element with full height

I would like to have a collapsible sidebar in bootstrap.

For this I' d like to have a slim element between the content and the sidebar toggles the visibility of the sidebar (display property). See the example below:

https://jsfiddle.net/zaao8Lqb/1/

Instead of the border (as in the fiddle), I' d like to have an element. How would I do that?

Upvotes: 1

Views: 178

Answers (2)

Qaisar Nadeem
Qaisar Nadeem

Reputation: 2424

Here is the code to do it. Can find fiddle at https://jsfiddle.net/qaisarnadeem/zzs94oc1/

<body>
  <div class="container-fluid fill">
    <div class="row fill">
      <div class="col-lg-2 col-md-4 col-xs-4" id="sidebar">
        <h4>
        Sidebar
      </h4>
      </div>
          <div class="pull-left vertical-elem"></div>
      <div class="col-lg-10 col-md-6 col-xs-6 text-center" id="content">
        <h3>
        Content
      </h3>
      </div>
    </div>
  </div>
</body>

here is css for class vertical-elem

.vertical-elem{
  height:100%;
  width:6px;
  background-color:blue;
}

Upvotes: 0

ProfHase85
ProfHase85

Reputation: 12233

The solution is a simple div with full height. The total solution of a collapsible sidebar:

https://jsfiddle.net/c2bgkbzL/1/

   html,
body {
  height: 100%;
}

.fill {
  height: 100%;
  min-height: 100%;
}

#content {
  background-color: AliceBlue;
  height: 100%;
  padding-left: 0;
}

#sidebar {
  background-color: DarkGray;
  height: 100%;
  padding: 3px;
}

#collapseme{
  background-color: black;
  width: 10px;
  height: 100%;
  float: left;
}

Upvotes: 1

Related Questions