Arrange the footer content into multiple columns

Hello! I'm currently working on creating a footer for my website. I've written this code and everything seems to be functioning correctly, except for the fact that the second row is positioned under the first row and taking up half of the bottom of the screen. I need the second row to align to the right of the first row. Can anyone offer some assistance? Thank you! View image description here

<div class="footer">
    <div class="container>
        <div class="row">
            <div class="col-md-6">
                <h4>Links</h4>
                <li><a href="index.html">Home</a></li>
                <li><a href="courses.html">Courses</a></li>
                <li><a href="sign-up.html">Sign Up</a></li>
                <li><a href="log-in.html">Log In</a></li>
                <li><a href="help.html">Help</a></li>
            </div>

            <div class="col-md-6">
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <h4>Social Media</h4>
                <li><a href="#">Facebook</a></li>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Youtube</a></li>
                <li><a href="#">Instagram</a></li>
            </div>
        </div>
    </div>
</div>
htmlcss

Answer №1

If you're using bootstrap, there's no need for complex CSS - this HTML should work just fine.

Just a heads up, if the screen size goes below x pixels (around 376px), the two columns might overlap.

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <h4>Links</h4>
                <li><a href="index.html">Home</a></li>
                <li><a href="courses.html">Courses</a></li>
                <li><a href="sign-up.html">Sign Up</a></li>
                <li><a href="log-in.html">Log In</a></li>
                <li><a href="help.html">Help</a></li>
            </div>

            <div class="col-sm-6">
              <h4>Social Media</h4>
                <li><a href="#">Facebook</a></li>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Youtube</a></li>
                <li><a href="#">Instagram</a></li>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Answer №2

here is an example of using flex:

.footer .container{
    display: flex;
    justify-content: space-between;
}

Check it out in action

.footer{
  padding: 20px 0;
  background-color: #CDCDEF;
}
.footer .container{
  width: 70%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}
.footer .container .row ul{
  list-style: none;
}
<div class="footer">
    <div class="container">
        <div class="row">
            <ul class="col-md-6">
                <li><h4>Links</h4></li>
                <li><a href="index.html">Home</a></li>
                <li><a href="courses.html">Courses</a></li>
                <li><a href="sign-up.html">Sign Up</a></li>
                <li><a href="log-in.html">Log In</a></li>
                <li><a href="help.html">Help</a></li>
            </ul>
            <div class="col-md-6">
            </div>
        </div>
        <div class="row">
            <ul class="col-md-6">
                <li><h4>Social Media</h4></li>
                <li><a href="#">Facebook</a></li>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Youtube</a></li>
                <li><a href="#">Instagram</a></li>
            </ul>
        </div>
    </div>
</div>

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 is the significance of using HttpUtility's HtmlDecode function in my code?

