Center two grid columns directly in the center of footer

Question

0.00/5 (No votes)

See more:

I have two grid columns in my footer, and I would like to center them directly in the center. Currently, the columns and content are centered, but there is a huge space between the two grid columns. I am using Bootstrap 4.

I want to make the two columns to be side by side like this: https://imgur.com/a/oLIgq6A .

This is my html:

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Cuppela</title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/popper.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/test.css" type="text/css">
</head>

<body>

<div id="nav-menu">
    <nav id="main-nav" class="navbar navbar-expand-md fixed-top navbar-dark">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            
          </button>
          <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="nav navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Shop</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

<script>

$(window).scroll(function()
{
    var $theNavBar = $('#main-nav');
    if($(document).scrollTop() > ($theNavBar.height()+10))
    {
        $theNavBar
            .removeClass('bg-transparent')
            .addClass('bg-dark');
    }
    else
    {
        $theNavBar
            .addClass('bg-transparent')
            .removeClass('bg-dark');
    }
});

</script>

<div class="container-fluid" id="top-main" style="background-image: url('images/cake_six.jpg');"> 

    <div id="top_text">
        <h1>Cuppela Made With Sugar</h1>
        <p style="font-size: x-large;">Delicious Homemade Cakes</p>
    </div>
    
</div>

<div id="best-sellers "class="container">
    <h2>Best Sellers</h2>
    <hr>
    <div id="best-seller-cakes" class="row">
        <div class="col-xs-12 col-sm-6 col-lg-3">
            <img src="images/cake_three.jpg">
            <h4>Good<br>Cakes</h4>
            <p>Delicious Cake with Awesome Goodness</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-lg-3">
            <img src="images/red_velvet_cake.jpeg">
            <h4>Awesome<br>Cakes</h4>
            <p>Delicious Cake with Awesome Goodness</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-lg-3">
            <img src="images/strawberry_cake.jpg">
            <h4>Great<br>Cakes</h4>
            <p>Delicious Cake with Awesome Goodness</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-lg-3">
            <img src="images/cake_three.jpg">
            <h4>Delicious<br>Cakes</h4>
            <p>Delicious Cake with Awesome Goodness</p>
        </div>
    </div>
</div>

<footer class="page-footer font-small bg-dark">

  <div class="container-fluid">

    <div id="footer-content" class="row no-gutters">

      <div id="address-details" class="col-md-6">

        <p>Feel free to contact us. We're always ready to help you.</p>
        <h5 class="text-uppercase font-weight-bold">Address</h5>
        <address>
        <dl>
                    <dt>Location:</dt>
                    <dd>Test Street 42, Block 330, 123456</dd>
        </dl>
        </address>
      </div>
      
      <div id="contact-details" class="col-md-6">

        <h5 class="text-uppercase font-weight-bold">Contact</h5>
        <address>
            <dl class="dl-horizontal-mod-1">
                <dt>Phone</dt>
                <dd><a href="callto:#" class="text-primary">9000 0000</a></dd>
            </dl>
            <dl class="dl-horizontal-mod-1">
                <dt>Email</dt>
                <dd><a href="mailto:#" class="text-primary">test@demo.com</a></dd>
            </dl>

             <dl class="dl-horizontal-mod-1">
                <dt>Facebook</dt>
                <dd><a href="#" class="text-primary">Cuppela Made With Sugar</a></dd>
            </dl>
        </address>

      </div>

    </div>

  </div>

  <div id="copyright" class="footer-copyright text-center py-3">
    © 2021 Copyright:
    <a>Cuppela</a>
  </div>

</footer>
</body>
</html>

This is my css:

CSS

body{
    margin: 0px;
}

li a:hover {
    background: #ff9900;
    border-radius: 10px;
}

li a{
    color: white !important;
}

.nav-link{
    padding: 0 0 .2rem
}

#top-main{
    height: 100vh;
}

#nav-menu{
    font-size: medium;
    position: relative;
}

#top_text{
    color: white;
    text-align: center;
    position: relative;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

h1{
    font-size: 500%;
    text-align: center;
}


h2{
    text-align: center;
}

img
{
    width: 260px;
    height: 170px;
}

#best-sellers{
    text-align: center;
}

#best-seller-cakes{
    text-align: center;
}

h4
{
    font-size: x-large;
    text-transform: uppercase;
    font-weight: bold;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

#footer-content
{
    text-align: center;
    color: white;
}

#copyright
{
    color: #ff9900;
}

What I have tried:

I have tried solutions from Remove spacing between cols[^] and Remove gutter space for a specific div only[^] but it does not seem to work for me.

Posted 5-Aug-21 17:06pm

nkm00e

Updated 5-Aug-21 23:04pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2021-08-05T23:04:00

Solution 1

Rather than using the row class, use the flexbox utilities[^]:

HTML

<div id="footer-content" class="d-flex justify-content-center">
    <div id="address-details" class="mr-1">
        ...
    </div>
    <div id="contact-details" class="ml-1">
        ...
    </div>
</div>

Demo[^]

Posted 5-Aug-21 23:04pm

Richard Deeming