I am using bootstrap 5
As soon as I use:
<div className = "card card-body mt-5">
There is a top margin, which looks great for the card. However it pushes my background image down by the same margin. I have tried to put the card in a div with various container types but I can’t retain the behaviour of both elements i.e. the card to have the margin from top, but the background image to start right below the header.
Full html:
<link rel="stylesheet" href="https://bootswatch.com/5/cosmo/bootstrap.min.css">
<div className='container-flex remove-whitespace'>
<div style={background}>
<div className="col-md-6 m-auto">
<div className='conatiner'>
<div className = "card card-body mt-5">
<h2 className="text-center">Register</h2>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>Username</label>
<input type="text" className="form-control" name="username" onChange={this.onChange} value={username} />
</div>
<div className="form-group">
<label>Email</label>
<input type="email" className="form-control" name="email"
onChange={this.onChange} value={email} />
</div>
<div className="form-group">
<label>Password</label>
<input type="password" className="form-control" name="password"
onChange={this.onChange} value={password} />
</div>
<div className="form-group">
<label>Confirm Password</label>
<input type="password" className="form-control" name="password2"
onChange={this.onChange} value={password2} />
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary">
Register
</button>
</div>
<p>
Already have an account? <Link to="/login">Login</Link>
</p>
</form>
</div>
</div>
</div>
</div>
</div>How would I go about ensuring that the background image has 0 margin from top/header while the card maintain the margin from top/header?
>Solution :
An easy and quick solution is to set the padding instead than the margin
<link rel="stylesheet" href="https://bootswatch.com/5/cosmo/bootstrap.min.css">
<div className='container-flex '>
<div style="background-image:url('https://picsum.photos/id/11/600/800')">
<div className='container' class="pt-2">
<div className = "card card-body">
<h2 className="text-center">Register</h2>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>Username</label>
<input type="text" className="form-control" name="username" onChange={this.onChange} value={username} />
</div>
<div className="form-group">
<label>Email</label>
<input type="email" className="form-control" name="email"
onChange={this.onChange} value={email} />
</div>
<div className="form-group">
<label>Password</label>
<input type="password" className="form-control" name="password"
onChange={this.onChange} value={password} />
</div>
<div className="form-group">
<label>Confirm Password</label>
<input type="password" className="form-control" name="password2"
onChange={this.onChange} value={password2} />
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary">
Register
</button>
</div>
<p>
Already have an account? <Link to="/login">Login</Link>
</p>
</form>
</div>
</div>
</div>
</div><link rel="stylesheet" href="https://bootswatch.com/5/cosmo/bootstrap.min.css">
<div className='container-flex remove-whitespace'>
<div style={background}>
<div className="col-md-6 m-auto">
<div className='conatiner'>
<div className = "card card-body mt-5">
<h2 className="text-center">Register</h2>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>Username</label>
<input type="text" className="form-control" name="username" onChange={this.onChange} value={username} />
</div>
<div className="form-group">
<label>Email</label>
<input type="email" className="form-control" name="email"
onChange={this.onChange} value={email} />
</div>
<div className="form-group">
<label>Password</label>
<input type="password" className="form-control" name="password"
onChange={this.onChange} value={password} />
</div>
<div className="form-group">
<label>Confirm Password</label>
<input type="password" className="form-control" name="password2"
onChange={this.onChange} value={password2} />
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary">
Register
</button>
</div>
<p>
Already have an account? <Link to="/login">Login</Link>
</p>
</form>
</div>
</div>
</div>
</div>
</div>