Fixed bottom navigation bar in Bootstrap 4

Here is my current navbar:

<nav class="navbar navbar-inverse">
  <div class="container">
    <ul class="nav navbar-nav">
      <li><a href="">page 1</a></li>
      <li><a href="">page 2</a></li>
      <li><a href="">page 3</a></li>
    </ul>
  </div>
</nav>

I am looking for a way to keep the navbar at the bottom of the page, even if there isn't enough content to push it down. The navbar-fixed-bottom class doesn't work as it overlaps with the content when reaching the bottom. What would be the best way to achieve this?

csshtmltwitter-bootstrapbootstrap-4

Answer №1

When you use the "fixed" attribute, it positions the element in front of other elements rather than below them. To ensure proper spacing at the bottom of your page, you can add some blank lines or apply a CSS padding-bottom to your page container.

Here's an example with a custom padding value:

.page-content {
  padding-bottom: 150px;
}
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" />
<nav class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="container">
    <ul class="nav navbar-nav">
      <li><a href="">Page 1</a></li>
      <li><a href="">Page 2</a></li>
      <li><a href="">Page 3</a></li>
    </ul>
  </div>
</nav>
<div class="page-container">
  <p>First line</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Last line</p>
</div>

Answer №2

** I followed these steps and it worked perfectly for me

<div class="fixed-bottom">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</div>

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

When using Edge browser developer tools local override feature, changes made are not visible after closing the developer tools

Even though I am discussing the issue with the edge-browser, it also occurs in the chrome-browser Instructions to Replicate While many may know me as a developer, I have a passion for customization and unique fonts. One font that has caught my eye rec ...

cssfontscustomizationmicrosoft-edgedeveloper-tools

How to use jQuery to retrieve the style of an element based on a specific data attribute

I've been using bxSlider and I decided to create a unique custom pager using the pagerCustom option. My goal was to make the pager resemble a thumbnail pager, so I attempted to copy the style of each slide and attach it to the corresponding pager. For ...

javascriptjqueryhtml

Make a hyperlink in Internet Explorer redirect to open in Mozilla Firefox

I am struggling with linking two URLs from a corporate intranet site built on Sharepoint to Firefox. The issue is that the links lead to an external site that doesn't function properly in Internet Explorer, which is the default browser for most users. ...

javascripthtml

Unable to showcase PHP $_POST variables within a bootstrap modal

I'm trying to have a number displayed in a bootstrap modal after submitting a form using the post method. However, I'm facing an issue where the bootstrap modal is not showing the number ($_POST[number]). <form action="<?php echo htmlspec ...

phptwitter-bootstrap

Tips for placing a background image within a button

Here is the CSS code I am currently using: .physButton:before { content: " "; display: inline-block; background: url("../theImages/ste.png") no-repeat; height: 38px; line-height: 38px; vertical-align: middle; width: 52px; / ...

htmlcss

Starting the Android System Magnifier with a Click: A Step-by-Step Guide

Is there a way to incorporate a magnifying glass into an HTML page using jQuery or within an Android app? Ideally, it would be for a single picture. In my application, I am displaying an HTML file from my assets in a webview. The HTML page utilizes jQuery ...

javascriptandroidjquerycssmagnification

Stop Bootstrap 5 Accordion from collapsing

I have successfully implemented the Accordion component in Bootstrap 5, and it is working perfectly! However, I am facing an issue with the size of the collapse button in the accordion, which is too big. I want to add an additional link to it for some ext ...

javascripttwitter-bootstrapaccordionbootstrap-5bootstrap-accordion

Using jQuery to retrieve the element that triggers a function

Greetings! I am new to using jQuery and I am looking to access an element that I have clicked on. My goal is to navigate to neighboring elements and retrieve their values. <td>21</td> <td>Peter</td> <td>Admin</td> <t ...

jqueryhtmlfunction

Tips for displaying three divs in one row and three divs in another row

I'm aiming for a design with 3 divs in one row and another 3 in the next, like this But what I currently have is different. Can someone assist me in achieving the desired layout? MY HTML : <div class="category-food"> < ...

cssangulartypescript

Execute a function when a selection option is chosen consecutively two times

I have a dynamic dropdown menu that uses AJAX to load options. I need the function to be triggered not only when an option is changed, but also when the same option is clicked multiple times in a row. In other words, I want the function to run every time a ...

javascriptjqueryhtml

Could it be that grid-area does not function properly with the attr function, or is this intentional?

The following examples showcase the functionality: It's impressive how I'm utilizing content: attr(class) to streamline the labeling process. Impressive! section { outline: 1px solid red; display: grid; grid-gap: 10px; grid-template-a ...

csscss-grid

"Create a div element with resizable capabilities, similar to a

Is it possible to resize elements like divs in browsers without using jQuery or other libraries like draggable or resizable? I know text-areas can be resized by default, but I'm curious if this functionality can be extended to other elements through p ...

htmlcsstextarea

What's causing the margin within the span.details to malfunction?

The text within the span.details element is not centered within a.prod-buy and a.prod_details. I would like to adjust the positioning of the words add to cart and book info slightly using margin: 2px 0 0 2px; in the span.details. Why isn't it workin ...

htmlcssmargin

When using npm to install Angular Bootstrap, the versions that are installed do not always match the specific versions

Displayed below is the content of my package.json file. { "name": "MyProject", "private": true, "version": "0.0.0", "scripts": { "test": "karma start ClientApp/test/karma.conf.js" }, "devDependencies": { "@angular/animations": "5.0.2", "@angular/common": ...

angulartwitter-bootstrapnpmpackage.jsonangular-bootstrap

Implemented a solution to ensure the menubar remains fixed when zooming in and out

When zooming in and out on a webpage, the menu does not stay fixed to the header image shown in the figure below: The CSS code for this issue is as follows: #navmenu{ z-index:99999; margin-top:40px; position:absolute; width:100%; m ...

css

Can you explain the differences between offsetHeight, clientHeight, and scrollHeight for me?

Have you ever wondered about the distinction between offsetHeight, clientHeight, and scrollHeight? What about offsetWidth, clientWidth, and scrollWidth? Understanding these differences is crucial for working effectively on the client side. Without this kn ...

javascripthtmldomoffsetheight

Creating a personalized validation function for an HTML 5 element

Creating form validation for a custom image selection tool based on html 5 form validation is my goal. The form includes the following elements: <form class="cms-form" action=""> <table width="800"> <tr> <td w ...

javascripthtmljqueryvalidationjquery-events

Retrieve the current row by clicking the button

I've been struggling to retrieve a specific value from a row displayed on my PHP webpage. My objective is to obtain the current value from a particular cell in the row, but using getElementsByTagName has not been successful as it only returns an HTMLC ...

javascriptphphtml

Tips for positioning buttons in a row below dynamic text using Bootstrap 3

Is there a way to align buttons under a variable piece of text in Bootstrap 3? Currently, when the code example is viewed in full screen, the three buttons do not align horizontally. Current Behavior: https://i.sstatic.net/lEQ7o.png My goal is to have t ...

javascripthtmlcsstwitter-bootstrap-3bootstrap-4

Steady Navigation Bar in Javascript without Bouncing

While experimenting with a fixed navigation bar, I've encountered an issue where the content below jumps up on the page when the navigation bar "fixes" itself to the top of the screen. You can check out the JSFiddle I've been working on for refer ...

javascriptjqueryhtmlcssnav