Flex spacing for horizontal components in React JS - css

Question

I have a footer which has three elements, I want to distribute them horizontally. I tried to space them horizontally using flex and space-between. Here is my react Component:
import React from "react";
export default function Footer()
{
const Element1 = "GZB Automation";
const today = new Date();
const DayFormat = today.toString().split(" ").slice(0,4);
const Element3 = DayFormat.filter(Boolean).join(" ");
console.log(Element3);
const Element2 = "Copyright © "+today.getFullYear().toString()+". All rights reserved.";
return(
<div className="FooterAligner">
<div className="FooterElement">{Element1}</div>
<div className="FooterElement">{Element2}</div>
<div className="FooterElement">{Element3}</div>
</div>
);
}
CSS of the FooterAligner and FooterElement is as shown:
.FooterAligner
{
display: flex;
justify-content: space-between;
bottom: 2%;
position:fixed;
}
.FooterElement
{
width: calc(100%/3);
}
Here is how they appear:
And this is how I want them to appear:
P.S. Ignore the font-styling, text part, and slight background variations, I just want to know about spacing.
HomePage Script (app.js):
import React from 'react';
import StarterScreen from './components/screens/StarterScreen.jsx';
import LoginScreen from './components/screens/LoginScreen.jsx';
import RegisterScreen from './components/screens/RegisterScreen.jsx';
import DisplayScreen from './components/screens/DisplayScreen.jsx';
import 'bootstrap/dist/css/bootstrap.min.css';
import Footer from './components/junk/Footer.jsx';
//import LineChart from './components/coreComponents/LineChart.js';
import ProtectedRoute from './components/security/PrivateRoute.jsx';
import './App.css';
import {BrowserRouter,Route,Switch} from 'react-router-dom';
function App(){
return (
<div className="App">
<BrowserRouter>
<Switch>
<Route component={StarterScreen} exact path="/"></Route>
<Route component={RegisterScreen} exact path="/register"></Route>
<Route component={LoginScreen} exact path="/login"></Route>
<ProtectedRoute component={DisplayScreen} exact path="/login-props-test" />
</Switch>
</BrowserRouter>
<Footer />
</div>
);
}
export default App;
For reproduction: https://codesandbox.io/s/i8r3u

Answer 1

Since you're using Bootstrap in your project, why not leverage the flexbox utility classes it comes with?
In this particular example I added the d-flex class to the footer container. This converts it to a flex container, so then you can add justify-content-between, which would distribute the available space between elements:
function Footer() {
const element1 = "GZB Automation";
const today = new Date();
const dayFormat = today.toString().split(" ").slice(0, 4);
const element3 = dayFormat.filter(Boolean).join(" ");
const element2 = `Copyright © ${today
.getFullYear()
.toString()}. All rights reserved.`;
return (
<footer className="d-flex justify-content-between">
<div className="p-2">{element1}</div>
<div className="p-2">{element2}</div>
<div className="p-2"> {element3} </div>
</footer>
);
}
class App extends React.Component {
render() {
return (
<div>
Rest of the app goes here..
<Footer />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Note: The class p-2 is a Bootstrap utility class that adds padding to each child inside the flex container