alignment not working in react for footer

Question

I am trying to get a footer properly but I can't get the result, I expect

here is what I expect to have:

below is what I have:

The copyright text is lost somewhere on the right. You can't see it as background is white.

here is the code:

import React, {}  from 'react';
import {Form, InputGroup} from 'react-bootstrap';
import { Navbar } from 'react-bootstrap';

import TextContents from '../assets/translations/TextContents';
import WhiteButton from './materialdesign/WhiteButton';

import SiteLogo from '../assets/images/village-logo.svg';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFacebook, faTwitter, faLinkedinIn, faInstagram } from '@fortawesome/free-brands-svg-icons'

import './Footer.css';
class Footer extends React.Component {

    constructor(props, context) {
        super(props);
        this.state = {showLogin: false};
    }

    render() {
        return (
            <div>
                <div className="container">
                    <Navbar className="navbar" width="100" expand="lg">
                        <div className="footer-menu">
                            <div>
                                <Navbar.Brand href="/">
                                    <img
                                        src= { SiteLogo }
                                        className="logo"
                                        alt="Village"
                                    />
                                </Navbar.Brand>
                            </div>
                            <div className="subscribe">
                                <InputGroup className="subscribe-form">
                                    <Form.Control
                                    type="email"
                                    placeholder={TextContents.EmailSubscribe}
                                    className="subscribe-form-control"
                                />
                                </InputGroup>       
                            </div>
                            <div className="follow-container">
                                <WhiteButton textSize="14" link_href="#" text={TextContents.Join} />
                                <p className="follow-text"> {TextContents.Follow} </p>
                                <FontAwesomeIcon icon={faFacebook} className="follow-icon"/>
                                <FontAwesomeIcon icon={faTwitter} className="follow-icon"/>
                                <FontAwesomeIcon icon={faInstagram} className="follow-icon"/>
                                <FontAwesomeIcon icon={faLinkedinIn} className="follow-icon"/>
                            </div>
                        </div>
                    </Navbar>
                </div>
                <div>
                    <p className="copyright-text">{TextContents.Copyright}</p>
                </div>
            </div>);
        }
}

export default Footer;

and the css

.navbar{
    background-color: white;
    width: 80%;
    margin-top: 2%;
    margin-bottom: 2%;
    font-family: "Fredoka One";
    font-size: 18px;
    margin: auto;
}

.logo {
    width: 214px;
    height: 28px;
    margin-right: 24;/*theme.spacing(3)*/
}
.container{
    display: flex;
    box-shadow: none;
    background-color: #ffffff;
    /*margin-top: 24; /*theme.spacing(3),*/
    position: absolute;
    bottom: 0;
    width: 80%;
    height: 2.5rem;
}

.footer-menu {
    display: flex;
    position: relative;
}

.subscribe {
    display: flex;
    position: relative;
    border-radius: 21px;
    background-color: #f4f7f8;
    margin-right: 16; /*theme.spacing(2),*/
    margin-left: 24; /*theme.spacing(3),*/
    width: 467px;
    height: 40px;
}

.follow-container {
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-left: 16px;/*theme.spacing(2),*/
    min-width: 300px;
}

.follow-text {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    color: #ff7255;
    font-family: Source Sans Pro;
    min-width: 75px;
    margin-left: 20px;
    margin-right: 5px;
}

.follow-icon {
    width: 18px;
    height: 18px;
    margin-right: 2px;
    margin-left: 2px;
    color: #ff7255;
}

.copyright-text {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: #ffff7255;
    font-family: Source Sans Pro;
}

.subscribe-form {
    width: 470px;
    height: 40px;
    border-radius: 20px;
    margin-left: 60px;
}

.subscribe-form-control {
    font-family: Source Sans Pro;
    text-align: left;
    color: #cdcece;
    background-color: #f4f7f8;
    border-style: none;
}

Any idea How to properly center everything and make sure I have 2 lines. Thanks

Answer 1

Using flexbox add to the container div these bootstrap classes d-flex flex-column justify-content-center align-items-center.

Or manually add these styles to a .container selector

.container {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}