Migrating Containers from Semantic UI to Bootstrap

In this document we'll be using SUI for ng2-semantic-ui and Bootstrap for ng-bootstrap.

Global application structure

The structure of the application, as coded in app.component.html, should be a 1×1 Bootstrap grid, taking up the whole space (with container-fluid). The one cell should be the router outlet.

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>  

Migrating SUI Grids

SUI grids follow this structure, with the sum of the columns reaching 16:

<div class="ui two column grid">

  <div class="three wide column">
      ...
  </div>

  <div class="thirteen wide column">
      ...
  </div>
</div>

That should be converted in a row with as many columns, but since Bootstrap grids have 12 columns, the width of each column must be adjusted accordingly, one Bootstrap column being roughly equivalent to 1.3 SUI columns.

<div class="container-fluid">
    <div class="row">
        <div class="col-4">
            ...
        </div>

        <div class="col-8">
            ...    
        </div>
    </div>
</div>

Notes

• In a Bootstrap grid "content must be placed within columns and only columns may be immediate children of rows," and if you don't follow that rule strictly nothing will work
• The 1.3 ratio is indicative, you'll need to experiment with different distributions
• It's not necessary to specify the width of the last column, as it will take up remaining space.
  In the example above, one could have used class col instead of col-8.