CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Cray
Cray

Reputation: 5513

Sidebar navigation with Bootstrap 4

I want to add a navigation to the left of my page. this navigation should have the full height of the page.

I tried to build it with the Bootstrap grid system. But in this case, the navigation grows to much in width. Even if I use only col-1 for the navigation sidebar.

This is what I want to build:

enter image description here

Upvotes: 1

Views: 5889

Answers (1)

Jhecht
Jhecht

Reputation: 4435

I was sure that there was a thing for this, but it appears as though I was incorrect (however if you found it please let me know).

I added two classes .col-sm-fixed which sets the width to be the same as 1 column width, but gives it a max-width and min-width for readability.

The other is .flex-auto which just sets the sets the properties of the flex value so that no matter how big, this item will grow to fill the space for the row. Also, I added a flex-nowrap (from bootstrap) to the row to keep any shenanigans happening where the main content could be pushed off.

edit

I found the bootstrap equivalent of flex-auto, which is col.

link here

.col-sm-fixed {
  flex: 0 0 8.333%;
  max-width: 250px;
  min-width: 100px;
}

.flex-auto {
  flex: 1 1 50%;
  min-width: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row flex-nowrap">
    <div class="col bg-info">
      <ul class="nav nav-pills flex-column">
        <li class="nav-item"><a class="nav-link active">Hi</a></li>
        <li class="nav-item"><a class="nav-link">Howdy</a></li>
      </ul>
    </div>
    <div class="col-11 pl-1 bg-warning">
      Main Content Here?
    </div>
  </div>
</div>

Upvotes: 2

Related Questions