So i am making a login page using bootstrap and i noticed that there is a white outline in the card, inspected it and noticed there is a subtly difference in size between the <div class="card rounded-3 text-black"> and <div class="row g-0"> i wonder how to remove the white outline. i didn’t noticed because the background was white until i finished the code. I also tried adding some style in the <head> because i thought that was the issue but it wasn’t.
here are the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.card-body {
padding: 0;
background-color: transparent;
}
/*.card{
padding: 0;
background-color: transparent;
}*/
</style>
</head>
<body>
<section class="vh-100 bg-dark" >
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-lg-10">
<div class="card rounded-3 text-black">
<div class="row g-0">
<div class="col-10 offset-1 offset-md-0 col-md-6 order-md-1">
<div class="card-body p-5 mx-md-4">
<div class="text-center">
<!-- <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/lotus.webp" style="width: 185px" alt="logo" /> -->
<i class="fa-solid fa-eye fa-lg"></i>
<h4 class="mt-1 mb-5 pb-1">Watches</h4>
</div>
<form>
<p>Please login to your account</p>
<div data-mdb-input-init class="form-outline mb-4">
<label class="form-label" for="form2Example11">Username</label>
<input type="email" id="form2Example11" class="form-control" placeholder="Phone number or email address" />
</div>
<div data-mdb-input-init class="form-outline mb-4">
<label class="form-label" for="form2Example22">Password</label>
<input type="password" id="form2Example22" class="form-control" />
</div>
<div class="text-center pt-1 mb-5 pb-1">
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block d-block mb-3 w-100" type="button">Log in</button>
<a class="text-muted d-block" href="#!">Forgot password?</a>
</div>
<div class="d-xl-flex text-center text-xl-start align-items-center justify-content-center pb-4">
<p class="mb-0 me-xl-2 d-block">Don't have an account?</p>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-danger">Create new</button>
</div>
</form>
</div>
</div>
<div class="d-none col-md-6 d-md-flex align-items-center bg-dark">
<div class="text-white px-3 py-4 p-md-5 mx-md-4">
<h4 class="mb-4">We are more than just a company</h4>
<p class="small mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://kit.fontawesome.com/4ad797e598.js" crossorigin="anonymous"></script>
</body>
</html>
New contributor
David Jansen is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.