> For the complete documentation index, see [llms.txt](https://bimwhale.gitbook.io/bim-whale/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bimwhale.gitbook.io/bim-whale/getting-started/advanced-example/final-touches.md).

# Final Touches

Let's make things a bit prettier. Since we use Boostrap, we will use ther [layout](https://getbootstrap.com/docs/4.5/layout/overview/) system. First, we wrap everything inside a container.

```markup
<div class="container">
    <h3>Advanced Example</h3>
    <!-- Input -->
    <select
        id="selectedEntitesInput"
        name="selectedEntites[]"
        multiple="multiple"
        style="width: 100%"
        required
    ></select>
    <input type="file" id="myIfcFile" onchange="myFunction()" />
    
    <!-- Table  -->
    <table class="table table-hover" id="ifcTable" width="100%"></table>
</div>
```

Then, let's add some [spacing](https://getbootstrap.com/docs/4.5/utilities/spacing/). We'll simply add `py-2` to each element and a `py-4` to the container.

```markup
<div class="container py-4">
    <h3 class="py-2">Advanced Example</h3>
    <!-- Input -->
    <select
        class="py-2"
        id="selectedEntitesInput"
        name="selectedEntites[]"
        multiple="multiple"
        style="width: 100%"
        required
    ></select>
    <input
        class="py-2"
        type="file"
        id="myIfcFile"
        onchange="myFunction()"
    />
    
    <!-- Table  -->
    <table
        class="py-2 table table-hover"
        id="ifcTable"
        width="100%"
    ></table>
</div>
```

{% hint style="success" %}
Our website should look like this:
{% endhint %}

![](https://2989416979-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MO6sUQ_bCqZKcDszv5G%2F-MOVMd6puMYtJqg0rd-8%2F-MOVMk6r512Y897Jzr5b%2Fimage.png?alt=media\&token=4474d005-0473-44ca-a491-3123da41b456)