<hr>が反映されません。bootstrap

前提・実現したいこと

プログラミング初心者です。

<hr>を反映したいです。現在bootstapチュートリアルに沿って学習を進めているのですが、<hr>が反映されなくて困っています。

以下が現状です。

以下のように水平線を入れたいです。

該当のソースコード

<!--- Welcome Section -->
<div class="container-fluid">
	<div class="row welcome text-center">
		<div class="col-12">
			<h1 class="display-4">Built with ease.</h1>
		</div>
		<hr>
		<div class="col-12">
			<p class="lead">Welcome to my Bootstrap 4 website tutorial! Bootstrap is a free and open-source front-end library with HTML and CSS based designs.</p>
		</div>
	</div>
</div>

以下に全てのコードを掲載します

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4	<meta charset="utf-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1">
6	<title>Complete Bootstrap 4 Website Layout</title>
7	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
8	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
9	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
10	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
11	<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
12	<link href="style.css" rel="stylesheet">
13</head>
14<body>
15
16<!-- Navigation -->
17<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
18<div class="container-fluid">
19	<a class="navbar-brand" href="#"><img src="img/logo.png"></a>
20	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
21		<span class="navbar-toggler-icon"></span>
22	</button>
23	<div class="collapse navbar-collapse" id="navbarResponsive">
24		<ul class="navbar-nav ml-auto">
25			<li class="nav-item active">
26				<a class="nav-link" href="#">Home</a>
27			</li> 
28			<li class="nav-item ">
29				<a class="nav-link" href="#">About</a>
30			</li> 
31			<li class="nav-item ">
32				<a class="nav-link" href="#">Services</a>
33			</li> 
34			<li class="nav-item ">
35				<a class="nav-link" href="#">Team</a>
36			</li> 
37			<li class="nav-item ">
38				<a class="nav-link" href="#">Connect</a>
39			</li> 
40		</ul>
41	</div>
42</div>
43	
44
45	</nav>
46<!--- Image Slider -->
47<div id="slides" class="carousel slide" data-ride="carousel">
48	<ul class="carousel-indicators">
49		<li data-target="#slides" data-slide-to="0" class="active"></li>
50		<li data-target="#slides" data-slide-to="1"></li>
51		<li data-target="#slides" data-slide-to="2"></li>
52	</ul>
53	<div class="carousel-inner">
54		<div class="carousel-item active">
55			<img src="img/background.png">
56			<div class="carousel-caption">
57				<h1 class="display-2">Bootstrap</h1>
58				<h3>Complete Website Layout</h3>
59				<button type="button" class="btn btn-outline-light btn-lg">VIEW DEMO</button>
60				<button type="button" class="btn btn-primary btn-lg">Get Started</button>
61			</div>
62		</div>
63		<div class="carousel-item">
64			<img src="img/background2.png">
65		</div>
66		<div class="carousel-item">
67			<img src="img/background3.png">
68		</div>
69	</div>
70</div>
71
72
73<!--- Jumbotron -->
74<div class="container-fluid">
75	<div class="row jumbotron">
76		<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
77			<p class="lead">A web hosting service allows individuals and organizations to make their website accessible wia the World Wide Web.</p>
78		</div>
79		<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
80			<a href="#"><button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button></a>
81		</div>
82	</div>
83</div>
84
85<!--- Welcome Section -->
86<div class="container-fluid">
87	<div class="row welcome text-center">
88		<div class="col-12">
89			<h1 class="display-4">Built with ease.</h1>
90		</div>
91		<hr>
92		<div class="col-12">
93			<p class="lead">Welcome to my Bootstrap 4 website tutorial! Bootstrap is a free and open-source front-end library with HTML and CSS based designs.</p>
94		</div>
95	</div>
96</div>
97
98
99</body>
100</html>
101
102
103 <!--- Check out w3newbie Templates & Courses! -->
104<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
105 <div style="float:left; max-width: 48%; margin: .5rem; padding: 0; border: .5rem solid #666;">
106 	<a href="https://w3newbie.com/templates/" target="_blank" style="z-index: 100; cursor: pointer!important;"><img src="https://www.w3newbie.com/wp-content/uploads/w3newbie-templates-zip.png" style="max-width: 100%; min-width: 100%;"></a>
107</div>
108 <div style="float:left; max-width: 48%; margin: .5rem; padding: 0; border: .5rem solid #666;">
109 	<a href="https://w3newbie.com/courses/" target="_blank" style="z-index: 100; cursor: pointer!important;"><img src="https://www.w3newbie.com/wp-content/uploads/w3newbie-courses-zip.png" style="max-width: 100%; min-width: 100%;"></a>
110</div>
111<br style="clear: both;">
112<div style="max-width: 52%; margin: 2rem auto; padding: 0; border: .5rem solid #666;">
113 	<a href="https://w3newbie.com/hosting/" target="_blank" style="z-index: 100; cursor: pointer!important;"><img src="https://www.w3newbie.com/wp-content/uploads/web-hosting-zip.jpg" style="max-width: 100%; min-width: 100%;"></a>
114</div> -->
115 <!--- Check out w3newbie Templates & Courses! -->
116
117
118