One of my ASP.NET MVC controllers returns a view where I generate some HTML code. For example: @Html.ActionLink(HttpUtility.HtmlDecode("&iquest;Olvid&oacute; su contrase&ntilde;a&#63;"), "ForgotYourPassword", "Account", null, new { style = ...

c#asp.net-mvchtmlrazor

Instructions for adding up all the values in each column of an HTML table and showing the total in the footer of that specific column

Can someone help me with my HTML table setup? I have a table structure as shown below, and I am looking to add a "Total" row at the footer for each specific "quarter". "quarter1" "quarter2" "quarter3" "quarter4" 250000 115000 ...

phpjqueryhtml

Loading Web Applications Screen

My web app contains multiple tree views. Upon loading the page, I first see the unordered lists before the styling of the trees is displayed in the DOM after a brief delay. Is there a method to mask the web app with a spinner placed in the center of the s ...

javascriptjqueryhtmlcssweb-applications

Tips for determining the size and identifier of a newly appended element in jQuery?

Struggling to create a select element with a width="347px" and id="select-box-1". I attempted to use .append("select"), but my search on .append() didn't yield the desired results. Unsuccessful Attempt: .append("< ...

javascripthtmld3.jsappend

What is the best way to make a div that maintains its size even when the content inside is modified?

My goal is to develop a media feed that includes various types of content such as text, images, and videos. To ensure user safety, I want to conceal any explicit posts with a warning that requires the user to click in order to view the content. Although I ...

htmlcss

Leverage AJAX variables directly within the HTML page

In my application, I have incorporated an Input type="date" field to capture date values from users. However, I need to send the value of the date as "sdate" in the URL used in the action method, as illustrated below. My goal is to post the value of the In ...

phpajaxhtmljquery

A collection of jQuery objects that consist of various DOM elements as their properties

Seeking a more concise and potentially more streamlined approach using jQuery. I have an object called lbl which represents a div. Inside this div, there is a span tag that contains the properties firstName and lastName of the lbl object. Here's how t ...

javascriptjquerycssdom

An obstacle prevents the code injection process in the Chrome extension when a button is pressed

My basic chrome extension is not functioning correctly. More specifically, I am encountering an issue where the alert box does not appear when I click on the button in the popup. Here are the contents of my manifest.json file: {"manifest_version": 2, "n ...

javascripthtmlgoogle-chrome-extension

javascript issue with setting the id attribute on a select option

I can't seem to set the id attribute in my select element using JavaScript. When I inspect it, the id attribute isn't showing up... Here's the first method using JS: var selectorElem = document.getElementById('selector') var ...

javascripthtmlreactjsselect

Tips for validating html:options collection in Struts 1.3?

A Treemap is populated with values from a database using the following Java code: Map<String, String> treeMap = new TreeMap<String, String>(map); Iterator mapIterator = mapSet.iterator(); while (mapIterator.hasNext()) { Map.Entry mapEntry = ...

javahtmljspstrutsstruts-1

Alter the position of the anchor object in the center using JavaScript upon page load

When my page loads, I want to automatically jump to a specific anchor tag and ensure that the anchor object is centered in the window. Initially, I implemented a basic function to achieve this: <body onload="goToAnchor();"> <script type="text/ja ...

javascriptjquerycssanchoronload

Several dropdown menus within the same container, working independently of each other

I recently encountered an issue with a drop-down navigation bar. When I have multiple drop-downs and click on one, it opens as expected. However, if I then proceed to click on another drop-down while the first one is already open, both of them remain open ...

javascriptjqueryhtmlcss

Deciphering click event parameters in an AngularJS application

Currently, I am in the process of improving a feature in an existing application that has already been deployed. Unfortunately, all the JavaScript code is minified, and I only have access to the HTML files. I need to implement a function that triggers when ...

javascripthtmlangularjsonclickangularjs-scope

Foundation: the importance of source order (without using flex grid)

I have a 3-column grid, with content and a sidebar. On small and medium devices each takes up 12 columns. Take a look at the example here: cdpn.io/anon/pen/bqENqG. I am looking to have the sidebar appear after the articles on small and medium devices like ...

htmlcsszurb-foundation

Running concurrently, the JavaScript if and else statements execute together

I am looking to create a clickable link that changes the background color when clicked. If the same link is clicked again, I want the background to return to its original state. Here is my current script: <div style="background: transparent;" onclick=" ...

javascripthtml

Obtaining data from a hyperlink's attribute within HTML

I have a question that builds upon my previous inquiry: Finding the text of an href tag from an HTML file My current query involves extracting the number within seekVideo(number). For instance: <a href="#" class="transcriptLink" onclick="seekVideo(200 ...

iphonehtmlxml

showcasing a map on an HTML webpage

Seeking advice on integrating a map feature in HTML to mark store locations. Working on an app for a business community and need help with this specific functionality. Your assistance would be greatly appreciated! ...

javascripthtml

Ways to eliminate white space in bootstrap CSS menu bar

My goal is to create a responsive navigation bar using Bootstrap and customize it to fit my design needs. Although I was able to implement the dropdown on mobile-sized windows, I encountered a margin issue that I couldn't remove on the right side. I ...

htmlcsstwitter-bootstrap

The value of Angular Input remains unchanged within a FormArray

I am experiencing an issue with the Sequence No in my PreprocessingForm's FormArray. When I add a new row, the Sequence No does not change as expected. <tr class="mat-row" *ngFor="let dynamic of PreprocessingForm.controls.arithmeticI ...

htmlangulartypescriptformarray

Discover how to display the loading time and memory usage of a web page on the footer using the jQuery and AngularJS library

Does anyone know how to display the loading time and memory usage of a web page in the footer using jQuery and AngularJS libraries? I've managed to show the loading time with this jQuery code: <script type="text/javascript"> before = (new Date( ...

javascriptjqueryhtmlangularjs