The central element vanishes from the bottom of the page

After creating a footer using Bootstrap, I encountered a slight issue with the middle column. Specifically, when I resize the window or view the app on a smartphone, I end up with this result:

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

Here is the HTML code I used:

<footer class="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">
        This is a footer.
      </div>
      <div class="col-md-4">
        <div class="text-center footer-links d-none d-md-block">
          <a href="javascript: void(0);">Link1</a>
          <a href="javascript: void(0);">Link2</a>
          <a href="javascript: void(0);">Link3</a>
        </div>
      </div>
      <div class="col-md-4">
        <form class="form-horizontal">
          <label class="col-sm-3 control-label" for="requestCulture_RequestCulture_UICulture_Name">
                        Language:
                    </label>

          <select>
                        <option>1</option>
                        <option>1</option>
                    </select>
        </form>
      </div>
    </div>
  </div>
</footer>

Answer №1

.footer {
    border-top: 1px solid rgba(152,166,173,.2);
    bottom: 0;
    padding: 19px 30px 20px;
    position: absolute;
    right: 0;
    color: #98a6ad;
    left: 250px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<footer class="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">
        This is a footer.
      </div>
      <div class="col-md-4">
        <div class="text-center footer-links d-md-block">
          <a href="javascript: void(0);">Link1</a>
          <a href="javascript: void(0);">Link2</a>
          <a href="javascript: void(0);">Link3</a>
        </div>
      </div>
      <div class="col-md-4">
        <form class="form-horizontal">
          <label class="control-label" for="requestCulture_RequestCulture_UICulture_Name">
                        Language:
                    </label>
          <select>
                        <option>1</option>
                        <option>1</option>
                    </select>
        </form>
      </div>
    </div>
  </div>
</footer>

The solution can be found here:

  <div class="text-center footer-links d-none d-md-block">

d-none d-md-block represents hiding elements on screens smaller than medium. By removing d-none, the element will no longer disappear.

For more details, visit: Bootstrap Documentation

Update: Including the code snippet.

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

The solo Bootstrap 4 navigation bar within a different non-bootstrap webpage

Is it possible to implement the standalone Bootstrap 4 navbar from https://getbootstrap.com/docs/4.1/components/navbar/ on a web site that does not use Bootstrap? When I import bootstrap CSS styles and JS, it completely alters the appearance of the existi ...

A centralized navigation bar featuring a logo on the left side

I am trying to create a navbar with a centered layout and a logo floated to the left side. For inspiration, check out this example: http://www.bootply.com/98314 I would like something similar to the example mentioned but instead of left-floated items, I ...

Trouble with Materialize CSS: Form elements displaying incorrectly

I attempted to implement a login form within a modal, following the example provided here (https://codepen.io/skcals/pen/bxdpaN). However, when I applied the same code to my own website, this is how it appeared: Has anyone else encountered this issue? And ...

Attempting to apply a minimum width to a th element using the min-width property

I'm trying to set a width for the second th element in this table, but it's not working as expected. <th style="min-width: 50px"> Date from </th> Can anyone provide assistance with this issu ...

The link tag cannot be used inside a division element

I am facing an issue with a button that has three different states represented by images. While the button looks great and functions well, it fails to perform its primary function - linking to another document. Upon clicking the button, no action is initi ...

jQuery Summation: A Step-by-Step Guide

Hello everyone, I am a new member of this forum and I am looking forward to learning and contributing with all of you. I have encountered a problem that I tried to solve on my own but couldn't figure it out. Would anyone be able to lend me a hand? H ...

Additional spacing within nested divs utilizing the display: table property

In my current project, I am working on styling a list to resemble a table layout for horizontal alignment. The first column contains labels, while the second column features groups of buttons using Bootstrap's btn-group-justified class. This setup ess ...

Ways to correct inverted text in live syntax highlighting using javascript

My coding script has a highlighting feature for keywords, but unfortunately, it is causing some unwanted effects like reversing and mixing up the text. I am seeking assistance to fix this issue, whether it be by un-reversing the text, moving the cursor to ...

Ways to ensure "overflow: hidden" functions correctly across all web browsers

Issue: I am in the process of designing a webpage layout using divs and css instead of relying on an HTML table structure. It is essential for me to ensure that this design functions smoothly across all major browsers. The challenge I'm facing invol ...

angularjs: container holding directive is currently not visible, with a height and width of 0 pixels

When implementing a directive in this way, the actual element (<a-directive>) appears to have dimensions of 0px height and 0px width. View jsfiddle example var myApp = angular.module('myApp', []).directive('aDirective', function ...

Is it possible to center an anchor link in React JS using Webpack, Sass, and Bootstrap 4?

Recently, I started delving into React JS and Webpack but encountered a perplexing issue. My goal is simple - to center an anchor link on the screen. However, despite trying various methods like inspecting the element, removing inherited styles, setting wi ...

Choosing various li classes within a navigation bar

Struggling to pick the right JQuery elements for my portfolio site. The aim is to show/hide the .inner (Task) items by clicking on the .outer (Category) items, complete with rotating .arrows when the menu expands. Check out a similar question, along with ...

Issues arise with Bootstrap's navbar dropdown menus, rendering them inoper

Currently I am developing a bootstrap website using the "Butterfly" template. Everything is functioning properly except for the navbar when viewed on mobile devices. The dropdown menu fails to open on mobile devices, and I suspect it might be related to th ...

Unable to insert menu links into the container

Currently, I have a logo and image slider placed next to each other in a container. However, I am facing difficulty in adding 3 menu links horizontally under the logo. Every time I try to do so, the links end up going above the image slider, causing it to ...

Place CSS elements in relation to the underlying element

This is an example of my HTML structure: <nav id="menu"> <ul> <li><a href="">Products</a></li> <li><a href="">Offers</a></li> <li><a href="">References</a>& ...

Conceal content in Bootstrap navbar when clicking on #link

I am facing an issue with the navbar-fixed-top element as it is causing content to be hidden from the container. To resolve this common problem, you can add the following CSS code: body { padding-top: 70px; } After applying the above code, the container ...

Images that adapt to various sizes while maintaining a consistent visual hierarchy

Hey there, I'm struggling to achieve the same row size of images as shown in the example. However, when I adjust the window size, the larger images become smaller than the columns on the left. This has been a challenge for me and I haven't found ...

Limiting the resizing boundaries in jquery ui: A step-by-step guide

Currently, I am using jquery ui to adjust the size of a div container. My goal is to restrict the resizing to a specific designated area. containment:"parent" After implementing the code, the drag operation adheres to the specified area boundaries. How ...

Is it considered acceptable to include a stylesheet inside the <body> element?

When dividing my web pages into sections, such as headers and content, I find it challenging to avoid placing links to external stylesheets within the <body> tags. I prefer not to combine all styles into one large file or include all stylesheets in ...

Add Text to Bootstrap Modal Window

The bootstrap modal body is not containing all of my content and some of it is overflowing. <div class="modal fade" tabindex="-1" role="dialog" id= "blockModel"> <div class="modal-dialog"> <div class="modal-content"> < ...