Bootstrap　練習中

公式サイト：https://getbootstrap.jp/docs/4.5/getting-started/introduction/
チートシート：https://hackerthemes.com/bootstrap-cheatsheet/

Bootstrap が用意しているスタイルですが、 Utilities で紹介されているスタイルは、特に important という指定が効いていて、他のクラスで**上書きできなくなっている**点に注意しておきましょう。

```html
<!doctype html>
<html lang="ja">
  <head>
    <title>Hello, world!</title>
    <!-- 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

    <style>
      .box-container {
        width: 100px;
        height: 100px;
        background: #ddd;
        margin-bottom: 5px;
      }
    </style>
  </head>
  <body>


    <!--
    [p|m][location]-[size]

    location:
    - t, b, l, r
    - x, y

    size:
    - 0
    - 1: 0.25rem
    - 2: 0.5rem
    - 3: 1.0rem
    - 4: 1.5rem
    - 5: 3.0rem
    - auto
    -->

    <div class="box-container">
      <div class="bg-primary w-25 h-50 pt-3">BOX</div>
    </div>

    <div class="box-container">
      <div class="bg-success w-75 h-100 my-0 mx-auto">BOX</div>
    </div>




    <div class="box-container">
      <div class="bg-primary w-25 h-50">BOX</div>
    </div>

    <div class="box-container">
      <div class="bg-success w-75 h-100">BOX</div>
    </div>


    <button class="btn btn-primary">OK</button>
    <button class="btn btn-info btn-sm">OK</button>
    <button class="btn btn-danger btn-lg">OK</button>


  

    <h2 class="font-weight-normal display-4">Hello Bootstrap</h2>
    <div class="text-center bg-primary">BOX</div>
    <div class="text-right bg-success text-warning">BOX</div>
    <div class="text-center bg-info font-weight-bold">BOX</div>
    <div class="text-center bg-dark text-light">BOX</div>



    <div class="container">
      <div class="row">
        <div class="col bg-primary">1</div>
        <div class="col bg-secondary">2</div>
        <div class="col bg-info">3</div>
      </div>
      <div class="row mb-3">
        <div class="col bg-danger">1</div>
        <div class="col bg-warning">2</div>
        <div class="col bg-dark">3</div>
      </div>
      <div class="row">
        <div class="col-8 bg-primary">1</div>
        <div class="col-4 bg-secondary">2</div>
      </div>
      <div class="row mb-3">
        <div class="col-4 bg-danger">1</div>
        <div class="col-6 bg-warning">2</div>
        <div class="col-2 bg-dark">3</div>
      </div>
      <div class="row">
        <div class="col-8 bg-primary">1</div>
        <div class="col-1 bg-secondary">2</div>
      </div>
      <div class="row mb-3">
        <div class="col-4 bg-danger">1</div>
        <div class="col-6 bg-warning">2</div>
        <div class="col-6 bg-dark">3</div>
      </div>
    </div>


<!--ブレイクポイント
    576px and up: sm
    768px and up: md
    992px and up: lg
    1200px and up: xl
    -->

    <div class="container">
      <div class="row">
        <div class="col-10 bg-primary">1</div>
        <div class="col-2 bg-secondary">2</div>
      </div>
      <div class="row">
        <div class="col-10 col-md-2 bg-primary">1</div>
        <div class="col-2 col-md-10 bg-secondary">2</div>
      </div>
      <div class="row">
        <div class="col-10 bg-primary">1</div>
        <div class="col-2 d-md-none bg-secondary">2</div>
      </div>
      <div class="row">
        <div class="col-10 bg-primary">1</div>
        <div class="d-none d-md-block col-md-2 bg-secondary">2</div>
      </div>
    </div>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>
  </body>
</html>
```




















```html

<!doctype html>
<html lang="ja">
  <head>
    <title>Dotinstall App</title>
    <!-- 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

    <style>
      .cover {
        background: url(img/bg.png);
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="alert alert-info text-center mb-0 rounded-0 alert-dismissible fade show">
        News! News! News! News! News!
        <button class="close" data-dismiss="alert">
          &times;
        </button>
      </div>
      <div class="container">
        <nav class="navbar navbar-expand-sm navbar-light">
          <a href="" class="navbar-brand">Logo</a>
          <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div id="menu" class="collapse navbar-collapse">
            <ul class="navbar-nav">
              <li class="nav-item"><a href="" class="nav-link">Link</a></li>
              <li class="nav-item"><a href="" class="nav-link">Link</a></li>
              <li class="nav-item"><a href="" class="nav-link">Link</a></li>
            </ul>
          </div>
        </nav>
      </div>

      <div class="cover text-white text-center py-5">
        <h1 class="display-4 mb-4">Dotinstall App</h1>
        <a href="" class="btn btn-primary btn-lg">Get It Now!</a>
      </div>
    </header>
    <main>
      <section class="py-5">
        <h2 class="text-center mb-5">Features</h2>
        <div class="container">
          <div class="mb-5 row">
            <div class="col-sm-8">
              <h3>Awesome</h3>
              <p>Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello.</p>
            </div>
            <div class="col-sm-4">
              <img src="img/phone.png" class="w-100 rounded-circle">
            </div>
          </div>
          <div class="row">
            <div class="col-sm-8 order-sm-2">
              <h3>Awesome</h3>
              <p>Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello.</p>
            </div>
            <div class="col-sm-4 order-sm-1">
              <img src="img/movie.png" class="w-100 rounded-circle">
            </div>
          </div>
        </div>
      </section>

      <section class="bg-light text-center py-5">
        <h2 class="mb-5">Plans</h2>
        <div class="container">
          <table class="table table-hover">
            <thead>
              <tr><th>Plan A</th><th>Plan B</th></tr>
            </thead>
            <tbody>
              <tr><td>AA</td><td>BB</td></tr>
              <tr><td>AAA</td><td>BBB</td></tr>
              <tr><td>AAAA</td><td>BBBB</td></tr>
            </tbody>
          </table>
        </div>
      </section>

      <section class="py-5">
        <h2 class="mb-5 text-center">How to use</h2>
        <div class="container">
          <ul class="nav nav-tabs">
            <li class="nav-item"><a href="#ios" class="nav-link active" data-toggle="tab">iOS</a></li>
            <li class="nav-item"><a href="#android" class="nav-link" data-toggle="tab">Android</a></li>
          </ul>
          <div class="tab-content py-4">
            <div id="ios" class="tab-pane active">
              <p>Hello iOS. Hello iOS. <span class="font-weight-bold text-info" data-toggle="tooltip" title="This is awesome" data-placement="bottom">Hello iOS. Hello iOS.</span> Hello iOS. Hello iOS. Hello iOS. Hello iOS. Hello iOS.</p>
            </div>
            <div id="android" class="tab-pane">
              <p>Hello Android. Hello Android. Hello Android. Hello Android. Hello Android. Hello Android. Hello Android. Hello Android. Hello Android.</p>
            </div>
          </div>
        </div>
      </section>

      <section class="bg-light text-center py-5">
        <a href="" class="btn btn-primary btn-lg">Get It Now!</a>
      </section>
    </main>
    <footer class="text-center text-muted py-4">
      Copyright YYYY dotinstall.com
    </footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>
    <script>
      $(function() {
        'use strict';
        $('[data-toggle="tooltip"]').tooltip();
      });
    </script>
  </body>
</html>
```




デモ：http://samples.dotinstall.com/s/basic_twitter_bootstrap_v5/43022/MyBootstrap/index.html