Align the footer vertically with Bootstrap 4, ensuring it stays in line with columns and rows

Seeking a solution to vertically align the 2 rows within the footer, both arranged using a Bootstrap grid.

My attempt involved creating a content wrapper and utilizing a conventional flexbox solution: display: flex; align-items: center. However, this caused both rows to be displayed on the same line.

Access my Fiddle here https://codepen.io/pen/WNNPdxv

HTML 

<footer class="footer">
        <div class="footer-wrapper">
            <div class="container">
                <div class="row row">
                    <div class="col-sm-8 footer-credit">
                        <h6>GetMove</h6>
                        <p>Copyright &copy 2019 GetMove All Rights Reserved</p>
                    </div>
                    <div class="col-sm-2 footer-contact">
                        <h6>Contact</h6>
                        <a href="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfb7b0b3be9fb8baabb2b0a9baf1b1baab">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3850575459785f5d4c55574e5d16565d4c">[email protected]</a></a>
                    </div>
                    <div class="col-sm-2 footer-social-icons">
                        <h6>Follow us</h6>
                        <a class="social-icon" target="_blank" href="https://www.facebook.com/pg/GetMove.Official/"
                            ><i class="fab fa-facebook-square"></i
                        ></a>
                        <a class="social-icon" target="_blank" href="https://www.instagram.com/getmovemx/"
                            ><i class="fab fa-instagram"></i
                        ></a>
                        <a class="social-icon" target="_blank" href="https://soundcloud.com/getmove"
                            ><i class="fab fa-soundcloud"></i
                        ></a>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 text-center"></div>
                    <div class="col-sm-4 footer-newsletter">
                        <h6>Subscribe</h6>
                        <div class="input-group input-group-sm mb-3">
                            <input
                                type="text"
                                class="form-control shadow-none"
                                id="subscribe"
                                placeholder="@ Enter your email adress"
                                aria-label="Sizing example input"
                                aria-describedby="inputGroup-sizing-sm"
                            />
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button" id="button-addon1">
                                    Submit
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container footer-credit">
                <div class="row">
                    <div class="col-sm-8"></div>
                    <div class="col-sm-4 footer-credit"></div>
                </div>
            </div>
        </div>
    </footer>

CSS

.footer {
    width: 100%;
    height: 24em; /* Adjust footer height as necessary */
    background-color: #f4f2f0;
    margin-top: 4em;
}

.footer-social-icons {
    list-style-type: none;
}

.footer h6 {
    text-transform: uppercase;
    font-size: 16px;
}

.footer-credit {
    font-size: 11px;
}

.social-icon {
    /* display: block; */
    margin: 0;
    font-size: 16px;
}

.form-control:focus {
    border-color: black;
}
cssbootstrap-4

Answer №1

To center content vertically, it is important to understand the concept of using a wrapper. In this case, the existing wrapper called container should be utilized effectively without adding unnecessary containers within the footer section.

Here are some key points to consider for improving the structure:

  • The container serves as the main wrapper
  • Avoid redundancy like having row row
  • Using empty columns as placeholders may not be necessary with flexbox (bootstrap 4) - check for classes like m-auto, ml-auto, mr-auto
  • Custom classes should be placed inside columns for flexibility in design changes
  • Maintain a clean structure and utilize utility classes for styling (padding, margin, etc.)

Optimized HTML Structure

<footer role="contentinfo">
    <div class="container">
        <div class="row">
            <div class="col-sm-7"></div>
            <div class="col-sm-3"></div>
            <div class="col-sm-2"></div>
        </div>
        <div class="row">
            <div class="col-sm-5 ml-auto"></div>
        </div>
        <div class="row">
            <div class="col-sm-5 ml-auto"></div>
        </div>
    </div>
</footer>

Enhanced Solution

By setting the height on the footer and utilizing flex properties, such as display: flex; and justify-content: center;, you can seamlessly align the content vertically.

footer[role="contentinfo"] {
    display: flex;
    flex-flow: column wrap;
    justify-content: center; /* Aligns content vertically */
}

Check out the DEMO for a visual representation.

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

displaying the identical image from various perspectives

I have an arrow image that I need to display in different angles - top, left, bottom, right. I was considering what would be the best approach: 1: Changing the image direction via CSS and loading the main image <img src="a.png"> <img src="a.png" ...

androidhtmlcssoptimization

Preserve proportions while resizing the browser window

I needed my code to ensure that the images keep their aspect ratio regardless of the screen size or if the user resizes their browser instead of viewing it full screen. I have some code in place, but I'm unsure how to maintain the current effects of ...

htmlcss

Is there a way to trigger the mouseover event on every element currently under the cursor?

In my web application, I have a feature where a dot is created every time you click. However, when hovering over a stack of dots, only the top dot triggers the mouseover or mouseenter event. How can I ensure that the events fire for every dot under the cur ...

javascriptjqueryhtmlcsssvg

I currently have some code for a toggle button and a collapse feature, but I'm struggling to integrate the two

