Div is unexpectedly shorter than page width when using bootstrap
Question
I am trying to get the h1 heading "Title" to align in the center of the page, but for some reason the div is not as wide as the page itself. I am using Bootstrap css and Angular. Why isnt the blue div named maincontent the entire page width?
<!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">
<meta name="description" content="">
<meta name="author" content="">
</head>
<body id="page-top">
<!-- Header -->
<div id="maincontent">
<h1 class="name text-center" style="align-content:center">Title</h1>
<hr class="star-light text-center">
<span class="skills">x -- x -- x</span>
</div>
.....
Bootstrap was imported by adding it to angular.json:
"styles": [
"src/my-theme.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"src/app/dragndrop/dragndrop.js"
]
1 answers
solution1
0 ACCPTED 2019-07-10 18:29:58
The problem must be in some other part of your CSS. When I test your html on a clean bootstrap CDN it works just fine, The title is centered. Take the snippet below and start from there. Add one other stylesheet at a time and identify and fix which is causing the div to not be full width.
<!DOCTYPE html>
<html>
<head runat="server">
<title>Test</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div>
<h1 class="name text-center">Title</h1>
<hr class="star-light text-center">
<span class="skills">x -- x -- x</span>
</div>
</body>
</html>
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.