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'>
                        href="[email protected]/dist/css/bootstrap.min.css"
                    <header className='App-header'>
                        <img src={logo} className='App-logo' alt='logo' />
                    <div id='Main'>
                        <Form.Group controlId="formFile" className="mb-3" onChange={this.onFileChange.bind(this)} required>
                            <Form.Label>Test Data</Form.Label>
                            <Form.Control type="file" />
                        <Button variant="outline-primary" onClick={this.onSubmit.bind(this)} >Upload</Button>{' '}

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.