Adjusting the height of the Bootstrap 4 right side navbar to fill the entire screen

Here is the code for my Bootstrap 4 navbar. I am attempting to make the right side navbar height reach full 100%.

<nav class="navbar navbar-expand-sm bg-light navbar-light"
            style="width: 200px; float: right;">
  <ul class="nav flex-column">
    <li class="nav-item active">
      <a class="nav-link" href="#">Sports</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Facebook</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Youtube</a>
    </li>
  </ul>
</nav>

I attempted using height: 100%; and adding navbar-full to the <nav>, but the changes did not take effect.

Please refer to the image below:

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

htmlcsstwitter-bootstrapbootstrap-4nav

Answer №1

Using Bootstrap's Navbar component may not be the best option in this case, as it is primarily designed for horizontal layouts. This could lead to a lot of unnecessary CSS customization or extra class declarations.

However, by omitting the Navbar component, you can achieve similar results with minimal effort:

.navbar-right {
  height: 100vh;
  right: 0;
  position: absolute;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<nav class="navbar-right bg-light p-3">
  <ul class="nav flex-column">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
  </ul>
</nav>

position:absolute removes the nav from the normal document flow, letting you position it freely (right:0 places it on the right side of the window). The height is set to 100vh, occupying the full viewport height.

This example is basic and you might want to define specific widths, especially at key breakpoints. But it should guide you in the right direction.

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

Postback does not reload all controls in the NameValueCollection

Recently, I designed a custom User Control in asp.net. public class InputMask : CompositeControl, IPostBackDataHandler, IPostBackEventHandler Imagine the custom control is enclosed within a div element: <div runat="server" id="inputArea"> < ...

c#cssasp.netcustom-controls

Why does my text keep drifting towards the left edge?

After spending a day learning CSS and HTML, I decided to recreate a website from a YouTube video and add my own customizations. I was able to center the text in my introduction successfully. However, upon reviewing my progress (see screenshot here), it is ...

htmlcss

Use React to insert a leading zero next to a number in the input field if the number is greater than 10

I have scoured the web and consulted resources like this one but haven't found a solution that addresses my specific issue with adding padding to input numbers. My goal is to automatically add a leading zero whenever the number inside an input field i ...

javascripthtmlreactjs

The HTML/CSS Progress Bar appears on the browser but does not appear when attempting to print the document

I am currently assisting a friend with creating a resume and we wanted to include a visually appealing progress bar for the skills section. After successfully implementing the progress bar and seeing it display correctly in the browser, we encountered an ...

htmlcss

Struggling with getting the tabbed slider carousel to function properly in Bootstrap 4?

I attempted to incorporate this code snippet: The only modification I made was using these imports: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootst ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Centering two images by stacking them with Bootstrap 5

I'm working on a bootstrap layout with two columns, and I need to achieve a semi-opaque background image that covers the entire column with a dark overlay. This is to create contrast for a logo that will be centered within the column. I've tried ...

htmlcssbootstrap-5

Querying val results in an empty string being returned

In my application, I have the following HTML code snippet: <tr style="cursor:pointer;"> <td>100101</td> <td>Monkey</td> <td>Nuts<td> <td>Cow</td> <td>Soup</td> <t ...

jqueryhtml

Multiple columns contained within a span

I'm trying to create a panel that displays a list of values with corresponding labels. The requirement is for each label to be positioned above its respective value and aligned to the left. The layout should resemble the following: Label 1 Lab ...

htmlcss

When integrating external HTML into an Angular 2 component, relative references may become invalid and fail to

My server hosts basic HTML content that includes an image with a relative file location. While this displays correctly in a browser, loading the content using Angular causes issues with resolving the relative path locally. I have tried following suggestio ...

htmlangulartypescript

The submenu dropdown on the navigation bar appears once you hover over the parent bootstrap element

Hey there! I'm currently facing an issue where the submenu dropdown is displaying when its grandparent is hovered, rather than just its parent. Here's the code snippet: <nav class="navbar navbar-default"> <div class="container"> ...

jqueryhtmlcsstwitter-bootstrapnavbar

Responsive images in CSS3/HTML5 are designed to adapt to different

I am looking to implement responsive image sizing based on the webpage size. My images come in two different sizes: <img src="images/img1.jpg" data-big="images/img1.jpg" data-small="images/img1small.jpg" alt=""></img> The data-small image has ...

javascripthtmlcss

Guide to customizing PHP code to display an image on the left side of the webpage

My knowledge of php is limited, and I have very little experience with bootstrap. However, I am attempting to modify a WordPress template to change the placement of an image on a page. The website utilizes the Advanced Custom Fields plugin to maintain cons ...

phpwordpressbootstrap-4advanced-custom-fields

JavaScript Document Object Model: Locate an element with a class that is either similar to or includes a specific substring

I am facing a situation where I need to locate a wrapper element with a specific class name that includes a random id, such as wp-rgtayfu-fxyjzw-wrapper. The class will always have the substring wrapper in it, and there is only one element in the document ...

javascripthtmldomdocument

Having difficulty assigning the $_Session value in the captcha file

I'm having trouble assigning a value to $_Session in a captcha file. Below is the code for my captcha file: <?php session_name('U'); session_start(); session_regenerate_id(); ini_set('session.cookie_httponly',true); $string=&a ...

phpajaxhtmlsession

The fixed div with the z-index at the top isn't functioning properly

I need a div that remains fixed at the top of my page and overlaps any other elements on the page, similar to the blue search bar on Facebook. Currently, when I scroll down, the table ends up above the div, but I want it to be below the div instead. Here i ...

htmlcss

Having trouble with input event listeners in JavaScript?

I've been attempting to trigger the keyup event using EventListener for an input tag, but it doesn't seem to be working and I'm unsure why. Here is the code I have: document.getElementById("ajax").addEventListener("keyup", function() { ...

javascriptjqueryhtmlinput

ToggleButton4 Framework is a user-friendly tool for creating interactive

I am currently working with Bootstrap 4 to design a toggle button; however, when I click the button, the checkbox does not update, despite the fact that the active class is being applied. Even when I use $('.btn-group-toggle').button('toggl ...

javascripthtmlcsstwitter-bootstrap-4

Learn the secret to toggling the visibility of Bootstrap 4 collapse elements with jQuery

I have been attempting to toggle the Bootstrap 4 collapse using a checkbox with jQuery. Here is the code snippet I am using: `<script type="text/javascript"> $('.card-header').click(function() { $(this).find('input[name=&qu ...

jquerybootstrap-4

Positioning Images with CSS Backgrounds

I am looking to create a fluid background that stretches widthwise, while adjusting its height based on the content. If the content is smaller, I want the background to be truncated. However, if there is a lot of information, I would like the background to ...

htmlcss

Looking to enhance my JavaScript skills - Codepen samples welcome!

I have incorporated this code pen in my website to create a menu button for mobile view: http://codepen.io/anon/pen/LNNaYp Unfortunately, the button sometimes breaks when clicked repeatedly, causing the 'X' state to appear even when the menu is ...

javascriptjqueryhtmlcss