Guide to aligning the footer content at the center using the Bootstrap 4 grid structure

I am currently working on the footer design of a website and my goal is to center the contents within it. You can view the fiddle for reference. As of now, the contents in the fiddle are not perfectly centered.

Here are the CSS styles I have applied to position the contents at the footer:

.footer_fixed
{
    background-color: #343a40;
    color: #C0C0C0;
}

.contact_us
{
    text-align: right;
}


.social_media_icons
{
     text-align: left;
}



Current Issue:

I am seeking advice on what modifications need to be made in the code within the fiddle to ensure the contents are centered in the footer. I attempted using 

(display:flex, align-items:center)
but did not achieve the desired result.

.footer_fixed
{
    background-color: #343a40;
    color: #C0C0C0;
    display: flex;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}
htmlcssbootstrap-4centerfooter

Answer №1

Apply the justify-content-center class to the row element, and swap out both instances of col-md-6 with col-md-auto.

 <div class="row pt-2 pb-2 justify-content-center">
    <div class="col-md-auto contact_us">
    </div>
    <div class="col-md-auto social_media_icons">
    </div>
  </div>

https://jsfiddle.net/c6a0873L/1/

By the way, using the following CSS properties is unnecessary because col-*-auto automatically adjusts its width according to the content within.

.contact_us {
  text-align: right;
}

.social_media_icons {
  text-align: left;
}

Answer №2

Give this a shot

/*---------- Footer Styles -----------*/

.footer
{
  color: white;
  padding-top: 44px; 
  background-color: rgb(243,243,243);
}

.footer a
{
  color: rgb(138,138,138);
  
}

.footer a:hover
{
  color:#fb875c
}

/* More CSS definitions for the footer... */

@media only screen and (min-width: 768px)
{
  .appstore_1
  {
    display: block;
  }

  .appstore_2
  {
    display: none;
  }
}

@media only screen and (max-width: 768px)
{
  .appstore_1
  {
    display: none;
  }

  .appstore_2
  {
    display: block;
  }
}

.footer_fixed
{
    background-color: #343a40;
    color: #C0C0C0;
}

.contact_us
{
text-align: right;
}

.social_media_icons
{
text-align: left;
}
<!doctype html>
<html>

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

</head>

<body>
 <div class="fixed-bottom footer_fixed">

<!-- HTML content for footer section -->

</div>
</body>

</html>

Answer №3

To optimize your code for responsive design, consider adjusting the layout without using col-md-6 bootstrap columns. Instead, utilize media queries to customize the display based on screen size. Your updated code could look something like this:

<!doctype html>
<html>

<head>
    <style>
     .contact_us, .social_media_icons, .email{
        display:inline-block;
    }

    @media only screen and (max-width: 768px){
        .contact_us, .social_media_icons, .email{
            display:block;
            width:100%;
        }

    }
    </style>
</head>

<body>
 <div class="fixed-bottom footer_fixed">


<div class="row pt-2 pb-2">
 <div class="col-lg-12 col-md-12 text-center">
    <div class="contact_us">

        <i class="fas fa-phone pr-1"></i>
        <a href="tel:+1234567890" class="pr-3">
            +1 234 456 7890
        </a>
   </div>
   <div class="email">
        <span class="static-email">
            <i class="fas fa-envelope pl-3 pr-1"></i>
            <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3bfb6a7a081a6b0b8bab5aa9381a6b0b8bab5aafdb0bcbe">[email protected]</a>">
                <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="640c0108080b130b16080024130b1608004a070b09">[email protected]</a>
            </a>
        </span>

    </div>
    <div class="social_media_icons">

        <ul class="social-network social-circle">
            <li><a href="https://www.facebook.com/" target="_blank" class="icoFacebook" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
            <li><a href="https://twitter.com/" target="_blank" class="icoTwitter" title="Twitter"><i class="fab fa-twitter"></i></a></li>
            <li><a href="https://www.linkedin.com/company/" target="_blank" class="icoLinkedin" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a></li>
            <li><a href="https://www.instagram.com/" target="_blank" class="icoInstagram" title="Instagram"><i class="fab fa-instagram"></i></a></li>
        </ul>

    </div>
