How can I eliminate excess space at the bottom of the screen when using Bootstrap for CSS?

Struggling to design a basic HTML page with full-page height, but a small gap remains at the bottom, especially when viewed on mobile devices. Can anyone help out? Check it out here I've attempted setting the HTML and body height to 100%, but that hasn't resolved the issue.

Reference image available here 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=no" />

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="index.css">
  <style>
    body {
      overflow: hidden;
      padding-bottom:0;
    }
  </style>
  <title>Random Quotes</title>
</head>



<body>
  <div class="container-fluid  bg-dark fa-border flex-fill">
    <h2 class="myh2 ">
      <i style="color: rgb(245, 231, 35)" class="fab fa-accusoft"></i> Random <em
        style="color: rgb(166, 250, 69)">"Quotes"</em> Generator
      <i style="color: rgb(245, 231, 35)" class="fab fa-accusoft"></i>
    </h2>

    <div class=" container-fluid"> <img id="img" src="https://picsum.photos/1280/300/?random"
        class="rounded-circle mx-auto img-fluid m-3" />
      <div class="m-3 "
        style="background-color: rgb(235, 213, 235); border: solid; border-radius: 40px ;text-align: center;">
        <h4 style="font-size: x-large  " id="h4" class="m-1"></h4>
        <p class="bg-dark text-warning" style="font-weight: bolder ;font-size: 20px;" id="p">
        </p>
        <button style="
          padding: 10px;
          margin-bottom: 20px;
          font-weight: bolder;
          color: rgb(255, 211, 211);
          background-color: #56808f;
          font-size: 20px;
          border: 3px solid;
          border-radius: 40px;
          

          
        " id="btn">
          <b>Click To Generate a Quote </b>
        </button>
      </div>
    </div>
  </div>




</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="index.js"></script>

</html>

htmlcssbootstrap-4

Answer №1

Implement the .min-vh-100 class found in the viewport sizing utility on your primary nested div. Refer to the code snippet below for guidance.

<!DOCTYPE html>
<html lang="en>

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=no" />

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="index.css">
  <style>
    body {
      overflow: hidden;
      padding-bottom:0;
    }
  </style>
  <title>Random Quotes</title>
</head>



<body>
  <div class="container-fluid bg-dark fa-border flex-fill min-vh-100">
    <h2 class="myh2 ">
      <i style="color: rgb(245, 231, 35)" class="fab fa-accusoft"></i> Random <em
        style="color: rgb(166, 250, 69)">"Quotes"</em> Generator
      <i style="color: rgb(245, 231, 35)" class="fab fa-accusoft"></i>
    </h2>

    <div class=" container-fluid"> <img id="img" src="https://picsum.photos/1280/300/?random"
        class="rounded-circle mx-auto img-fluid m-3" />
      <div class="m-3 "
        style="background-color: rgb(235, 213, 235); border: solid; border-radius: 40px ;text-align: center;">
        <h4 style="font-size: x-large " id="h4" class="m-1"></h4>
        <p class="bg-dark text-warning" style="font-weight: bolder;font-size: 20px;" id="p">
        </p>
        <button style="
          padding: 10px;
          margin-bottom: 20px;
          font-weight: bolder;
          color: rgb(255, 211, 211);
          background-color: #56808f;
          font-size: 20px;
          border: 3px solid;
          border-radius: 40px;
          

          
        " id="btn">
          <b>Click To Generate a Quote </b>
        </button>
      </div>
    </div>
  </div>




</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="index.js"></script>

</html>

Answer №2

To make your webpage responsive, you can set the body element to have a height of 100vh which represents 100% of the viewport's height. This is particularly helpful for mobile users as it adapts to their screen size. For more information on using vh units in CSS, check out this resource: https://www.sitepoint.com/css-viewport-units-quick-start/

body {
    height: 100vh;
}

Answer №3

Utilizing the wholePage class in your div element that encompasses all page content can serve as a solution if setting height: 100vh; on your body tag proves ineffective.

.wholePage {
    height: 100vh;
}

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

Guide on extracting a JavaScript string from a URL using Django

How can I extract "things" from the JavaScript URL "/people/things/" without any unnecessary characters? I've attempted inefficient methods like iteration, but struggle with removing the undesired parts of the string, leading to slow performance. Th ...

javascripthtmldjangourl

Displaying Image URLs in a Web Form using AJAX

I have been researching how to accomplish this task. So far, my search has led me to uploading an image and then using AJAX to preview it. Is there a way to do the same for an image URL? For example, when a user submits an image URL, can AJAX provide a ...

javascriptjqueryajaxhtmlforms

"Clicking on a hash link will refresh the current page

I have a snippet of code embedded on external websites that loads HTML, CSS, and JavaScript using a <script> tag. Within the code is a JavaScript function that triggers when a specific link is clicked: <a href="#">?</a> If there are Ja ...

htmlhashbrowser-bugs

Discovering the best locations for locating CSS color codes

