Connecting Bootstrap

Now let's edit the file by adding a title tag and style link.

<head>
  <title>Art Catalog</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"/>
</head>

Note that this should be added after the opening <html> tag.

This code will connect the CSS framework Bootstrap, which simplifies the creation of styles.

You can use your own framework or write styles manually. For the sake of brevity in this example, we are using Bootstrap.

Now let's modify the code by adding a container and a search field inside the <body> tag. The final code should look like this:

import {jsx} from '@app/html-jsx'

app.html('/', async(ctx,req) => {
  return <html>
    <head>
      <title>Art Catalog</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"/>
    </head>
    <body>
      <div class="container p-3 col-md-6 col-12">
        <h1 class={"fs-1 fs-header fs-bold"}>Art Catalog</h1>
      </div>
    </body>
  </html>
})

Save and see what you have in the right window.

Connecting Bootstrap

Next step: Creating a data table