Tips for creating a full-length sidebar below the top navigation using Bootstrap 4

Recently started using Bootstrap and decided to work with the alpha version of Bootstrap 4 to create a website for my home network.

My main concern is with the sidebar, as I want it to cover the entire left side of the page, starting just below the top navigation bar. Currently, there is a small gap of around 20 pixels between the navbar and the sidebar. Additionally, I want the sidebar to extend all the way down, regardless of the page size.

For this project, I chose to customize the admin template provided by Bootstrap to suit my needs.

Check out the JSFiddle link here.

CSS:

body, html {
  height: 100%;
}

body {
  padding-top: 70px;
}

/* Top Navbar */
.so-navbar-top {
    background-color: #087ca7;
    height: 48px;
}

.so-navbar-top .navbar-brand {
  font-size: 1.5em;
}

.so-navbar-top .nav-item {
  font-size: 0.75em;
}

/* Sidebar */
.so-sidebar {
  background-color: #13293d;
}

/* Fix for modal-open padding issue */
body.modal-open {
  padding-right: 0 !important;
}

#sidebar {
  padding-left:0;
}
...

HTML

<!DOCTYPE html>

<html lang="en">

  <head>
    ...
  </head>

  <body>

    <nav class="navbar fixed-top navbar-toggleable-sm navbar-light bg-fade mb-3 so-navbar-top">
      ...
    </nav>

    <div class="container-fluid" id="main">
      ...
    </div>

    <footer class="container-fluid">
      <p class="text-right small">&copy;2017 BrandName</p>
    </footer>

  </body>

</html>

Answer №1

Make sure that the padding-top on the body element is set to the same height as your navigation bar.

For example:

body { padding-top: 48px; }

If you require additional spacing for the content within the sidebar and main content area, adjust the padding or margin on the .so-sidebar and .main classes.

Answer №2

  1. The space between the header and sidebar is due to the padding-top: 70px; on the body, pushing everything, except for the fixed header, 70px from the top of the page.

To avoid this gap, you must set the padding-top value to match the exact height of your header.

padding-top: 48px;
  1. For the sidebar to occupy the entire page height, set its minimum height to 100vh minus the body's padding (height of the header).

You can achieve this using CSS3's calc() function:

min-height: calc(100vh - 48px);

This layout allows you to keep the footer alongside the rest of the content to prevent it from appearing below the sidebar.

For reference, here's a jsFiddle.

Another option is to add position: fixed to the sidebar and adjust padding/margins to avoid overlapping with other elements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Designing a structure with three fieldset components

I'm currently trying to design a page layout that includes three fieldsets. My goal is to have the first one span across 100% of the width, with the other two positioned side by side below it at 50% width each. However, I am struggling to achieve thi ...

What is the best way to display the element from a list with a distinct identifier using Thymeleaf within a Spring Boot application?

In my entity class, I have an array list that stores a list of enrolled students. Clicking the student button will display the list of enrolled students. Check out the enroll student page in the screenshot below. However, when clicking on another button to ...

Responsive design and column alignment dilemma

I'm attempting to create a layout using Bootstrap 3.2.0 with tiled divs in a single row for screens wider than 768px. The divs have heights of either 50px or 100px, controlled by the classes "home-height-single" and "home-height-double," and widths ad ...

Header with h1 formatting

I'm having trouble getting 'by Jackie' to align under the 'Bella' logo without adding excessive space. Does anyone have any suggestions on how to resolve this issue? HTML: <div class="header"> <div class="wrapper"> ...

Is it possible to incorporate Bluetooth connectivity into an HTML5/JS Web application?

Currently, I have developed a WebApp using HTML5, JS, and Jquery. I am now looking to integrate Bluetooth functionality into it to enable data transfer to another Bluetooth-enabled device. After downloading the Bluetooth Dev Kit and going through numerous ...

What is the best way to prevent the table from being added again once it has been displayed?