I came across this question which led me to search for the color codes of green, red and yellow in decimal format for the rgba() function. According to this website, I found that green is represented by #008000, equivalent to rgb(0, 128, 0). However, I a ...

css

Issue with Bootstrap navbar button not functioning properly on various devices, including mobile

My mobile navbar is having issues, as the button does not seem to be working at all. Initially, there was no button or navigation, but I have now added the button to the navbar. However, it still doesn't seem to be functioning properly, and I may ha ...

htmltwitter-bootstrap

What is the best way to make JavaScript display the strings in an array as bullet points on different lines?

We were assigned a task in our computer science class to analyze and extend a piece of code provided to us. Here is the given code snippet: <!DOCTYPE html> <html> <head> <title>Example Website</title> </head> <body& ...

javascripthtml

Update a class based on a specified condition

Can I streamline the process of adding or removing a class from an element based on a variable's truthiness? Currently, my code seems overly complex: if (myConditionIsMet) { myEl.classList.add("myClass"); } else { myEl.classList.remove("myClass"); ...

javascripthtmlcss

To prevent flickering when using child flex elements, it's best to use position fixed along with a dynamically updated scrollbar position using Javascript

My navigation component includes a slim banner that should hide upon scroll and a main-nav bar that should stick to the top of the screen and shrink when it does so. I initially looked into using Intersection Observer based on a popular answer found here: ...

javascripthtmlcssscroll

Aligning columns vertically in the Bootstrap grid

So you've got a layout with two columns using Twitter Bootstrap, and you want to make sure specific rows are vertically aligned: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css"/> < ...

csstwitter-bootstrapvertical-alignment

Discovering the magic of toggling multiple hide/show effects on click in Bootstrap 4

I have successfully implemented Hide and Show effects through the on-click event. $(document).ready(function () { // hiding clear button initially $(".clearfiltershow .clearFiltersBtn").css('visibility', 'hidden') ...

javascriptjquerybootstrap-4show-hide

Achieve an overlapping effect with grid items

I'm in the process of creating a CSS grid layout where the header overlaps the next row. Below is a snippet of my code with the header positioned on top, and the linked image should give you an idea of what I'm aiming for. Thank you! https://i ...

htmlcsscss-grid

Navigation bar stays concealed on mobile devices until manually dragged down with a touch

I am in the process of creating a mobile website (non-native) for an iPhone 4. I want to include a "header" that is 80 pixels high and 100% wide, but remains hidden until the user swipes down on the screen. I found a helpful article that almost meets my n ...

htmlcssjquery-mobilemobile

Spring Security 3 does not support the use of static resources

I am facing difficulty in configuring static resources (such as js, css, images) in spring security 3. Here is my configuration file: <beans xmlns="http://www.springframework.org/schema/beans" xmlns:security="http://www.springframework.org/schema/s ...

javascriptcssimagespring-mvcspring-security

Enhancing a webpage with a new header section using jQuery

I am attempting to include a banner div <div id='banner'></div> above an existing webpage in a way that the banner stays on top when scrolling, while also pushing the content down so all parts of the page are still accessible. Belo ...

javascriptjqueryhtmlcss

Looking to have the image float after reducing the size of the windows in html?

For my webpage, I want an image to appear on the extreme left when the browser is maximized, but then move to the extreme right when the browser is minimized. I've tried using float, but it doesn't seem to be working. Any suggestions on how to ac ...

htmlcsscss-floatminimize

Comparing v-show(true/false) and replaceWith: Exploring the best practice between Vue and jQuery

Currently, I am in the process of learning vue.js and have a question regarding the best approach to implement the following scenario: https://i.sstatic.net/2YBEF.png https://i.sstatic.net/YCEHG.png The main query is whether it is acceptable in HTML to w ...

javascriptjqueryhtmlvue.js

A guide to resizing images to fit the page in React using Bootstrap

Currently, I am utilizing a function to iterate over each item in the props array and generate an image tag. My goal is to have every set of 3 images enclosed within a row div using Bootstrap to ensure proper page layout. However, I am struggling to implem ...

javascriptcssreactjsbootstrap-4

Could a jquery slick carousel be used to modify the body background of a webpage?

Is it possible to have one of the divs in a carousel change the background of the page, while the carousel is active on that specific div? if ($('.carousel').slick('slickGoTo', 1)){ //if slick is on slide index 1 //change to another pag ...

javascripthtmljquery

Splitting your screen in a 10/90 column ratio using React

I am looking to split my screen into a 10/90 ratio of the total screen space. // Here is what I have attempted: return ( <> <div class="row"> <div className="col-md-4" > ; <div class="le ...

htmlreactjsmaterial-ui

What are the steps to designing customizable drop-down content menus on websites?

I am looking to implement a feature where I can create content drop-down bars similar to the ones shown in the images. When a user clicks on the bar, the content should be displayed, and if clicked again, the drop-down should hide. I have searched for a so ...

javascripthtml