Twitter bootstrap 如何使用引导网格创建动态布局模板？

我正在使用boostrap和angular 4。我创建了一个register组件，并希望在其他地方重用它的html。 html代码

<div class="col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3">
    <div class="card">
      <div class="card-header text-center" data-background-color="purple">
        <br>
        <h4 class="title">Registrate</h4>
        <br>
      </div>
      <p class="category text-center">Unete a nosotros</p>
      <div class="card-content">
        <div class="input-group">
          <span class="input-group-addon">
          <i class="material-icons">face</i>
        </span>
          <div class="form-group label-floating">
            <label class="control-label">nombre</label>
            <input type="text" class="form-control">
            <span class="material-input"></span>
          </div>
        </div>
        <div class="input-group">
          <span class="input-group-addon">
          <i class="material-icons">email</i>
        </span>
          <div class="form-group label-floating">
            <label class="control-label">correo</label>
            <input type="email" class="form-control">
            <span class="material-input"></span>
          </div>
        </div>
        <div class="input-group">
          <span class="input-group-addon">
          <i class="material-icons">lock_outline</i>
        </span>
          <div class="form-group label-floating">
            <label class="control-label">contraseña</label>
            <input type="password" class="form-control">
            <span class="material-input"></span>
          </div>
        </div>
        <div class="footer text-center">
          <button type="submit" class="btn btn-rose btn-simple btn-wd btn-lg">
          OK
          <div class="ripple-container"></div>
        </button>
        </div>
      </div>
    </div>
  </div>

---

在另一个视图中，我想设置他的类属性col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3。它能更具动态性吗？

使用angular 2的ngClass属性设置动态等级，如下所示：

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

在任何其他组件模板中，发送页面以注册组件，如下所示

<div class='page1-comp'>
<register-comp page='page1'></register-comp>
</div>

<div class='page2-comp'>
    <register-comp page='page2'></register-comp>
</div>

<div class='page1-comp'>
<register-comp page='page1'></register-comp>
</div>

<div class='page2-comp'>
    <register-comp page='page2'></register-comp>
</div>