I need assistance with implementing a toggle animation I found here: https://codepen.io/7harrypotterrr/pen/OrBwPY. I'm unsure how to apply it to my code and replace the current toggle button that is in use here: https://codepen.io/7harrypotterrr/pen/e ...

htmlcss

Text remains unaltered on input focus

When I click on the input field, I expect the label to transform but it doesn't. However, using ".user-input:focus, .user-input:valid" changes the input, indicating that it should work with the label as well. .user-input:focus+.user-label, .user-in ...

htmlcss

What causes variations in layouts when using the same CSS grid code across different pages?

I've encountered an issue where the CSS on two pages, with slight color changes, is behaving differently in terms of grid layout. Despite multiple attempts to troubleshoot by adjusting items, grid-template-layout, and other parameters, the issue persi ...

htmlcsscss-grid

How can I reload the filtered data in a table after making changes to a field with a Modal form in a Spring Boot application using JPA, Thymeleaf,

In my project table, I have utilized the following Controller code to populate the projects @RequestMapping(method = RequestMethod.GET) public String listProjects(Model model){ model.addAttribute("projects", this.projectService.getProjects()) ...

bootstrap-4spring-data-jpathymeleaf

The presence of element a within the element ul is not permitted in this particular scenario. Additional errors from this section will not be displayed

Having trouble with this code snippet: <nav role="navigation"> <div id="menuToggle"> <input type="checkbox"/> <span></span> <span></span> <span></span> ...

htmlcss

When the anchor tag is clicked, I'm displaying the DIV for Customer Testimonials, however, the expansion of its height is not

One way to display customer testimonials is by using flexslider to create a horizontal scroll. The testimonials are hidden and only shown when the "view all testimonials" link is clicked, which can be seen in this JSFiddle example: Working : Demo JQuery ...

javascriptjqueryhtmlcss

Text positioned in a fixed location

How can I ensure that the main content stays on the right side of the sidebar without adding margin-right? Currently, the sidebar is being covered by the body content due to its fixed position. Is there a solution to prevent this issue? .App { displa ...

htmlcss

Creating a responsive Select tag

Currently developing a responsive webpage using HTML5 and CSS3. Within the HTML is a form with a table that collapses as the page size decreases. However, encountering an issue where the select tag does not collapse alongside other elements in the form. Be ...

htmlcssresponsive-design

Creating a three-column layout in CSS with only two divs

Struggling to format a page with 3 columns using only 2 divs for the contents. One div affects just the end of the content, while the other impacts all of it. Currently, the layout is like this: This is the first content-------------------This is the se ...

css

Utilize a function from a separate JavaScript file by calling it within the $(document).ready(function()

Refer to this post for more information: Click here I attempted to access a function that was defined in another .js file based on the instructions from the post. However, I encountered an issue. Take a look at my code below: sildemenu.js $(document).re ...

javascriptjqueryhtmlcss

Bootstrap Carousel with descriptions in a separate container without any display or hiding transitions

I have created a slider using Bootstrap and some JavaScript code that I modified from various sources. Everything is working well, but I want to remove the transition or animation that occurs when the caption changes. Currently, the captions seem to slide ...

javascripthtmlcssbootstrap-4carousel

Drop down menu alignment issue: unable to center menu on the page

My dropdown menu is misaligned and not centering on the page, even after multiple attempts to fix it using HTML and CSS only. I have refrained from using JavaScript or JQuery for this issue. CSS Code: <style type="text/css"> /* STYLING FOR DROPDOWN ...

htmlcssmenudrop-down-menu

What is the best way to arrange an unordered list in a horizontal layout?

I have four lists that I want to display side by side. The first row should show a Doctor and Patient side by side, the second row should show a Pharma Company and Employee side by side. However, in my code, this layout is not working as intended. .tree ...

htmlcss

How can I add a % symbol to user input in a text input field?

When utilizing a number spinner, I'm looking to include the % symbol in the input box by default. I attempted using a span, however, it places the symbol outside the box. ...

javascriptjqueryhtmlcss

Each column has its own scroll bar, making use of 100% of the available space within a container that is 100%

I am attempting to create 3 columns, each with its own scroll bar, while also taking up 100% of the available space. However, I am facing issues where there is either no scroll bar present or the columns are not occupying 100% of the available space. It ...

csstwitter-bootstrap-3bootstrap-5

Does anyone know if it's achievable to include a background position within the img /asp:image tag?

Currently, I am endeavoring to enhance the loading speed of my webpage. The initial approach I decided to pursue is base64 conversion. On my homepage, there are a total of 18 small images that need to be loaded. Since base64 encoding increases image size ...

c#htmlcssasp.netimage

Conceal a hidden element underneath a see-through layer featuring an adaptable background image spanning the entire webpage

Is there a way to create a "title bar" with text only, that stays fixed on top and the content below scrolls underneath it? Additionally, is it possible to make the title bar transparent for the background but not for the content below it? Also, can the s ...

css