search

software-tools-books / js4ds

JavaScript for Data Science
https://third-bit.com/js4ds/
Other
185 stars 31 forks source link

Bootstrap HTML page doesn't render properly #207

Open karchern opened 4 years ago

karchern commented 4 years ago

Hi guys, thanks a lot for the book, it's great!

On my machine, the html snippet illustrating bootstrap (using bootstrap.min.css, https://js4ds.org/#s:htmlcss-bootstrap) doesn't render properly when I copy the snippet as-is into an .html file and open it using google chrome. 

<html>
  <head>
    <link rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/\
                4.1.3/css/bootstrap.min.css">
    <style>
      div {
        border: solid 1px;
      }
    </style>
  </head>
  <body>

    <div class="jumbotron text-center">
      <h1>Page Title</h1>
      <p>Resize this page to see the layout adjust dynamically.</p>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-sm-4">
          <h2>First column is 4 wide</h2>
          <p>Text here goes</p>
          <p>in the column</p>
        </div>
        <div class="col-sm-8">
          <h2>Second column is 8 wide</h2>
          <p>Text over here goes</p>
          <p>in the other column</p>
        </div>
      </div>
    </div>

  </body>
</html>

I think this is due to a backslash in the href argument, as the snippet without the backslash renders properly:

<html>
  <head>
    <link rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <style>
      div {
        border: solid 1px;
      }
    </style>
  </head>
  <body>

    <div class="jumbotron text-center">
      <h1>Page Title</h1>
      <p>Resize this page to see the layout adjust dynamically.</p>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-sm-4">
          <h2>First column is 4 wide</h2>
          <p>Text here goes</p>
          <p>in the column</p>
        </div>
        <div class="col-sm-8">
          <h2>Second column is 8 wide</h2>
          <p>Text over here goes</p>
          <p>in the other column</p>
        </div>
      </div>
    </div>

  </body>
</html>
karchern commented 4 years ago

Also, it might actually be a good idea to also have a screenshot of a properly rendered page alongside this snippet in the book?