Building a stable sidebar design using Bootstrap 4 - A step-by-step guide

Question

Building a stable sidebar design using Bootstrap 4 - A step-by-step guide

https://i.sstatic.net/QLeA4.png

Struggling to replicate a layout similar to the provided screenshot using Bootstrap 4. The issue arises when trying to make the sidebar fixed while maintaining the desired layout.

To illustrate with a basic example:

<div class="container">
  <div class="row">
    <div class="col-m-4" id="sticky-sidebar">
      Sidebar
    </div>
    <div class="col-m-8" id="main">
      Main Area
    </div>
  </div>
</div>

Initially, achieving this layout is feasible. However, challenges arise once declaring:

.sidebar {
position: fixed // or absolute
}

Upon fixing the sidebar position, the main div starts appearing behind the sidebar rather than beside it. Although adding margins can readjust its position, it complicates responsiveness.

It seems like there might be a missing piece in the puzzle, as going through the Bootstrap 4 documentation did not provide a straightforward solution for this particular layout.

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Newly Updated in 2020

Check out this fresh answer for the most recent Bootstrap 4.0.0 release. This version includes classes that make it easy to set up a sticky or fixed sidebar without needing extra CSS....

To implement a sticky sidebar, simply use sticky-top:

<div class="container">
    <div class="row py-3">
        <div class="col-3 order-2" id="sticky-sidebar">
            <div class="sticky-top">
                ...
            </div>
        </div>
        <div class="col" id="main">
            <h1>Main Area</h1>
            ...   
        </div>
    </div>
</div>

See it in action here:

Alternatively, you can utilize position-fixed for a fixed sidebar:

<div class="container-fluid">
    <div class="row">
        <div class="col-3 px-1 bg-dark position-fixed" id="sticky-sidebar">
            ...
        </div>
        <div class="col offset-3" id="main">
            <h1>Main Area</h1>
            ...
        </div>
    </div>
</div>

Watch the demonstration here:

For more insights, check out these resources:
Fixed and scrollable column in Bootstrap 4 flexbox
Bootstrap col fixed position
How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
Create a responsive navbar sidebar "drawer" in Bootstrap 4?

Answer 2

Newly Updated in 2020

Check out this fresh answer for the most recent Bootstrap 4.0.0 release. This version includes classes that make it easy to set up a sticky or fixed sidebar without needing extra CSS....

To implement a sticky sidebar, simply use sticky-top:

<div class="container">
    <div class="row py-3">
        <div class="col-3 order-2" id="sticky-sidebar">
            <div class="sticky-top">
                ...
            </div>
        </div>
        <div class="col" id="main">
            <h1>Main Area</h1>
            ...   
        </div>
    </div>
</div>

See it in action here:

Alternatively, you can utilize position-fixed for a fixed sidebar:

<div class="container-fluid">
    <div class="row">
        <div class="col-3 px-1 bg-dark position-fixed" id="sticky-sidebar">
            ...
        </div>
        <div class="col offset-3" id="main">
            <h1>Main Area</h1>
            ...
        </div>
    </div>
</div>

Watch the demonstration here:

For more insights, check out these resources:
Fixed and scrollable column in Bootstrap 4 flexbox
Bootstrap col fixed position
How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
Create a responsive navbar sidebar "drawer" in Bootstrap 4?

Answer 3

Answer №2

Does this look right to you?

#sidebar {
position:fixed;
max-width: 20%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="col-xs-12" id="sidebar">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </div>
    <div class="col-xs-8" id="main">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
</div

Answer 4

Does this look right to you?

#sidebar {
position:fixed;
max-width: 20%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="col-xs-12" id="sidebar">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </div>
    <div class="col-xs-8" id="main">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
</div

Answer 5

Answer №3

Here is a snippet from the code I implemented:

<div class="sticky-top h-100">
    <nav id="sidebar" class="vh-100">
        ....

This results in setting your sidebar height to 100% and making it fixed at the top of the page.

Answer 6

Here is a snippet from the code I implemented:

<div class="sticky-top h-100">
    <nav id="sidebar" class="vh-100">
        ....

This results in setting your sidebar height to 100% and making it fixed at the top of the page.

Answer 7

