CODEWITHSUNDEEP
htmlcsscontainersbootstrap-5footer
RENZ MARK FERNANDO
RENZ MARK FERNANDO

Reputation: 9

How can i remove containers spaces

im wondering if you can specify a custom width or height to your container when using a bootstrap and if will not affect the default responsiveness of the bootstrap container. Now, this is my main question how can i remove the space below my content in the bootstrap container , this is the screenshot screenshotand this is the code. i've added a border so i can clearly see if the space at the bottom will be removed.

<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 tried using mb-0 and pb-0 and it still doesn't work and also i've tried using d-flex align-items-end to align the contents at the bottom of the container but it still doesn't work.

Upvotes: 0

Views: 69

Answers (1)

Preeti yadav
Preeti yadav

Reputation: 92

This issue might not because of bootstrap container, but because the <p> tag get by default margin bottom 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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

Upvotes: 0

Related Questions