My styles are mysteriously changing when I add the bootstrap link between the <head></head> tags.
Here is the header without the bootstrap link: https://i.sstatic.net/ly2nf.png
And here is the header with the bootstrap link: https://i.sstatic.net/OBRJg.png
Let's take a look at the style of the header:
.headerStyle {
background-color: black;
flex-direction: row;
justify-content: space-between;
display: flex;
}
And here is the header in React JS:
<div className="headerStyle" style={{ height: 60 }}>
<div style={{ flexDirection: 'row', display: 'flex' }}>
<ButtonSection name="Home" path="/" />
<ButtonSection name="About" path="/about" />
<ButtonSection name="Contact Us" path="/contactUs" />
</div>
<div style={{ justifyContent: 'space-evenly', display: 'flex', alignItems: 'center' }}>
<SignUpButton />
<LoginButton />
</div>
</div>