What is my goal?
I noticed a gap between my jumbotron and footer that I want to remove. Initially, I was able to achieve this by setting the margin-bottom to 0px, but it required passing an ID to the Jumbotron element. Now, my objective is to accomplish the same result without using IDs, but rather classes.
I prefer not to use inline styles and instead would like the styling to be done in a separate CSS file.
In a previous project (using react-bootstrap, not reactstrap), I recall being able to target all components of a specific type with a certain class, as shown in the CSS snippet below.
It seems that the issue may lie within the selector in the CSS file. I have searched online for a solution that specifically addresses this in a separate CSS file, rather than through inline styling, but haven't found much guidance.
MainContent.js
import React from 'react';
import './MainContent.css';
import { Jumbotron, Button, Form, FormGroup, Label, Input, Container } from 'reactstrap';
const MainContent = () => {
return (
<Container>
<Jumbotron>
<Form>
<FormGroup>
<Label for="exampleEmail">Email</Label>
<Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
</FormGroup>
<FormGroup>
<Label for="examplePassword">Password</Label>
<Input type="text" name="password" id="examplePassword" placeholder="password placeholder" />
</FormGroup>
<Button>Submit</Button>
</Form>
</Jumbotron>
</Container>
);
}
export default MainContent;
MainContent.css
.Container {
margin-bottom: 0px;
}
.Jumbotron {
margin-bottom: 0px;
}