In today’s tutorial, we will create thank you page using bootstrap 5. For this section we will see bootstrap 5 thank you template, than you page design shadow style and border.
Bootstrap 5 Thank You Page Example
1. Simple thank you page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Thank You Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="vh-100 d-flex justify-content-center align-items-center">
<div>
<div class="mb-4 text-center">
<svg xmlns="http://www.w3.org/2000/svg" class="text-success" width="75" height="75"
fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
</svg>
</div>
<div class="text-center">
<h1>Thank You !</h1>
<p>We've send the link to your inbox. Lorem ipsum dolor sit, </p>
<button class="btn btn-primary">Back Home</button>
</div>
</div>
</body>
</html>
bootstrap 5 thank you template
2. Bootstrap 5 design thank you page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Thank You Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="vh-100 d-flex justify-content-center align-items-center">
<div class="card col-md-4 bg-white shadow-md p-5">
<div class="mb-4 text-center">
<svg xmlns="http://www.w3.org/2000/svg" class="text-success" width="75" height="75"
fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path
d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z" />
</svg>
</div>
<div class="text-center">
<h1>Thank You !</h1>
<p>We've send the link to your inbox. Lorem ipsum dolor sit,lorem lorem </p>
<button class="btn btn-outline-success">Back Home</button>
</div>
</div>
</body>
</html>
bootstrap 5 thank you page card
3. Bootstrap 5 thank you page design with shadow and border.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Thank You Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="vh-100 d-flex justify-content-center align-items-center">
<div class="col-md-4">
<div class="border border-3 border-success"></div>
<div class="card bg-white shadow p-5">
<div class="mb-4 text-center">
<svg xmlns="http://www.w3.org/2000/svg" class="text-success" width="75" height="75"
fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path
d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z" />
</svg>
</div>
<div class="text-center">
<h1>Thank You !</h1>
<p>We've send the link to your inbox. Lorem ipsum dolor sit,lorem lorem </p>
<button class="btn btn-outline-success">Back Home</button>
</div>
</div>
</div>
</div>
</body>
</html>
bootstrap 5 thank you page style