Answer №4

To address a sticky sidebar menu, I have turned to JavaScript for a more straightforward solution. Despite experimenting with various CSS approaches, the most effective way to resolve this issue was by toggling a native BootStrap class, "position-fixed", using JavaScript.

Here is the JavaScript code:

var sidebarFixed = false;
function fixSidebar() {

    var element, name, arr;
    element = document.getElementById("mySidebar");

    if (sidebarFixed) {
        element.className = element.className.replace(
            /\bposition-fixed\b/g, "");
        sidebarFixed = false;
    } else {

        name = "position-fixed";
        arr = element.className.split(" ");
        if (arr.indexOf(name) == -1) {
            element.className += " " + name;
        }
        sidebarFixed = true;
    }

}

The corresponding HTML code for the sidebar:

Sidebar:

<aside>
    <nav class="sidebar">
         <div id="mySidebar">
             <ul class="nav nav-pills">
                 <li class="nav-item"><a class="nav-link active" 
                 th:href="@{/today/home}"> <i class="oi oi-clipboard"></i> 
                 <span>Today</span>
                 </a></li>
             </ul>
         </div>
    </nav>            
</aside>

Answer 8

To address a sticky sidebar menu, I have turned to JavaScript for a more straightforward solution. Despite experimenting with various CSS approaches, the most effective way to resolve this issue was by toggling a native BootStrap class, "position-fixed", using JavaScript.

Here is the JavaScript code:

var sidebarFixed = false;
function fixSidebar() {

    var element, name, arr;
    element = document.getElementById("mySidebar");

    if (sidebarFixed) {
        element.className = element.className.replace(
            /\bposition-fixed\b/g, "");
        sidebarFixed = false;
    } else {

        name = "position-fixed";
        arr = element.className.split(" ");
        if (arr.indexOf(name) == -1) {
            element.className += " " + name;
        }
        sidebarFixed = true;
    }

}

The corresponding HTML code for the sidebar:

Sidebar:

<aside>
    <nav class="sidebar">
         <div id="mySidebar">
             <ul class="nav nav-pills">
                 <li class="nav-item"><a class="nav-link active" 
                 th:href="@{/today/home}"> <i class="oi oi-clipboard"></i> 
                 <span>Today</span>
                 </a></li>
             </ul>
         </div>
    </nav>            
</aside>

Answer 9

Answer №5

Here's my take:

#dashboard-main { margin-left:150px; }
#dashboard-side {position:fixed; width:150px; height:100%; }

<div id="dashboard-side"></div>
<div id="dashboard-main">                        
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">Content</div>
        </div>            
    </div>        
</div>

Answer 10

Here's my take:

#dashboard-main { margin-left:150px; }
#dashboard-side {position:fixed; width:150px; height:100%; }

<div id="dashboard-side"></div>
<div id="dashboard-main">                        
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">Content</div>
        </div>            
    </div>        
</div>

Building a stable sidebar design using Bootstrap 4 - A step-by-step guide

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Modify the div's visibility based on selected option in the dropdown menu

SCSS: Error - Trying to use a media breakpoint down mixin that is not defined, even though I have imported Bootstrap

Adjust the tabs to fit perfectly within the container

navigating up and down html elements using css selectors

How to incorporate a phone number input with country code using HTML

Click to shift the div downwards

`Flex alignment of columns in Bootstrap 4`

Tips for reliably resizing slider images with varying widths

Is there a way to adjust the width of the info panel in an SVG to automatically match the width of the SVG itself?

Issue with Bootstrap small column vertical alignment not functioning as expected

New to CSS/Ruby - What causes two adjacent buttons to have varying sizes?

Developing a side panel for navigation

Issue with Internet Explorer: Unable to view Drop Down menu

Permanent Solution for HTML Textbox Value Modification

Styling an element in CSS3 based on the status of an input checkbox

A neutral-toned backdrop that briefly shows up for a quick 7-second interlude during a background-image

Is there a way to determine which option is currently highlighted in Internet Explorer before it is actually chosen?

Adjusting position in relation to the cursor's movements

iOS exhibits a flashy display of Material Select lighting up

Newbie's Dilemma: Issues with Html, Email, and Distribution Lists