# Dynamic HTML using Bootstrap

**URL:** <https://swi-prolog.discourse.group/t/dynamic-html-using-bootstrap/2882>\
**Category:** General\
**Tags:** http\
**Created:** [September 6, 2020, 4:22pm UTC](https://swi-prolog.discourse.group/t/dynamic-html-using-bootstrap/2882 "2020-09-06T16:22:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alex](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@Alex](https://swi-prolog.discourse.group/u/Alex)\
**Post date:** [September 6, 2020, 4:22pm UTC](https://swi-prolog.discourse.group/t/dynamic-html-using-bootstrap/2882/1 "2020-09-06T16:22:51Z")

</div>

Hi. I want to use Bootstrap on every page of a website. The head and bottom will be fixed on all of them. Only the container inside the body will change on each page. Below is an example page:

```html
<!doctype html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link href="css/style.css" rel="stylesheet"/>
    <link href="fontawesome-free/css/all.css" rel="stylesheet"/>

    <title>Example</title>
  </head>
  <body>
  
    <div class="container">
      Each page will change this container. Everything else will be fixed.
    </div>
    
    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

```

How do I code this HTML page using http\_write?

---

<div class="post-metadata">

**Author:** ![Alex](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@Alex](https://swi-prolog.discourse.group/u/Alex)\
**Post date:** [September 6, 2020, 11:58pm UTC](https://swi-prolog.discourse.group/t/dynamic-html-using-bootstrap/2882/2 "2020-09-06T23:58:25Z")

</div>

I solved most of my problem. But, I still can’t change the language attribute

```html
<html lang="pt-br">

```

My solution so far is

file **base.pl**

```prolog
:- use_module(library(http/html_head)).
:- use_module(library(http/html_write)).

:- multifile
        user:body//2.

user:body(bootstrap, Body) -->
    html(body([ \html_post(head,
                           [ meta([name(viewport),
                                   content('width=device-width, initial-scale=1')])]),
                \html_requires(css('style.css')),
                \html_requires(bootstrap_css('bootstrap.min.css')),

                Body,

                script([src('bootstrap/js/bootstrap.bundle.min.js'),
                        type('text/javascript')],[])
              ])).

```

file **home.pl**

```prolog
:- use_module(library(http/html_head)).
:- use_module(library(http/html_write)).

:- http_handler(root(.), home, []).

home(_Req):-
    reply_html_page(
        bootstrap,
        [title('Example')],
        [ div(class(container),
             ['Each page will change this container. Everything else will be fixed.']).

```

file **load.pl**

```prolog
:- load_files([ server,
                base,
                home
              ],
	          [silent(true)]).

```

---

<div class="post-metadata">

**Author:** ![Ian](https://yyz2.discourse-cdn.com/free1/user_avatar/swi-prolog.discourse.group/ian/32/1026_2.png) [@Ian](https://swi-prolog.discourse.group/u/Ian)\
**Post date:** [September 7, 2020, 11:07am UTC](https://swi-prolog.discourse.group/t/dynamic-html-using-bootstrap/2882/3 "2020-09-07T11:07:59Z")

</div>

You can add:

```prolog
\html_root_attribute(lang,'pl-br')

```

to change the language.

---

<div class="post-metadata">

**Author:** ![Alex](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@Alex](https://swi-prolog.discourse.group/u/Alex)\
**Post date:** [September 7, 2020, 2:14pm UTC](https://swi-prolog.discourse.group/t/dynamic-html-using-bootstrap/2882/4 "2020-09-07T14:14:34Z")

</div>

Ian,  
Thanks for the tip.