Resize logo/image and Form using react-bootstrap?


Currently my enter image description hereproto-type website looks like this:

This is my entire window. I want to make the logo much smaller and shrink + center the file upload form (ie. not have it edge-to-edge). I’m using React and React-bootstrap. Currently my render looks like this:

return (
            <>
                <div className='App'>
                    <link
                        rel="stylesheet"
                        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
                        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
                        crossorigin="anonymous"
                    />
                    <link
                        rel="stylesheet"
                        href="./App.css"
                    />
                    <header className='App-header'>
                        <img src={logo} className='App-logo' alt='logo' />
                    </header>
                    
                    <div id='Main'>
                        {this.state.statusElement}
                        <Form.Group controlId="formFile" className="mb-3" onChange={this.onFileChange.bind(this)} required>
                            <Form.Label>Test Data</Form.Label>
                            <Form.Control type="file" />
                        </Form.Group>
                        <Button variant="outline-primary" onClick={this.onSubmit.bind(this)} >Upload</Button>{' '}
                    </div>
                </div>
            </>
        );

and my custom CSS file looks like this:

.App-logo {
height: 1vmin;
pointer-events: none;
}


@media (prefers-reduced-motion: no-preference) {
.App-logo {
  animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
/* background-color: #282c34;
min-height: 100vh; */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
/* color: white; */
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
  transform: rotate(0deg);
}
to {
  transform: rotate(360deg);
}
}

.form-inline {
  width: 100;
}

I tried changing the .App-header and .App-logo but that didn’t seem to work. If someone could give me some pointers, that would really help!

Source: CSS – Stack Overflow

November 22, 2021
Category : News
Tags: css | react-bootstrap | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.