Bootstrap - lezione 1

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- -------------------------------------------------------------------------------------- -->

    <!-- Bootstrap CSS v5.3.0 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
  crossorigin="anonymous">

    <title>Con Bootstrap</title>

    <style>

    </style>
  </head>

  <body>

  <div data-bs-theme="light">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-transparent">Transparent</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
  </div>

  <br><br>

    <button type="button" class="btn btn-outline-primary">Primary</button>
    <button type="button" class="btn btn-outline-secondary">Secondary</button>
    <button type="button" class="btn btn-outline-success">Success</button>
    <button type="button" class="btn btn-outline-transparent">Transparent</button>
    <button type="button" class="btn btn-outline-danger">Danger</button>
    <button type="button" class="btn bg-primary border-danger text-success">Warning</button>
    <button type="button" class="btn btn-outline-info">Info</button>
    <button type="button" class="btn btn-outline-light">Light</button>
    <button type="button" class="btn btn-outline-dark">Dark</button>

    <br><br>

    <button type="button" class="btn btn-link">Link</button>

    <br><br>

    <!--
      bg-xxxx = background
      border-xxxx = bordi
      text-xxxx = colore testo
    -->

    <h1 style="max-width: 300px;" class="bg-body-secondary text-primary
               border-danger border
               border-top-0 border-bottom-0">
      Hello World
    </h1>

    <small>piccolo hello world</small>

    <div class="text-bg-danger">
      NOTARE ANCHE IL RESET DEI CSS (ad esempio azzeramento margini)
    </div>


   <!-- Bootstrap JavaScript Libraries -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
          crossorigin="anonymous"></script>
  </body>
</html>