fixed design of book details page

app/javascript/components/library/BookDetails.jsx

@@ -96,14 +96,23 @@ class BookDetails extends Component{
                     <Link to="/" className="btn btn-link">
                         Home
                    </Link>
+                   <button onClick={this.props.history.goBack} className="btn btn-link">
+                        Go Back
+                   </button>
                    <button onClick={this.props.history.goBack} className="btn btn-link"></button>
                     </div >
                     <div className="row">
-                        <div>{book.name}</div>
-                        <div>{book.writterName}</div>
-                        <div>{book.courseName}</div>
+                    <div className="col-md-3">Book Name</div>
+                        <div className="col-md-3">Writter Name</div>
+                        <div className="col-md-3">Course Name</div>
+                        <div className="col-md-3">Action</div>
+                    </div>
+                    <div className="row">
+                        <div className="col-md-3">{book.name}</div>
+                        <div className="col-md-3">{book.writterName}</div>
+                        <div className="col-md-3">{book.courseName}</div>
                         {/* <button onClick={this.updateBookDetails}>edit</button> */}
-                        <button onClick={this.deleteBook}>delete</button>
+                        <div className="col-md-3"><button onClick={this.deleteBook}>delete</button></div>
                      </div>
                 </main>
             </div>