</div>


</div>
</body>

</html>

Answer №4

To center both columns, adjust the layout by moving the ul inside the contact div and utilize the full column width with either col-12 or col-md-12.

Make sure to update the 

.contact_us { text-align: center; }
CSS rule accordingly.

/*---------- Footer -----------*/

.footer {
  color: white;
  padding-top: 44px;
  background-color: rgb(243, 243, 243);
}

... (CSS code continued) ...

.contact_us {
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact_us ul.social-network {
  margin-bottom: 0px;
  height: 30px;
  display: flex;
  align-items: center;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <link rel="stylesheet" href="css/footer.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

</head>

<body>
  <div class="fixed-bottom footer_fixed">


    <div class="row pt-2 pb-2">
      <div class="col-12 contact_us">

        ... (HTML content continued) ...

      </div>

    </div>


  </div>
</body>

</html>

Answer №5

If you want to implement flex classes with bootstrap, check out this link: https://getbootstrap.com/docs/4.1/utilities/flex/
No need to completely overhaul your CSS and HTML structure, just incorporate some specific class names:

<div class="fixed-bottom footer_fixed">

<div class="d-flex pt-2 pb-2  flex-wrap flex-md-nowrap justify-content-center">
  <div class="px-3 d-flex flex-wrap justify-content-center">
    <i class="fas fa-phone pr-1"></i>
    <a href="tel:+1234567890" class="pr-3">
        +1 234 456 7890
    </a>
    <span class="static-email">
        <i class="fas fa-envelope pl-3 pr-1"></i>
        <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3afa6b7b091b6a0a8aaa5ba8391b6a0a8aaa5baeda0acae">[email protected]</a>">
            <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b333e3737342c3429373f1b2c3429373f75383436">[email protected]</a>
        </a>
    </span>
  </div>
  <div class="px-3 social_media_icons">
    <ul class="social-network social-circle">
        <li><a href="https://www.facebook.com/" target="_blank" class="icoFacebook" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
        <li><a href="https://twitter.com/" target="_blank" class="icoTwitter" title="Twitter"><i class="fab fa-twitter"></i></a></li>
        <li><a href="https://www.linkedin.com/company/" target="_blank" class="icoLinkedin" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a></li>
        <li><a href="https://www.instagram.com/" target="_blank" class="icoInstagram" title="Instagram"><i class="fab fa-instagram"></i></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

Buttons styled with Material-UI positioned to the right

Is there a way to align buttons on the right using Material-UI's makeStyles function? I have tried using CSS properties like margin-right: 0, but encountered errors when using '-' with makeStyles. I even tried renaming it as 'marginRigh ...

cssreactjsmaterial-ui

Angular 6: Customizing the title of ngBootstrap accordion panel based on its state of collapse

Is there a way to customize the titles of panels within an accordion created with ngBootstrap? I noticed NgbPanel has a property called isOpen, but I'm uncertain how to access its value. Can anyone provide guidance on this? ...

angularbootstrap-4ng-bootstrap

What is the method for retrieving an element inside the <td> tag of a table that is being iterated over?

In the nested looped tables below, there is a <td> element containing a <div> element named divrep, which is currently closed. My aim is to access this div element when the input button labeled Reply is clicked in order to open it. However, th ...

javascripthtmlasp.net-mvcrazor

"I am experiencing a problem where the CSS code is not reflecting on my Flask application

I am currently trying to learn how to develop flask applications. However, I've encountered an issue where the CSS code I write never seems to be applied when linked to my HTML template. No matter what I try, the styles just won't show up. Here ...

cssflask

Having trouble with your jQuery animation on a div?

Check out this jsFiddle example: http://jsfiddle.net/uM68j/ After clicking on one of the links in the demo, the bar is supposed to smoothly slide to the top. However, instead of animating, it immediately jumps to the top. How can I modify the code to ac ...

javascriptjquerycssjquery-animate

Navigate through the parent elements and show the text if the child element is not present

I'm currently exploring how to iterate through all parent classes (.grid) and if there is no child div with the class (.image-container), then to display the (.content-container) within the same (.grid) section. HTML: <style> .grid .content-co ...

jqueryhtmlcss

Customize your file input with Bootstrap 4 using bs-custom-file-input and create a Symfony 5 collection with dynamic upload fields

The issue of not having a label for the chosen filename in a bootstrap 4 upload field has been resolved using the plugin https://github.com/Johann-S/bs-custom-file-input You can utilize "bs-custom-file-input" to showcase the selected filename in the boots ...

javascriptphphtmlsymfonybootstrap-4

Disabling comments is creating problems with the appearance of Wordpress pages

Visit handheldtesting.com Whenever the option "disable comments" is selected in the backend, or if 'display:none:' is added <div id="respond" class="comment-respond" style="display:none;"> to the code, half of the content on the page dis ...

htmlcsswordpress

Using Drupal to automatically adjust comment widths

My webpage features two div blocks that are set to a default width of 900px each. To make them adjust their width according to the text content, I used float: left; or display: inline-block; This caused the divs to resize based on the size of the text, b ...

htmlcssdrupal-7width

What is the best way to include a new line or HTML code in this particular JavaScript function?

I am attempting to create a typewriter effect and I have everything working except for creating new lines. I've tried using the following: \n \r <br /> but it just types those characters instead of creating a new line. Here is my j ...

javascriptjqueryhtml

Stay tuned for Quasar's input validation event notifications

Within my Vue3 Quasar application, I have implemented a component structure similar to the following: <template> <div class="q-pa-md"> <div id="myCustomLabel">{{ props.label }}</div> <q-input r ...

cssvue.jstypesvuejs3quasar-framework

When attempting to retrieve the percentage value, Jquery Calculation is producing a NaN error

Can anyone assist with a jQuery issue I am facing? I'm trying to calculate the final price after applying a discount percentage entered in the second field. However, when using the keyUp event, it keeps returning NaN. I've tried using parseInt in ...

javascripthtmljquery

What values can be used for the CSS Property "padding-right-ltr-source"?

Currently, I am facing an issue with box padding specifically in Firefox. Upon inspecting the affected span element, I noticed a property called "padding-right-ltr-source" with the value "physical". Here is the snippet of code: >padding: 0px 15px; ...

cssfirefoxpadding

Top and bottom borders embraced by text: the ultimate header design

I'm looking to create a screen-wide headline with a simple text-logo. The challenge is to make it touch the container's top and bottom borders like this example, including its half-height variations. Upon inspecting the HTML, I noticed that ther ...

htmlcss

Display content based on user input using PHP

As someone who is completely new to coding, I'm attempting to display text based on grades. If a user selects 1, then "Bad" should be printed, and so forth. While I believe using if/else statements could help achieve this, I am inexperienced in coding ...

phphtmlforms

Interactive Javascript dropdown helper on change

I am currently experimenting with a JavaScript onchange method, as I am relatively new to coding. My goal is that when I select "ID Type," the input text should change to "passport," and when I select "South African ID," the input should switch to "South ...

javascriptphpjqueryhtmlangularjs

Isotope data-filter not working properly following an Ajax callback

I'm looking for a way to create a filter that can be dynamically updated: I have utilized the isotope javascript library in an external script file: var $container = $('.isotope'); // initialize isotope $container.isotope({ ...

javascriptjqueryhtmlajaxjquery-isotope

Assistance required: Click on the button to select and copy all text within the specified paragraph ID

Hey there! I've got a div with a dropdown menu that reveals text and images based on the selected option. What I want to achieve is having a button that allows users to copy all the content inside the div. Below is my sample code for the div dropdown ...

javascriptjqueryhtmlcss

Using jQuery to Capture Datepicker Input and Assigning to PHP Variable

I need help figuring out how to save a jQuery datepicker value in a php date formatted variable. My goal is to have: input field named "reviewdate" = 03/02/2015 input field named "reviewmonth" = 3 Both values should be stored in a mysql database. I am ...

javascriptphpjqueryhtmlmysql

Selection menu drops down once the save is complete

I have two drop-down menus named source and campaign, displaying data from the database. In addition to these drop-downs, there are other input fields as well. My concern is that I want to save the filled data along with the selected options in the drop-do ...

phphtmlmysql