--- a/client/src/components/CreateGroup.js	Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/CreateGroup.js	Tue Aug 14 20:34:50 2018 +0200
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button, Alert, HelpBlock } from 'react-bootstrap';
 import '../App.css';
 import Navbar from './Navbar';
 import * as authActions from '../actions/authActions';
@@ -42,7 +41,7 @@
   renderErrorMessage(errorMessages, fieldname) {
     if (errorMessages && fieldname in errorMessages) {
       return errorMessages[fieldname].map((message, key) =>
-        <HelpBlock key={ key }>{ message }</HelpBlock>
+        <p className="help-block" key={ key }>{ message }</p>
       );
     }
   }
@@ -51,11 +50,11 @@
     if (errorMessages && 'non_field_errors' in errorMessages) {
       const errors = errorMessages['non_field_errors'];
       return (
-        <Alert bsStyle="danger">
+        <div class="alert alert-danger" role="alert">
         { errors.map((message, key) =>
           <p key={ key }>{ message }</p>
         ) }
-        </Alert>
+        </div>
       )
     }
   }
@@ -68,41 +67,40 @@
 
   render() {
 
-    const panelHeader = (
-      <h4 className="text-uppercase text-center">New Group</h4>
-    )
-
     const errorMessages = this.props.createGroup.getIn(['errorMessages', 'data']);
     const okDisabled = (!this.state.name || this.state.name.trim() === "");
 
     return (
       <div>
         <Navbar history={this.props.history} />
-        <Grid fluid>
-          <Row>
-            <Col md={6} mdOffset={3}>
-              <Panel header={ panelHeader } className="panel-login">
-                <form onSubmit={this.submit}>
-                  <FormGroup validationState={ errorMessages && ('name' in errorMessages) ? 'error' : null }>
-                    <ControlLabel>Nom</ControlLabel>
-                    <FormControl componentClass="input" type="text" onChange={this.handleInputChange} name="name" placeholder="Group name..."/>
-                     { this.renderErrorMessage(errorMessages, 'name') }
-                  </FormGroup>
-                  <FormGroup validationState={ errorMessages && ('description' in errorMessages) ? 'error' : null }>
-                    <ControlLabel>Password</ControlLabel>
-                    <FormControl componentClass="textarea" onChange={this.handleInputChange} name="description" placeholder="Description..."/>
-                     { this.renderErrorMessage(errorMessages, 'description') }
-                  </FormGroup>
-                  { this.renderNonFieldErrors(errorMessages) }
-                  <Row>
-                  <Col md={6}><Button type="submit" block bsStyle="primary" disabled={okDisabled}>Ok</Button></Col>
-                  <Col md={6}><Button block bsStyle="default" onClick={this.cancel}>Cancel</Button></Col>
-                  </Row>
-                </form>
-              </Panel>
-            </Col>
-          </Row>
-        </Grid>
+        <div className="container-fluid">
+            <div className="row">
+              <div className="col-md-6 col-md-offset-3">
+                <div className="panel-login panel panel-default">
+                  <div className="panel-heading">
+                  <h4 className="text-uppercase text-center">New Group</h4>
+                  <form onSubmit={this.submit}>
+                    <div className="form-group" validationState={ errorMessages && ('name' in errorMessages) ? 'error' : null }>
+                      <label className="control-label">Nom</label>
+                      <input className="form-control" type="text" onChange={this.handleInputChange} name="name" placeholder="Group name..."/>
+                      { this.renderErrorMessage(errorMessages, 'name') }
+                    </div>
+                    <div className="form-group" validationState={ errorMessages && ('description' in errorMessages) ? 'error' : null }>
+                      <label className="control-label">Password</label>
+                      <input className="form-control" type="textarea" onChange={this.handleInputChange} name="description" placeholder="Description..."/>
+                      { this.renderErrorMessage(errorMessages, 'description') }
+                    </div>
+                    { this.renderNonFieldErrors(errorMessages) }
+                    <div className="row">
+                    <div className="col-md-6"><button type="submit" className="btn btn-primary btn-lg btn-block" disabled={okDisabled}>Ok</button></div>
+                    <div className="col-md-6"><button type="button" className="btn btn-default btn-lg btn-block" onClick={this.cancel}>Annuler</button></div>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }