Final Touches

Let's make things a bit prettier. Since we use Boostrap, we will use ther layout system. First, we wrap everything inside a container.

<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. We'll simply add py-2 to each element and a py-4 to the container.

<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>

Our website should look like this: