CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Robbie Mills
Robbie Mills

Reputation: 2945

Fixed width sidebar on bootstrap 4 where main area disappears on mobile

There are a lot of examples for how to have a fixed width sidebar on Bootstrap 4, but I haven't found one that will cause the main content to disappear on mobile.

I've tried the following:

<div class="row no-gutters flex-nowrap">
  <div class="col-md col-12 d-none d-xs-block d-sm-block ">
    Main area
  </div>
  <div class="col-md-4 col-12 sidebar">
    Sidebar
  </div>
</div>


.sidebar {
    max-width: 600px; min-width: 600px
}

And this mostly works, but what happens is that between 768 to 576 pixels the sidebar disappears entirely.

What I'm after is for the sidebar to be a fixed width with the main area shrinking and eventually disappearing.

Upvotes: 0

Views: 480

Answers (2)

asifsaho
asifsaho

Reputation: 528

With few lines of CSS you can achieve this with Flexbox. Please have a look in snippet I added with this answer.

To know more about Flexbox you can checkout those links.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://yoksel.github.io/flex-cheatsheet/

.wrapper {
  display: flex;
  height: 100vh;
}

.sidebar {
  min-width: 150px;
  max-width: 150px;
  height: 100%;
  background: grey;
  padding: 20px;
}

.content {
  padding: 20px;
  height: 100%;
  background: lightgrey;
}
<div class="wrapper">
  <div class="sidebar">
    sidebar
  </div>
  
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores
  </div>
</div>

Upvotes: 2

tao
tao

Reputation: 90217

I believe you're looking for this:

@media (min-width:768px) {
  .sidebar {
    max-width: 600px; min-width: 600px;
  }  
}
.sidebar {
  background-color: #f5f5f5;
}  
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row no-gutters flex-nowrap">
  <div class="col d-none d-md-block">
    Main area
  </div>
  <div class="col sidebar">
    Sidebar
  </div>
</div>

I wrapped the fixed size rule in a @media query condition only applying on md and up and I revised classes applied to columns accordingly.

Since you're setting the custom width of your sidebar anyway, you don't need col-* classes on your columns.

Upvotes: 1

Related Questions