 
     <BS.Modal
       {...@props}
-      title={title}
+      show={@state.showModal}
+      onHide={@close}
       className='teacher-edit-period-modal'>
+
+      <BS.Modal.Header closeButton>
+        <BS.Modal.Title>{title}</BS.Modal.Title>
+      </BS.Modal.Header>
 
       <div className={formClasses.join(' ')}>
         <RenamePeriodField


  getInitialState: ->
    period_name: @props.activeTab.name

  validate: (name) ->
    error = PeriodStore.validatePeriodName(name, @props.periods, @props.activeTab.name)

    if not @state.invalid
      id = @props.activeTab.id
      PeriodActions.save(@props.courseId, id, period: {name: @state.period_name})
      @close()

  renderForm: ->
    formClasses = ['modal-body', 'teacher-edit-period-form']