I'm faced with the task of displaying an HTML table in a popup window when a button is clicked, using Bootstrap modal functionality. This scenario is similar to a preview function where user input is displayed in a table when a preview button is click ...

Generating PDFs from websites using code

Currently, I have my resume available online as an HTML page at www.mysite.com/resume.html. Whenever I need a PDF version of it, I rely on Google Chrome's print dialog to save it as a PDF using my print CSS stylesheet. However, I am looking for a way ...

Convert HTML form input into a JSON file for safekeeping

<div class="email"> <section class="subscribe"> <div class="subscribe-pitch"> </div> <form action="#" method="post" class="subscribe-form" id="emails_form"> <input type="email" class="subscribe-input" placeholder="Enter ema ...

Aligning variable width numbers within a div container

Currently experimenting with CSS to create a calendar design that mimics the look of a traditional paper calendar. One issue I've encountered is the alignment of numbers within boxes, especially when dealing with double digits. When displaying a sing ...

Displaying a dynamic splash screen during the resource-loading process on an Android application

I would like to implement an animated image (currently using a set of PNGs) as a splash screen while my resources are loading. I have successfully displayed the splash screen using this method. However, the issue I am facing is that the splash screen appe ...

Formatting text over an image

The challenge I am facing involves having an image and text on it in two separate divs with a background color. The length of the text in one div is long while the text in the second div is short, but I want to ensure that the width of both divs are equal. ...

Guide to switch background image using querySelector

I am currently trying to figure out how to set the background image of a div block by using querySelector. I have attempted various methods in my test code below, but unfortunately none seem to be working. Can someone please provide assistance? <!DOC ...

Using jQuery to select the third element from every group of six

I am attempting to select the 3rd .foo element out of every set of 6. To clarify, here is a brief example: 1 2 3 (this) 4 5 6 1 2 3 (this) 4 5 6 and so on... So far, I have only managed to target every 3rd element, which is not exactly what I need beca ...

Connecting MySQL to HTML: Step-by-step guide

I am currently working on building a website through coding in HTML using gedit. My goal is to have a login or registration feature on the homepage, which will then direct users to their own personalized page on the site. On this page, they should be abl ...

Display the footer once the user has reached the end of the page by scrolling

Below is the footer code I am working with. <div class="row"> <div class="col-md-12"> <div> this section always remains at the bottom </div> </div> <div class="col-md-12"> <div> only v ...

Step-by-step guide on integrating node.js and MySQL to store data from an online form in a database

Currently, I am attempting to insert data into a MySQL database using node.js by clicking the submit button. However, an error message has appeared and despite understanding it somewhat, I am unsure of how to proceed. Any assistance would be greatly apprec ...

Customizing the Bootstrap 4 navbar to have no fixed height on mobile devices

Is there a way to adjust the height of the Bootstrap 4 navbar for all viewport sizes to be 80px? I attempted using "min-height: 80px" in ".navbar", but it ended up breaking the layout. Here is the SASS code snippet: $navbar-bg: #26f3fd; $nav ...

Issue with Google Maps iFrame not loading when utilizing JavaScript variables in the "src" attribute

Currently, I am facing an issue with utilizing JavaScript variables containing GPS latitude and longitude values in the "src" attribute of an iFrame in an HTML file for displaying image EXIF data on a Google Maps iFrame. When I hardcode specific latitude ...

What is the best way to utilize a mask in an inline SVG that is compatible with Chrome browser?

I am looking to visually crop my element using an SVG shape that is defined within the same HTML file (inline SVG). Using clip-path works perfectly: div { width: 200px; height: 200px; background-color: red; clip-path: url("#c"); } <div> ...

What is the best way to retrieve information from an http website and display it in an html table using javascript

I am attempting to retrieve data from the specified site: . The website appears to feature a list of objects, and my goal is to extract each object enclosed in {} into separate columns within a row (6 columns total - one for gameNumber, one for teams, and ...