Is there a way to eliminate gaps between containers?

Is it possible to specify a custom width or height for the container when using Bootstrap without affecting its default responsiveness? My main concern is how to eliminate the space below the content in the Bootstrap container. Here's a screenshot screenshot along with the code snippet where I added a border to identify the bottom space easily.

<footer class="border">

            <div class="container border">
            
                <p class="light">2024 © Secured E-Voting System for <span class="text-primary">Sulivan National High School</span></p>
                
            </div>
    </footer>

I've attempted using classes like mb-0 and pb-0, but they did not resolve the issue. Additionally, I tried using d-flex align-items-end to position the contents at the bottom of the container with no success.

htmlcsscontainersbootstrap-5footer

Answer №1

It is possible that the issue does not stem from the bootstrap container itself, but rather from the default margin-bottom applied to the <p> tag in bootstrap.

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88a87879c9b9c9a8998a8ddc6dbc6db">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>

    <footer class="border">

        <div class="container border ">

            <p class="light mb-0">2024 © Secured E-Voting System for <span class="text-primary">Sulivan National High
                    School</span></p>

        </div>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46242929323532342736067368756875">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

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

CSS: Preserve HTML elements and only conceal the text within an <a> tag

Inside an "a" element, there's an image followed by text as a link. I'm looking to only hide the text of the link without affecting the display of the image. <a href="https://www.example.com/page"> <img src=" ...

htmlcss

Resizing a damaged HTML table to fit within a designated width using CSS

Here is a challenge - I have some broken HTML that I can't touch, and don't want to use JavaScript to fix. My goal is to make it fit within a specific width: http://jsfiddle.net/P7A9m/2/ <div id="main"> <table> <tr> ...

htmlcsswidthhtml-table

Guide to designing a dropdown navigation menu in GWT

Hey, I'm currently working on setting up a drop down menu using GWT and here's the layout I have in mind: | Categories | Pictures | Other | When the categories dropdown opens, my goal is to display the categories grouped in pairs. For example: ...

javacssgwt

augmentable form that can be expanded flexibly

Perhaps I'm missing something really simple here, but I just can't seem to figure this out. I'm attempting to create a form that can dynamically extend. The issue I'm facing is that I can't get this particular code to function: & ...

javascriptphphtml

Internet Explorer 9 does not display content until the ajax/json function has finished executing

I have encountered an issue with my code regarding updating a div element. The first innerHTML call seems to be ineffective and does not render in the browser. However, the second innerHTML call works as expected by appending "Complete" once the ajax call ...

javascripthtmlajaxdom

JavaScript Functions for Beginners

I'm currently facing some challenges with transferring the scripts and HTML content from the calendar on refdesk.com. My task involves moving the JavaScript to a separate stylesheet and utilizing those functions to replicate the calendar on an HTML pa ...

javascripthtmlcalendar

The parser for PHP CSS struggles with interpreting semicolons within property values

I encountered an issue while using a function to parse CSS files. The problem arises when the property values contain semicolons, causing it to break. Here's an example snippet from the CSS file: #logo { background-image: url("data:image/png;base ...

phpcssparsing

I must obtain the unique identifier for the element on the second page in order to create a new HTML document

I'm currently working on creating an HTML page (Page1) that will access a URL from another page (Page2) and retrieve the element ID of a dropdown menu from Page2. The goal is to have this element selected when clicking on a hyperlink leading to the UR ...

javascriptjquerypythonhtmlajax

What is the method to create a button that links to a page when selected using a radio button?

How can I create radio buttons that link to different pages, where each radio button is associated with a specific website and directs me to that link when I press a button (not on click)? I've attempted the following but need some help: <h3&g ...

htmlbuttonradio-button

Remove the scrollbar from the iframe and instead display a scrollbar on the page in its place

Currently, I am facing an issue with the vertical scrollbar on an iframe. I want to remove it so that the scrollbar appears on the main page instead. This way, I will be able to scroll the content of the iframe using the page's scrollbar. I managed to ...

javascriptjquerycssiframescrollbar

Styling a HTML div element with a header and footer, while also ensuring that the

My goal is to create a div that features a header with a unique background design. The content within the div should have a background consisting of a one-pixel repetition at y, or maybe something different? I also want a footer with its own distinctive ...

jquerycsshtml

Animated image inside clickable element (HTML, CSS)

Is there a method to embed a gif within a button and have it activate on hover? ...

htmlcssbuttongif

How do I alter the color of a Vue 3 font awesome icon?

I am currently using Vue version 3.2.1 and have followed the official Font Awesome documentation for Vue 3 found at https://github.com/FortAwesome/vue-fontawesome. I also referenced a helpful video tutorial: https://www.youtube.com/watch?v=MoDIpTuRWfM Des ...

cssvue.jsfont-awesomevuejs3

Guide on converting AS3 to HTML5 while incorporating external AS filesAlternatively: Steps for transforming AS

I've been given the challenging task of transforming a large and complex Flash project into html5 and javaScript. The main stumbling block I'm facing is its heavy reliance on external .as files, leaving me uncertain about the best approach. Most ...

javascripthtmlactionscript-3flash

Fetching Information from Firebase and Populating Dropdown Menus on a Website

Displayed below is a code snippet from a .JSON file stored in a Firebase database. "questionnaires" : { "ORANGE" : { "location" : "ny", "major" : { "engineering" : { "ECE" : { "3rd sem" : { "2018 ...

javascriptjqueryhtmljsonfirebase-realtime-database

Adjusting the width of a DIV element within a table cell

In my ASP.NET application, I am facing an issue with table column widths not rendering as expected in the browser. Despite setting the column width to 100px, it appears as either 96px or 108px. The problem seems to be related to having a div inside the th ...

htmlcss

Notifying the Player of Victory in a Javascript Tic Tac Toe Game: The Winning Alert

Recently, I decided to dive into Javascript and kick off my very first game project - a Tic Tac Toe game. If you're curious to see the code for my project, you can check it out here: Tic Tac Toe Project One feature I'm eager to implement is a n ...

javascripthtmlcsstic-tac-toe

What is the best way to ensure that my top menu remains fixed while scrolling?

Link to website: I am looking to have the top menu on my page remain fixed at the top of the screen as users scroll. Does anyone know if this is achievable, and if so, how can I implement it? ...

javascripthtmlcsstwitter-bootstrap

Looking to find the video code in the page source and figure out how to get the video to play

I have a requirement where I must embed the video code directly in a blog post. After figuring out the necessary code for the video and saving it in a html file named video.html, I encountered an issue when trying to upload the file to the blog. Only the ...

javascripthtmlajaxnode.js

Seeking a more deliberate option instead of using $(window).load, one that is not as quick as $(document)

Currently, my goal is to utilize JavaScript to conceal my preloader once the DOM and key elements have been loaded. The issue lies in the fact that various iframes on my page can significantly slow down this process. It seems that using jQuery's $(do ...

javascriptjqueryhtmldom