Bootstrap container, grid rows width and a padding issue
Question
I'm creating my first bootstrap frontend, and I'm experiencing some issues which I'm not able to solve:
The row expanding to the whole width of the container, the max column width (12 units) will not extend to this width:
Further on, why is within the container writing over the padding:
Any hints appreciated!
I already tried to use container-fluid class, but the row seems not to get the max width.
Whole HTML:
<!DOCTYPE html>
<html>
<head>
<title>Snoo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Snoo!</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reddit!</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col_xl-12">
<div id="content">
<h1>Snoo!</h1>
<hr>
<h3>A chatbot based on a million reddit comments, quiet salty!</h3>
<button class="btn btn-primary btn-lg">Learn more!</button>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</html>
css:
#content {
text-align: center;
padding-top: 25%
}
3 answers
solution1
1 ACCPTED 2017-12-26 12:45:41
your class name wrong col_xl-12 to change class name col-xl-12
solution2
0 2017-12-26 12:47:43
I'm seeing a typo, try to change:
col_xl-12 to -> col-xl-12
solution3
-1 2017-12-26 12:55:42
- Remove container from your coding. Then the row will have full width
- your class should be
col-*-*, but you usedcol_xl-12
The HTML Structure Will be:
<div class="row">
<div class="/* Container or Container-fluid or Col-* */">
</div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.