Untitled

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
    crossorigin="anonymous">

  <title>Intro</title>
</head>

<body>
  <header>
  <div class="container">
    <!-- START HERE -->

    <br>
    <br>

    <!-- ALIGNMENT -->
    <p>Text aligned left</p>
    <p>Text aligned center</p>
    <p>Text aligned right</p>

    <!-- RESPONSIVE ALIGN -->
    <p>Right aligned on small or larger</p>
    <p>Right aligned on medium or larger</p>
    <p>Right aligned on large or larger</p>
    <p>Right aligned on xl or larger</p>

    <p>Left aligned text on small or larger</p>
    <p>Left aligned text on medium or larger</p>
    <p>Left aligned text on large or wider</p>
    <p>Left aligned text on extra large or wider</p>

    <p>Center aligned text on small or larger</p>
    <p>Center aligned text on medium or larger</p>
    <p>Center aligned text on large or wider</p>
    <p>Center aligned text on extra large or wider</p>

    <br>
    <br>

    <!-- TURN BLOCK TO INLINE -->
    <h1>Hello</h1>
    <h1>World</h1>

    <br>
    <br>

    <!-- TURN INLINE TO BLOCK -->
    <span>Block</span>

    <br>
    <br>

    <!-- FLOATS -->
    <!-- RESPONSIVE FLOATS -->
    <div>Float left</div>
    <br>
    <div>Float right</div>
    <br>
    <div>Float none</div>
    <br>

    <div>Float right on small or wider</div>
    <br>
    <div>Float right on medium or wider</div>
    <br>
    <div>Float right on large or wider</div>
    <br>
    <div>Float right on extra large or wider</div>
    <br>

    <div>Float left on small or wider</div>
    <br>
    <div>Float left on medium or wider</div>
    <br>
    <div>Float left on large or wider</div>
    <br>
    <div>Float left on extra large or wider</div>
    <br>

    <div>Float none on small or wider</div>
    <br>
    <div>Float none on medium or wider</div>
    <br>
    <div>Float none on large or wider</div>
    <br>
    <div>Float none on extra large or wider</div>

    <br>
    <br>

    <!-- CLEARFIX -->
    <div>
        <button>Float Left</button>
        <button>Float Right</button>
    </div>

    <!-- MAKE ITALIC -->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae iure natus, fuga provident molestias, voluptates molestiae
      aperiam sit dicta a assumenda nesciunt quos adipisci reprehenderit animi ipsum unde quasi nobis veniam, modi.
      Fuga natus harum, maxime corporis rerum, maiores delectus aliquam aut quo incidunt dignissimos temporibus? Vitae
      dolorem accusamus voluptatibus illo aut nam praesentium obcaecati quaerat cupiditate distinctio tempora eius
      esse fuga, repellat fugit harum quia nihil sit in debitis expedita. Eos, voluptates eum rem voluptatum tempore
      accusamus soluta enim, animi in voluptatibus aliquam distinctio totam repudiandae necessitatibus quidem consequatur
      incidunt aliquid ad! Inventore ratione, consequatur eligendi iusto esse iure officia praesentium magni in! Nemo
      tempora, voluptatem facilis reprehenderit minima reiciendis alias similique est rem debitis id expedita voluptatum
      porro fugiat magni inventore neque. </p>


    <!-- TEXT COLORS -->
    <p>Text Primary Color</p>
    <p>Text Secondary Color</p>
    <p>Text Success Color</p>
    <p>Text Info Color</p>
    <p>Text Warning Color</p>
    <p>Text Danger Color</p>
    <p>Text Light Color</p>
    <p>Text Dark Color</p>
    <p>Text White Color</p>
    <p>Text Muted</p>
    <p>Text Black 50</p>
    <p>Text White 50</p>

    <!-- LINK COLORS -->
    <p>
      <a href="#">Primary link</a>
    </p>
    <p>
      <a href="#">Secondary link</a>
    </p>
    <p>
      <a href="#">Success link</a>
    </p>
    <p>
      <a href="#">Info link</a>
    </p>
    <p>
      <a href="#">Warning link</a>
    </p>
    <p>
      <a href="#">Danger link</a>
    </p>
    <p>
      <a href="#">Light link</a>
    </p>
    <p>
      <a href="#">Dark link</a>
    </p>
    <p>
      <a href="#">Muted link</a>
    </p>
    <p>
      <a href="#">White link</a>
    </p>

    <br>
    <br>

    <!-- BACKGROUND COLORS -->
    <div>Background Primary Color</div>
    <div>Background Secondary Color</div>
    <div>Background Success Color</div>
    <div>Background Info Color</div>
    <div>Background Warning Color</div>
    <div>Background Danger Color</div>
    <div>Background Light Color</div>
    <div>Background Dark Color</div>
    <div>Background White Color</div>
    <div>Background Transparent</div>

  <!-- FIXED TOP -->
  <h3>Fixed Top</h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae iure natus, fuga provident molestias, voluptates molestiae
      aperiam sit dicta a assumenda nesciunt quos adipisci reprehenderit animi ipsum unde quasi nobis veniam, modi.
      Fuga natus harum, maxime corporis rerum, maiores delectus aliquam aut quo incidunt dignissimos temporibus? Vitae
      dolorem accusamus voluptatibus illo aut nam praesentium obcaecati quaerat cupiditate distinctio tempora eius
      esse fuga, repellat fugit harum quia nihil sit in debitis expedita. Eos, voluptates eum rem voluptatum tempore
      accusamus soluta enim, animi in voluptatibus aliquam distinctio totam repudiandae necessitatibus quidem consequatur
      incidunt aliquid ad! Inventore ratione, consequatur eligendi iusto esse iure officia praesentium magni in! Nemo
      tempora, voluptatem facilis reprehenderit minima reiciendis alias similique est rem debitis id expedita voluptatum
      porro fugiat magni inventore neque. </p>

  <!-- FIXED STICKY -->
  <h3>Sticky</h3>

  <p>Est molestias sunt quae quibusdam sequi odit, iusto expedita tempore aspernatur ipsum, necessitatibus rerum debitis,
      harum, voluptatibus dolorem. Reprehenderit ex aperiam tempore. Cumque ut iste ullam non pariatur, qui architecto,
      commodi illo praesentium debitis similique, molestiae harum distinctio inventore incidunt enim atque repudiandae
      eius molestias exercitationem tempore odio dignissimos iusto officia. Libero quasi dicta quos est eveniet magni
      deserunt aut vero id ad, incidunt nostrum provident tempora modi placeat voluptatem, quod excepturi ipsam aspernatur
      necessitatibus molestias possimus veritatis sequi. Minus ducimus maiores debitis, nulla magni eum ratione numquam
      deleniti sunt et dolorum necessitatibus cumque fugit libero recusandae impedit, quaerat, nemo. Vel temporibus
      amet alias mollitia aspernatur error sint, doloremque, porro blanditiis quia atque ratione reiciendis, praesentium
      sed doloribus excepturi. Eius tenetur quis veniam enim atque fugit, a itaque dignissimos iusto, tempore fugiat
      minima libero quasi exercitationem corrupti nam sequi, doloremque quae repudiandae quisquam iure nisi totam consectetur.
      Corrupti corporis doloribus dolore iusto perspiciatis ipsum, enim sapiente nobis ullam delectus aperiam eaque
      harum sequi porro! Reprehenderit hic dolores repellat deleniti, illo nostrum nam at odio quasi quis eaque asperiores
      culpa doloremque ad velit ullam ratione omnis quae adipisci autem necessitatibus. Quod nam non maiores assumenda
      quae eius nobis cum suscipit, optio aliquid beatae modi tempora delectus voluptatibus debitis earum natus amet
      libero itaque quasi expedita, maxime repudiandae! Repudiandae sunt similique eum, provident deserunt vitae. Maxime
      nostrum, nemo quia eius rerum quas recusandae. Molestiae ullam dignissimos illo eum necessitatibus culpa ea,
      distinctio maiores molestias aliquam, eligendi soluta cumque odio quaerat cupiditate similique in accusamus dolorum
      nobis. Ea, rem fugit. Minima quae magni laboriosam possimus corporis quidem recusandae aspernatur dignissimos
      accusamus adipisci, maiores, tenetur excepturi doloremque eum consequuntur? Expedita possimus sit, vel neque
      fugiat quo ab? Quaerat alias, molestias rerum repudiandae, iste, voluptatem consequatur ex enim tenetur quidem
      expedita, provident vel reiciendis. Ea ipsam suscipit ex ab nulla est, aspernatur nesciunt consequatur cumque
      laudantium. Unde ab earum eius vero obcaecati reiciendis omnis quod culpa harum, modi, possimus molestiae voluptatibus
      beatae, minima ad accusamus quibusdam! Dolor nostrum impedit culpa nemo expedita, numquam dignissimos totam ex
      reprehenderit consectetur neque dicta deserunt, recusandae porro ipsa accusamus maxime soluta eum facilis temporibus
      nesciunt accusantium. Placeat provident facere blanditiis doloremque eos tempora officia doloribus deserunt molestias
      voluptates velit hic, tenetur cupiditate ab. Hic, unde!</p>

  <!-- FIXED BOTTOM -->
  <h3>Fixed Bottom</h3>

  <!-- MB MARGIN BOTTOM -->
  <h1 class="bg-success">Margin Bottom 0</h1>
  <h1 class="bg-success">Margin Bottom 1</h1>
  <h1 class="bg-success">Margin Bottom 2</h1>
  <h1 class="bg-success">Margin Bottom 3</h1>
  <h1 class="bg-success">Margin Bottom 4</h1>
  <h1 class="bg-success">Margin Bottom 5</h1>

  <br>
  <br>

  <!-- MT MARGIN TOP -->
  <h1 class="bg-success">Margin Top 0</h1>
  <h1 class="bg-success">Margin Top 1</h1>
  <h1 class="bg-success">Margin Top 2</h1>
  <h1 class="bg-success">Margin Top 3</h1>
  <h1 class="bg-success">Margin Top 4</h1>
  <h1 class="bg-success">Margin Top 5</h1>

  <br>
  <br>

  <!-- ML & MR -->
  <p>
      <span class="bg-success">Margin Right 5</span> dolor sit amet,
      <span class="bg-success">Margin Left 3 </span> elit. Voluptatum, optio.</p>

  <br>
  <br>

  <!-- MX MARGIN LEFT RIGHT -->
  <p>Lorem ipsum
      <span class="bg-success">Margin Left & Right 5</span>, consectetur elit. Voluptatum, optio.</p>

  <br>
  <br>

  <!-- MY  MARGIN TOP BOTTOM -->
  <p>Lorem ipsum dolor sit amet, consectetur elit. Voluptatum, optio.</p>
  <p class="bg-success">Margin Top & Bottom 5</p>
  <p>Lorem ipsum dolor sit amet, consectetur elit. Voluptatum, optio.</p>

  <br>
  <br>

  <!-- BLANK - ALL SIDES -->
  <p>Lorem ipsum dolor sit amet, consectetur elit. Voluptatum, optio.</p>
  <p class="bg-success">Margin All Sides 5</p>
  <p>Lorem ipsum dolor sit amet, consectetur elit. Voluptatum, optio.</p>

  <br>
  <br>

  <!-- PB PADDING BOTTOM -->
  <h1 class="bg-warning">Padding Bottom 0</h1>
  <h1 class="bg-warning">Padding Bottom 1</h1>
  <h1 class="bg-warning">Padding Bottom 2</h1>
  <h1 class="bg-warning">Padding Bottom 3</h1>
  <h1 class="bg-warning">Padding Bottom 4</h1>
  <h1 class="bg-warning">Padding Bottom 5</h1>

  <br>
  <br>

  <!-- PT PADDING TOP -->
  <h1 class="bg-warning">Padding Top 0</h1>
  <h1 class="bg-warning">Padding Top 1</h1>
  <h1 class="bg-warning">Padding Top 2</h1>
  <h1 class="bg-warning">Padding Top 3</h1>
  <h1 class="bg-warning">Padding Top 4</h1>
  <h1 class="bg-warning">Padding Top 5</h1>

  <br>
  <br>

  <!-- PL & PR -->
  <p>
      <span class="bg-warning">Padding Right 5</span> dolor sit amet,
      <span class="bg-warning">Padding Left 3 </span> elit. Voluptatum, optio.</p>
  <br>
  <br>

  <!-- PX PADDING LEFT RIGHT -->
  <p>Lorem ipsum
      <span class="bg-warning">Padding Left & Right 5</span>, consectetur elit. Voluptatum, optio.
  </p>

  <br>
  <br>

  <!-- PY  PADDING TOP BOTTOM -->
  <p class="bg-warning">Padding Top & Bottom 5</p>

  <br>
  <br>

  <!-- ALL SIDES -->
  <p class="bg-warning">Padding All Sides 5</p>

  <!-- HORIZONTAL CENTERING - mx-auto -->
  <div class="bg-info" style="width: 200px;">
      Horizontal Centering
  </div>


  <!-- BUTTONS -->
  <button type="button">Primary</button>
  <button type="button">Secondary</button>

  <br>
  <br>

  <!-- BUTTON OUTLINES -->
  <button type="button" class="btn btn-outline-primary">Primary Outline</button>
  <button type="button">Secondary Outline</button>

</div>

  <div style="margin-top:500px;"></div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
    crossorigin="anonymous"></script>
</body>

</html>