Bootstrap

To get started with Bootstrap, just start a .html file in your text editor, and in the <head> section add this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Then you can start to use blocks for Bootstrap layout in the body, such as container, row, and col.

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-5">
      </div>
      <div class="col-md-7">
      </div>
    </div>
  </div>
</body>

Then you can fill in those col blocks with content. In this example, the columns have a ratio of 5/12 of the page for the left column and 7/12 for the right column.

Here is the complete HTML from the demonstration in class, and you can also see a live version of the page

<html>
  <head>
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossorigin="anonymous">
  </head>
  <body>
    <div class="container" style="">
      <div class="row">
        <div class="col-sm-5">
          <h1>Article one</h1>
          <img class="img-fluid img-thumbnail" src="cats-animals-kittens-background-us.jpg">

          <p>
          Aliquam erat volutpat. Nunc eleifend leo vitae magna. In id
          erat non orci commodo lobortis. Proin neque massa, cursus
          ut, gravida ut, lobortis eget, lacus. Sed diam. Praesent
          fermentum tempor tellus. Nullam tempus. Mauris ac felis vel
          velit tristique imperdiet. Donec at pede. Etiam vel neque
          nec dui dignissim bibendum. Vivamus id enim. Phasellus neque
          orci, porta a, aliquet quis, semper a, massa. Phasellus
          purus. Pellentesque tristique imperdiet tortor. Nam euismod
          tellus id erat.
          </p>
        </div>
        <div class="col-sm-7">
          <h1>Article 2</h1>
          Pellentesque dapibus suscipit ligula. Donec posuere augue in
          quam. Etiam vel tortor sodales tellus ultricies commodo.
          Suspendisse potenti. Aenean in sem ac leo mollis blandit.
          Donec neque quam, dignissim in, mollis nec, sagittis eu,
          wisi. Phasellus lacus. Etiam laoreet quam sed arcu.
          Phasellus at dui in ligula mollis ultricies. Integer
          placerat tristique nisl. Praesent augue. Fusce commodo.
          Vestibulum convallis, lorem a tempus semper, dui dui euismod
          elit, vitae placerat urna tortor vitae lacus. Nullam libero
          mauris, consequat quis, varius et, dictum id, arcu. Mauris
          mollis tincidunt felis. Aliquam feugiat tellus ut neque.
          Nulla facilisis, risus a rhoncus fermentum, tellus tellus
          lacinia purus, et dictum nunc justo sit amet elit.

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

      <div class="row" style="margin-top: 3ex; padding-top: 3ex; background-color: #eee">
        <div class="col-sm-3">
          One<br>
          Two<br>
          Three<br>
        </div>
        <div class="col-sm-3">
          Four<br>
          Five<br>
          Six<br>
        </div>
        <div class="col-sm-3">
          Seven<br>
          Eight<br>
          Nine<br>
          Ten<br>
        </div>
        <div class="col-sm-3">
          Eleven<br>
          Twelve<br>
        </div>
      </div> <!-- row -->


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

  </body>
</html>
PDF