Hey everyone, I'm currently working on an app using react-bootstrap and I've run into a problem with styling the footer. When I try to add a background color to my footer using the * tag, it ends up affecting all of my components rather than just the footer component. Can anyone offer some guidance on how to solve this? Any help is greatly appreciated.
Here's my code:
import '../styles/Footer.css'
import {Row, Col} from "react-bootstrap"
const Footer = () => {
return (
<>
<Row>
<Col md={12} lg={4} className= "footerleft">
<img alt="Logo Hotel"></img>
</Col>
<Col md={12} lg={4} className= "footermid">
<h3>Contact Info</h3>
<hr></hr>
<p>Email:
</p>
</Col>
<Col md={12} lg={4} className= "footerright">
<h3> Follow Us</h3>
<hr></hr>
<a><img src="" alt="Facebook Logo"></img></a>
<a><img src="" alt="Instagram Logo"></img></a>
</Col>
</Row>
<div className="copyright">
<hr></hr>
<p>
Copyright © 2014
<br/>
All Rights Reserved
</p>
</div>
</>
)
}
export default Footer
This is my Footer.css file:
*{
background-color: blue;
}
.copyright{
text-align: center;
}
.copyright hr{
color: #967A50;
}