there's a space below container
i want to make container an body same size but without space below. Any suggestion?
i've tried set the margin. but i need another solution.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://ift.tt/2CBaTlQ" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> html, body { height: 1500px; background-image: url(img/bg2.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; } .container-fluid { margin-bottom: 0px; padding: 0px; height: 100%; border: 1px solid blue;
}
.nav-item a:hover
{
font-size: 25px;
}
</style>
<title>Spoiler</title>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<h1 style="color : red;">Spoiler</h1>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse" style="margin-left : 15px;">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" style="color : white;" href="http://spoiler.is-best.net/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" style="color : white;" href="post.php">Post</a>
</li>
<li class="nav-item">
<a class="nav-link" style="color : white;" href="about.php">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" method="POST" action="search.php">
<input class="form-control mr-sm-2" name="searchinput" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-danger my-2 my-sm-0" name="search" type="submit">Search</button>
</form>
</div>
</nav>
<div class="col-md-12" style="border: 1px solid red; margin-top: 100px">
<div class="row justify-content-center">
<div class="col-md-4" style="color : white;">
<h1 style="color : red">Spoiler</h1>
<h2 style="color : white">"Tell the story."</h2>
</br>
<h1>spoil·er</h1>
<h2>/ˈspoilər/</h2>
<h3>Noun</h3>
<h4>1. a person or thing that spoils something.</h4>
<h4>2. a description of an important plot development in a television show, movie, or book which if previously known may reduce surprise or suspense for a first-time viewer or reader.
</h4>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Aucun commentaire:
Enregistrer un commentaire