How to create a fixed column (col-md) in bootstrap?

Question

How to create a fixed column (col-md) in bootstrap?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I would like to keep the left column fixed, and the right mobile. Is there a bootstrap class or another technique to solve this?

I tried the following:

<div class="row">
    <div class="col-md-5" style="position: fixed;">
        <p>conteudo fixo</p>
    </div>
  <div class="col-md-7">
        <p>conteudo movel</p>
    </div>
</div>

Result

The left column disappears.
The content of the right column deforms.

html5 css css3 bootstrap-3

asked by anonymous 03.01.2017 / 10:16

2 answers

Cakephp 2.x if, else How to return the correct location for route with singular resources?

score 0 · Answer 1

One of the examples in the Bootstrap v4 documentation details how to do this kind of effect, with a fixed bar and the other with scroll.

Create the HTML structure this way:

<div class="container-fluid">
  <div class="row">
    <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>
        ...
      </ul>
    </div>
    <div class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 main">
      <h1>Dashboard</h1>

      ...
    </div>
  </div>
</div>

Add CSS to the style below to set sidebar :

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: block;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #f5f5f5;
  border-right: 1px solid #eee;
}

.main {
  padding: 20px;
}

score 0 · Answer 2

I have an application in this format fixed Sidebar left and right content, I use the following classes:

Sidebar (fixed, div class="page-sidebar" ):

  <div class="page-sidebar " id="main-menu">
      <div class="user-info-wrapper sm">
        <div class="profile-wrapper sm">
          <?php
            echo '<img width="69" height="69" src="data:image/jpeg;base64,'.base64_encode(stream_get_contents($result1['IMAGEM'])).'">';
          ?>

Content: (dynamic, according to content within div class="content" )

<div class="content" style="padding-top:20px;">
      <div class="row">
        <div class="col-md-12">

I hope I have helped.