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

Asked

Viewed 1,809 times

1

I’d like to keep the left column fixed, and the right one mobile. There is a bootstrap class or another technique to solve this ?

I tried it this way :

<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>

Upshot

  • The left column disappears.
  • The contents of the right column are deformed.
css html5 css3 bootstrap-3

  • Which BS version are you using?

  • You can’t use it position:fixed in this case. It does not obey some element Parent with position: relative. It relates to body. Now, I don’t understand what you want to do.

  • @Zooboomafoo I believe what he wants is this http://v4-alpha.getbootstrap.com/examples/dashboard/

2 answers

2

One of the examples in the Bootstrap v4 documentation details very well how to do this type 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 the style below to the CSS to fix the 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;
}

1

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

Sidebar (fixed, a 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'])).'">';
          ?>

Contents: (according to the content within a div class="content")

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

I hope I’ve helped.

Browser other questions tagged css html5 css3 bootstrap-3

You are not signed in. Login or sign up in order to post.