Bootstrap441 ページ例

HTML

<html>
<head>
  <meta charset="utf-8">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="boot02.css" rel="stylesheet">
</head>

<body>
  <script src="js/jquery-3.4.1-slim.min.js"></script>
  <script src="js/bootstrap.bundle.min.js"></script>

<div class="container">

<header>
<p>header dayo</p>
  <img src="sample4.jpg" class="img-fluid">
</header>

<div class="row">

<main class="col-12 col-md-8">
<h3>これは動画です</h3>
<p>main dayo</p>
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b0hfspTEJmg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div> <!-- .youtube -->
</main>

<div id="sub" class="col-12 col-md-4">
<p>sub dayo</p>
<a class="twitter-timeline" data-height="500" href="https://twitter.com/hiromuse?ref_src=twsrc%5Etfw">Tweets by hiromuse</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div> <!-- sub -->

</div> <!-- row -->


<footer>
<p>©2020 Oresama</p>
</footer>

</div> <!-- container -->

</body>
</html>

CSS

header img {
  margin: 0 auto;
}

main {
  /* background-color: pink; */
  margin-top: 10px;
  margin-bottom: 10px;
}

#sub {
  /* background-color: #ddd; */
  border: 1px solid black;
  border-radius: 20px;
  /* margin: 5px; */
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 15px;
}

footer {
  text-align: center;
  border-top: 1px solid #333;
}

/* iframe を囲むボックス(親ボックス)に対する指定 */

.youtube {
  position : relative;
  width : 90%;
  padding-top : 50.625%;
}

/* iframe そのものに対する指定 */

.youtube iframe {
  position : absolute;
  top: 0;
  right: 0;
  width : 100%!important;
  height : 100%!important;
}