Align two grid columns in the centre of the footer

I have a question regarding the alignment of two grid columns in my footer. I am using Bootstrap 4 and would like to center them directly in the middle. Currently, both columns are centered individually but there is a large space between them. I have tried various solutions from this link and here, but none of them seem to work for me.

I want the two columns to be side by side like shown in this image: example image.

Below is my HTML code:

<!DOCTYPE html>
<html>

...

This is my CSS:

body{
    margin: 0px;
}

...
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

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

We are focusing on the specified class. Substitute your existing code with the provided one below.

class="row justify-content-center"

Next, adjust the column widths. The issue lies in using col-md-6 for every column, causing each to take up half of the width and create gaps. Instead, use

class="col-3"

in place of the identified codes.https://i.sstatic.net/WNzK2.png

This adjustment should resolve the problem.

Answer №2

To achieve the desired layout, it is recommended to implement a flex or grid system. Personally, I find flex to be the most effective option. Simply include the following code snippet at the end of your CSS file and test its functionality.

.row{
    display: flex;
    justify-content: center;
}

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

What steps should I take to make my Vue JS delete function operational?

As I work on developing my website, I've encountered some challenges. Being new to coding, I'm struggling with creating a functional delete user button. When I click delete, it redirects me to the delete URL but doesn't remove the entry from ...

javascripthtmlcssvue.js

Ensuring IconButton is perfectly aligned with Text in one straight line

I want to display IconButtons alongside plain text in a single block of text, but the result didn't turn out as I had hoped. Here is what I attempted: JS(ReactJS): <div> <span> <h3>Title</h3> <IconButton className ...

cssreactjsmaterial-uifrontend

Using JavaScript, insert a new date row onto a JSP page

When I click on a hyperlink, I want to add a new row to a jsp page. The functionality is working correctly, but the date function class="dateTxt" is not functioning in the new row. Below are the details of the javascript and jsp function. Javascript: fun ...

javascriptjqueryhtmljsp

Utilizing Material-UI for CSS styling in a live environment

My application has a 'dashboard' feature that utilizes material-ui. Within this dashboard, other apps are called and rendered. While this setup functioned smoothly during development, I encountered issues once switching to a production build. The ...

cssreactjsmaterial-ui

"Positioning a div around a Bootstrap form-inline: A step-by-step guide

When using Bootstrap 3 "form-inline" within a <div>, I noticed that the div seems to be nested within the form-inline. This is how my code looks: HTML <div class="wrapper"> <div class="form-inline"> <div ...

javascripthtmlcsstwitter-bootstrap

"Please provide a correct time" when working with Django TimeField using the django-bootstrap3-datetime package

Encountering time validation issues while submitting a form using Django Bootstrap datetime picker. Upon submission, receiving an error message stating "Enter a valid time." models.py: class Appointment(models.Model): date = models.DateField() ti ...

pythondjangotwitter-bootstrapdjango-modelsdjango-forms

When the width of the element is set to 100vw, it disrupts the

I'm attempting to expand a sticky element to fit the size of the screen. Here is the HTML code I am using: .large { height: 200vw; width: 200vw; } .header { left: 0; top: 0; color:white; position: sticky; width: 100px; height: 10 ...

htmlcss

Dynamic Rendering of Object Arrays in Table Columns using JavaScript

In the process of developing an appointment slot selection grid, I have successfully grouped all appointments by dates. However, I am facing challenges in displaying this array of Objects as a clickable grid with columns. The current output can be viewed h ...

javascripthtmlgrid-layout

Take a snapshot of an element using fixed element positioning

When it comes to extracting a sub image from a webpage using Selenium, I have found a reliable method. First, I capture a screenshot of the entire page and then extract the desired sub-image using the element's coordinates. Dimension elementDimension ...

javajqueryhtmlcssselenium

Oops! Looks like we have encountered an error: X is not recognized

As I navigate through the WebOS enyo framework, frustration starts to set in. The error message displayed in my log is causing me a headache. Despite examining samples within the framework, pinpointing the source of the error has proven to be a challenge. ...

javascripthtmlwebosenyo

What are the steps to testing a webpage designed for Retina display?

I have designed a webpage optimized for retina display, but I don't own a monitor with that capability. Is there a simulation tool available to test websites on retina displays? Alternatively, are there non-Apple monitors comparable to Apple's ...

htmlretina-display

What is the best way to customize the background color of a highlighted ToggleButton in react-bootstrap?

Currently, I'm using react-bootstrap and facing a challenge in changing the background color of a chosen <ToggleButton> to blue. For instance: <ButtonToolbar> <ToggleButtonGroup type="radio" name="options" ...

cssreactjsreact-bootstrap

I am attempting to add user input to the parent container when the button is clicked, but for some reason it is

Recently delving into jquery, I attempted to dynamically add an input field to a parent div on button click, but encountered some difficulties. Specifically, my goal was to insert a div with an input element into the parent div identified by the id "join ...

jqueryhtml

Handling 404 errors in Nginx when using try_files directive for .html files

When presented with this SEF URL /attrazioni/madame-tussauds-londra.html, I am required to retrieve the actual URL which is /index.php?q=/attrazioni/madame-tussauds-londra.html I currently have a directive in place, however, it functions correctly only fo ...

phphtmlnginxurl-rewriting

What's the best way to ensure that columns clear properly when using bootstrap?

Instead of providing code to solve an issue, I am using Bootstrap and encountering problems with the roster section where the heights are inconsistent. My temporary solutions involved adding classes to specific divs or setting fixed column heights, but I&a ...

jqueryhtmlcsstwitter-bootstrap

Retrieve main page elements from an additional page called PageSlide

I have implemented the jquery PageSlide plugin as a menu feature on my website. The plugin opens a separate page on the side of the main page to function as a menu. However, I am facing a challenge in accessing the main page's elements from this side ...

javascriptjqueryhtmlcss

Tips for keeping the main section from scrolling while scrolling through the side navigation

Within my Angular application, I have implemented a sidenav and a main section. My desired behavior is to prevent any scrolling in the main section while I am scrolling in the sidenav, similar to the functionality seen on the Angular Material Design docume ...

javascriptcssangularjs

Customizing CSS for a Single Container

Recently, I've been tweaking the CSS for the selectMenu UI plugin in jQuery. I have a specific file where all my CSS styles are stored. My goal is to include this file on every page request but restrict its application only to my select menus, not ot ...

cssjquery-ui

What's the best way to align a bottom navigation bar in the center?

Hey there! I recently added a bottom navigation bar to my website using HTML and CSS code. However, I'm having trouble centering it at the bottom of the page. Any suggestions or solutions would be greatly appreciated. Attached are screenshots of the H ...

htmlcssnavbar

Collaborate on documents with fellow users on the Django platform

Summary of the app: The main focus of this application is to enable users to create projects and share uploaded files with others, based on permission settings. Basically, after creating a project using the Project module, when a user uploads a file to the ...

pythonhtmldjangoredis