Топ 10 Bootstrap страниц 404

Юрий Герук 2025-11-30 81
Топ 10 Bootstrap страниц 404

Страница ошибки 404 это визитка аккуратности сайта. Даже если пользователь попал не туда она может сохранить доверие и вернуть его обратно. В этом материале представлены десять полностью готовых вариантов оформления страницы «404 страница не найдена» выполненные в современном стиле Bootstrap. Никаких изображений, только чистый стиль, идеальная типографика и плавные эффекты. Каждый шаблон содержит метатег авто-возврата и встроенный JavaScript таймер обратного отсчёта.

Любой из вариантов можно использовать на любом сайте.

Для сайтов uCoz установка максимально простая. Создаётся файл 404.htm. В него вставляется код выбранного варианта. Файл загружается в корень FTP. После загрузки переход на несуществующую страницу покажет новую красивую 404-страницу.

Во всех шаблонах указана ссылка https://sitename.com. Перед использованием замените её на свой сайт.

1. Минимализм с крупной типографикой и таймером

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>404</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="5;https://sitename.com/">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
body {display:flex;align-items:center;justify-content:center;height:100vh;margin:0;background:#f8f9fa;}
.code{font-size:5.5rem;font-weight:800;color:#0d6efd;}
</style>
</head>
<body>
<div class="text-center">
 <div class="code">404</div>
 <p class="lead mb-2">Страница не найдена</p>
 <p>Возврат через <span id="t">5</span> секунд</p>
 <a href="https://sitename.com/" class="btn btn-primary mt-3">На главную</a>
</div>
<script>
let s=5;setInterval(()=>{s--;document.getElementById("t").textContent=s;if(s<=0)location.href="https://sitename.com/";},1000);
</script>
</body>
</html>

2. Тёмный неоновый стиль с мягким свечением

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>404 ошибка</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="6;https://sitename.com/">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
body{background:#050814;color:#fff;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;}
.code{font-size:5rem;font-weight:800;text-shadow:0 0 18px #0d6efd;}
</style>
</head>
<body>
<div class="text-center">
 <div class="code">404</div>
 <p class="mb-2">Страница не найдена</p>
 <p>Переход через <span id="t">6</span> секунд</p>
 <a href="https://sitename.com/" class="btn btn-outline-light mt-3">Вернуться</a>
</div>
<script>
let s=6;setInterval(()=>{s--;document.getElementById("t").textContent=s;if(s<=0)location.href="https://sitename.com/";},1000);
</script>
</body>
</html>

3. Светлый приглушенный стиль с тонкой рамкой

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Страница не найдена</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="5;https://sitename.com/">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
body{background:#ffffff;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;}
.box{padding:40px;border:1px solid #dee2e6;border-radius:1rem;text-align:center;max-width:420px;}
.code{font-size:4rem;font-weight:700;color:#0d6efd;}
</style>
</head>
<body>
<div class="box">
 <div class="code">404</div>
 <p class="lead">Страница не найдена</p>
 <p>Переход через <span id="t">5</span> секунд</p>
 <a href="https://sitename.com/" class="btn btn-primary mt-2">Домой</a>
</div>
<script>
let s=5;setInterval(()=>{s--;document.getElementById("t").textContent=s;if(s<=0)location.href="https://sitename.com/";},1000);
</script>
</body>
</html>

4. Плоский стиль с огромным кодом ошибки

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>404 ошибка</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="4;https://sitename.com/">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
body{background:#f9fafb;margin:0;height:100vh;display:flex;align-items:center;justify-content:center;}
.code{font-size:7rem;font-weight:900;color:#0d6efd;opacity:.25;}
</style>
</head>
<body>
<div class="text-center">
 <div class="code">404</div>
 <p class="lead">Страница не найдена</p>
 <p>Автопереход через <span id="t">4</span> секунды</p>
 <a href="https://sitename.com/" class="btn btn-primary">Вернуться назад</a>
</div>
<script>
let s=4;setInterval(()=>{s--;document.getElementById("t").textContent=s;if(s<=0)location.href="https://sitename.com/";},1000);
</script>
</body>
</html>

5. Элегантная карточка с тенью

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Ошибка 404</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="6;https://sitename.com/">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
body{background:#e9edf4;height:100vh;margin:0;display:flex;align-items:center;justify-content:center;}
.card404{background:#fff;padding:40px;border-radius:20px;box-shadow:0 5px 25px rgba(0,0,0,.12);text-align:center;max-width:420px;}
.code{font-size:4.5rem;font-weight:800;color:#0d6efd;}
</style>
</head>
<body>
<div class="card404">
 <div class="code">404</div>
 <p class="lead">Страница не найдена</p>
 <p>Переход через <span id="t">6</span> секунд</p>
 <a href="https://sitename.com/" class="btn btn-primary mt-2">На главную</a>
</div>
<script>
let s=6;setInterval(()=>{s--;document.getElementById("t").textContent=s;if(s<=0)location.href="https://sitename.com/";},1000);
</script>
</body>
</html>

6. Чёрно-белая строгая 404 в корпоративном стиле

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>404 не найдено</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="5;https://sitename.com/">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
body{background:#fff;color:#000;height:100vh;margin:0;display:flex;justify-content:center;align-items:center;}
.code{font-size:5rem;font-weight:700;}
</style>
</head>
<body>
<div class="text-center">
 <div class="code">404</div>
 <p class="lead">Страница не найдена</p>
 <p>Переход через <span id="t">5</span> секунд</p>
 <a href="https://sitename.com/" class="btn btn-dark">Домой</a>
</div>
<script>
let s=5;setInterval(()=>{s--;document.getElementById("t").textContent=s;if(s<=0)location.href="https://sitename.com/";},1000);
</script>
</body>
</html>

7. Акцент на большом шрифте и тонкой кнопке

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Ошибка</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="4;https://sitename.com/">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
body{text-align:center;background:#f0f2f5;margin:0;height:100vh;display:flex;align-items:center;justify-content:center;}
.code{font-size:6rem;font-weight:800;color:#0d6efd;}
</style>
</head>
<body>
<div>
 <div class="code">404</div>
 <p class="lead">Страница не найдена</p>
 <p>Возврат через <span id="t">4</span> секунды</p>
 <a href="https://sitename.com/" class="btn btn-primary">На главную</a>
</div>
<script>
let s=4;setInterval(()=>{s--;document.getElementById("t").textContent=s;if(s<=0)location.href="https://sitename.com/";},1000);
</script>
</body>
</html>

8. Линия разделения и строгая структура

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Страница не найдена</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="7;https://sitename.com/">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
body{background:#ffffff;margin:0;height:100vh;display:flex;justify-content:center;align-items:center;}
.line{width:150px;height:4px;background:#0d6efd;margin:20px auto;}
</style>
</head>
<body>
<div class="text-center">
 <h1 class="display-4 fw-bold text-primary">404</h1>
 <div class="line"></div>
 <p class="lead">Страница не найдена</p>
 <p>Переход через <span id="t">7</span> секунд</p>
 <a href="https://sitename.com/" class="btn btn-primary">Перейти</a>
</div>
<script>
let s=7;setInterval(()=>{s--;document.getElementById("t").textContent=s;if(s<=0)location.href="https://sitename.com/";},1000);
</script>
</body>
</html>

9. Градиентное фоновое поле и мягкая анимация цифр

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>404 ошибка</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="5;https://sitename.com/">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
body{margin:0;height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e3efff,#f7faff);}
.code{font-size:5rem;font-weight:800;color:#0d6efd;animation:pulse 2s infinite;}
@keyframes pulse{0%{opacity:.5;}50%{opacity:1;}100%{opacity:.5;}}
</style>
</head>
<body>
<div class="text-center">
 <div class="code">404</div>
 <p class="lead text-secondary">Страница не найдена</p>
 <p>Возврат через <span id="t">5</span> секунд</p>
 <a href="https://sitename.com/" class="btn btn-primary mt-2">На главную</a>
</div>
<script>
let s=5;setInterval(()=>{s--;document.getElementById("t").textContent=s;if(s<=0)location.href="https://sitename.com/";},1000);
</script>
</body>
</html>

10. Полноэкранный минимализм с акцентной цифрой и кнопкой

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>404 страница не найдена</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="6;https://sitename.com/">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
body{margin:0;height:100vh;background:#f8f9fa;display:flex;justify-content:center;align-items:center;}
.code{font-size:6rem;font-weight:900;color:#0d6efd;}
</style>
</head>
<body>
<div class="text-center">
 <div class="code">404</div>
 <p class="lead">Страница не найдена</p>
 <p>Переход через <span id="t">6</span> секунд</p>
 <a href="https://sitename.com/" class="btn btn-primary">Домой</a>
</div>
<script>
let s=6;setInterval(()=>{s--;document.getElementById("t").textContent=s;if(s<=0)location.href="https://sitename.com/";},1000);
</script>
</body>
</html>

Как применить шаблон на сайте uCoz

Инструкция чрезвычайно простая

  1. Создайте текстовый файл с именем 404.htm.
  2. Вставьте в него код любого понравившегося варианта.
  3. Загрузите файл в корневую директорию FTP вашего сайта.
  4. Замените в коде https://sitename.com/ на свой реальный домен.
  5. Откройте любой несуществующий адрес например
    https://sitename.com/aaaa-test
    чтобы проверить работу новой страницы.

После установки ваш сайт будет отображать идеальную аккуратную современную страницу ошибки 404.

Заключение

Грамотно оформленная страница ошибки — это важная деталь сайта. Она делает проект профессиональным помогает удерживать пользователя и создаёт ощущение стабильности. Эти десять шаблонов выполнены в современном стиле Bootstrap без изображений с таймером и автоматическим возвратом. Любой из них можно применить за пару минут и тем самым серьёзно улучшить пользовательский опыт.

Оцените полезность материала!

Лицензия: CC BY-SA 4.0

Автор: Юрий Герук

Теги:
Bootstrap, 404, Шаблон, страница 404, ошибка 404

Похожие материалы:

Комментарии

Сообщение об ошибке 🚀