css
1@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
2
3
4
5/*---Media Queries --*/
6@media (max-width: 992px) {
7
8  }
9@media (max-width: 768px) {
10  
11}
12@media (max-width: 576px) {
13  
14}
15
16
17/*---Firefox Bug Fix --*/
18.carousel-item {
19  transition: -webkit-transform 0.5s ease;
20  transition: transform 0.5s ease;
21  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
22  -webkit-backface-visibility: visible;
23  backface-visibility: visible;
24}
25/*--- Fixed Background Image --*/
26figure {
27  position: relative;
28  width: 100%;
29  height: 60%;
30  margin: 0!important;
31}
32.fixed-wrap {
33  clip: rect(0, auto, auto, 0);
34  position: absolute;
35  top: 0;
36  left: 0;
37  width: 100%;
38  height: 100%;
39}
40#fixed {
41  background-image: url('img/mac.png');
42  position: fixed;
43  display: block;
44  top: 0;
45  left: 0;
46  width: 100%;
47  height: 100%;
48  background-size: cover;
49  background-position: center center;
50  -webkit-transform: translateZ(0);
51          transform: translateZ(0);
52  will-change: transform;
53}
54/*--- Bootstrap Padding Fix --*/
55[class*="col-"] {
56    padding: 1rem;
57}
58
59
60/*
61Extra small (xs) devices (portrait phones, less than 576px)
62No media query since this is the default in Bootstrap
63
64Small (sm) devices (landscape phones, 576px and up)
65@media (min-width: 576px) { ... }
66
67Medium (md) devices (tablets, 768px and up)
68@media (min-width: 768px) { ... }
69
70Large (lg) devices (desktops, 992px and up)
71@media (min-width: 992px) { ... }
72
73Extra (xl) large devices (large desktops, 1200px and up)
74@media (min-width: 1200px) { ... }
75*/
76
77
78
79/*---Media Queries --*/
80@media (max-width: 992px) {
81
82  }
83@media (max-width: 768px) {
84  
85}
86@media (max-width: 576px) {
87  
88}
89
90
91/*---Firefox Bug Fix --*/
92.carousel-item {
93  transition: -webkit-transform 0.5s ease;
94  transition: transform 0.5s ease;
95  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
96  -webkit-backface-visibility: visible;
97  backface-visibility: visible;
98}
99/*--- Fixed Background Image --*/
100figure {
101  position: relative;
102  width: 100%;
103  height: 60%;
104  margin: 0!important;
105}
106.fixed-wrap {
107  clip: rect(0, auto, auto, 0);
108  position: absolute;
109  top: 0;
110  left: 0;
111  width: 100%;
112  height: 100%;
113}
114#fixed {
115  background-image: url('img/mac.png');
116  position: fixed;
117  display: block;
118  top: 0;
119  left: 0;
120  width: 100%;
121  height: 100%;
122  background-size: cover;
123  background-position: center center;
124  -webkit-transform: translateZ(0);
125          transform: translateZ(0);
126  will-change: transform;
127}
128/*--- Bootstrap Padding Fix --*/
129[class*="col-"] {
130    padding: 1rem;
131}
132
133
134/*
135Extra small (xs) devices (portrait phones, less than 576px)
136No media query since this is the default in Bootstrap
137
138Small (sm) devices (landscape phones, 576px and up)
139@media (min-width: 576px) { ... }
140
141Medium (md) devices (tablets, 768px and up)
142@media (min-width: 768px) { ... }
143
144Large (lg) devices (desktops, 992px and up)
145@media (min-width: 992px) { ... }
146
147Extra (xl) large devices (large desktops, 1200px and up)
148@media (min-width: 1200px) { ... }
149*/
150
151
152
153
154
155
156
157
158

補足情報（FW/ツールのバージョンなど）

初歩的なミスかと思いますが、よろしくお願いいたします。

行動規範の内容に同意します

回答2件

手元で試したのですが、<div class="row">を分割するか、<div class="col">を追加するかすると表示できました。

HTML
1<div class="container-fluid">
2    <div class="row welcome text-center">
3        <div class="col-12">
4            <h1 class="display-4">Built with ease.</h1>
5        </div>
6    </div>
7    <hr>
8    <div class="row welcome text-center">
9        <div class="col-12">
10            <p class="lead">Welcome to my Bootstrap 4 website tutorial! Bootstrap is a free and open-source front-end library with HTML and CSS based designs.</p>
11        </div>
12    </div>
13</div>

もしくは

HTML
1<div class="container-fluid">
2    <div class="row welcome text-center">
3        <div class="col-12">
4            <h1 class="display-4">Built with ease.</h1>
5        </div>
6        <div class="col-12">
7            <hr>
8        </div>
9        <div class="col-12">
10            <p class="lead">Welcome to my Bootstrap 4 website tutorial! Bootstrap is a free and open-source front-end library with HTML and CSS based designs.</p>
11        </div>
12    </div>
13</div>

<div class="row">の子要素は<div class="col">だけにしたほうが無難そうです。

投稿2020/03/18 04:37

new1ro

総合スコア4528

ベストアンサー

似たような質問を見つけましたので、参考にしていただければと思います。

リンク内容
 https://teratail.com/questions/224963

以下引用です

おそらく置く場所だと思います。
ドキュメントだとGrid systemあたりですが、row～colの流れって１つのシステムみたいな形になっていて、そのシステム外に置くと無効化されるようなイメージがあります。
brとかは効くみたいですが、<p></p>は何個置いてもheightは０になりました。

もし、「Built with ease.の文字に下線を置きたい」のでしたら、h1のborder-bottomに線を設置するか、その下のコンテンツ部分のborder-topに線を設置した方が良いかと思います。

投稿2020/03/18 04:39