Я не знаю, имеет ли смысл начальная загрузка для такого рода формы, но возможно ли, чтобы страница занимала ВСЮ область страницы, а не центр?
а если нет, то я мог бы хотя бы поместить изображение на всю страницу? (извините, если я не вижу особого смысла).
Html:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Bootstrap 4 Layout</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">CompanyName</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown">Products</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Product 1</a>
<a class="dropdown-item" href="#">Product 1</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Product 1</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide p-3" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/painter.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/sydney.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/thing.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title</p>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col">
<div class="card ">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title</p>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col">
<div class="card ">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title</p>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col ">
<div class="card ">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title</p>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
<div class="row mt-sm-4 mt-md-0">
<div class="col-sm-12 col-md-8 text-sm-center text-md-left">
<h3>Important heading</h3>
<p class="lead">A sort of important subheading can go here, which is larger and gray.</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lobortis lorem ac diam vestibulum, vitae tempor nulla aliquam. Nam in accumsan libero, et tempus nisi. Vivamus luctus turpis efficitur, vehicula tortor sed, lacinia nunc. Suspendisse eu hendrerit est. Donec placerat placerat facilisis. Sed interdum vitae metus et efficitur. Fusce pretium sed enim eget maximus. </p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lobortis lorem ac diam vestibulum, vitae tempor nulla aliquam. Nam in accumsan libero, et tempus nisi. Vivamus luctus turpis efficitur, vehicula tortor sed, lacinia nunc. Suspendisse eu hendrerit est. Donec placerat placerat facilisis. Sed interdum vitae metus et efficitur. Fusce pretium sed enim eget maximus. </p>
</div>
<div class="footer sm-12 text-sm-center bg-secondary">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lobortis lorem ac diam vestibulum, vitae tempor nulla aliquam. Nam in accumsan libero, et tempus nisi. Vivamus luctus turpis efficitur, vehicula tortor sed, lacinia nunc. Suspendisse eu hendrerit est. Donec placerat placerat facilisis. Sed interdum vitae metus et efficitur. Fusce pretium sed enim eget maximus. </p>
</div>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"><`enter code here`/script>
<script src="/js/bootstrap.min.js"></script>
</body>`enter code here`
</html>