render() {
    const { contact } = this.props;
    return (
      <div>
        <Helmet title="Viewing contact | React Address Book" />

        <div className="container">

          <div className="row">

            <div className="row page-header">

              <div className="col-md-4 text-center">
                <div className="panel panel-default">
                  <div className="panel-body">
                      <span className="glyphicon glyphicon-user" aria-hidden="true"></span>
                  </div>
                </div>
              </div>

              <div className="col-md-8">
                <h1>{contact.firstName} {contact.lastName} <small>Business</small>
                </h1>
              </div>

            </div>

          </div>

          <div className="row">

              <div className="row">
                <div className="col-md-4 text-right"><p><strong>Title:</strong></p></div>
                <div className="col-md-8"><p>Mr.</p></div>
              </div>

              <div className="row">
                <div className="col-md-4 text-right"><p><strong>Name:</strong></p></div>
                <div className="col-md-8"><p>{contact.firstName} {contact.lastName}</p></div>
              </div>

              <div className="row">
                <div className="col-md-4 text-right"><p><strong>Type:</strong></p></div>
                <div className="col-md-8"><p>Business</p></div>
              </div>

              <div className="row">
                <div className="col-md-4 text-right"><p><strong>Phone Number:</strong></p></div>
                <div className="col-md-8"><p>000 000 000</p></div>
              </div>

              <div className="row">
                <div className="col-md-4 text-right"><p><strong>Email Address:</strong></p></div>
                <div className="col-md-8"><p>{contact.details}</p></div>
              </div>

              <div className="row">
                <div className="col-md-4 text-right"><p><strong>Address:</strong></p></div>
                <div className="col-md-8">
                  <p>
                    <address>15 Broadway,<br />
                      Ultimo NSW 2007
                    </address>
                  </p>
                </div>
              </div>

              <hr />

          </div>

        </div>
        <Link className="btn btn-default" to={`/contact/${contact.id}/edit`}>
          <span className="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;
          <span>Edit</span>
        </Link>
        &nbsp;
        <Link className="btn btn-default" to="/">
          <span className="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp;
          <span>Home</span>
        </Link>
      </div>
    );
  }
/*
    Select Bootstrap HTML elements to structure the view contact template.
    Remember, you virtually look up a component on their website and copy
    and paste the code...first look over the components and think of which
    ones would work together in this template to display the 'contact'.

    Here an example of HTML being populated by the current available 'contact'
    attributes
    <td>
      <span><Link to={`/contact/${id}`}>{lastName}, {firstName}</Link></span>
    </td>
    <td>{details}</td>

    Keep the Helment element and try adding Bootstrap button classes to the Link
    elements.

    <Contact {...contact} />
  */
Select Bootstrap HTML elements to structure the view contact template.
Remember, you virtually look up a component on their website and copy
and paste the code...first look over the components and think of which
ones would work together in this template to display the 'contact'.

Here an example of HTML being populated by the current available 'contact'
attributes

{lastName}, {firstName}

{details}

Keep the Helment element and try adding Bootstrap button classes to the Link
elements.


Select Bootstrap HTML elements to structure the view contact template . Remember you virtually look up a component on their website and copy and paste the code ... first look over the components and think of which ones would work together in this template to display the ' contact ' . Here an example of HTML being populated by the current available ' contact ' attributes { lastName } { firstName } { details } Keep the Helment element and try adding Bootstrap button classes to the Link elements .
render() {
    const { contact } = this.props;
    return (
      <div>
        <Helmet title="Viewing contact | React Address Book" />
        <div className="container">
          <div className="row">
            <div className="row page-header">
              <div className="col-md-4 text-center">
                <div className="panel panel-default">
                  <div className="panel-body">
                      <span className="glyphicon glyphicon-user" aria-hidden="true"></span>
                  </div>
                </div>
              </div>
              <div className="col-md-8">
                <h1>{contact.firstName} {contact.lastName} <small>Business</small>
                </h1>
              </div>
            </div>
          </div>
          <div className="row">
              <div className="row">
                <div className="col-md-4 text-right"><p><strong>Title:</strong></p></div>
                <div className="col-md-8"><p>Mr.</p></div>
              </div>
              <div className="row">
                <div className="col-md-4 text-right"><p><strong>Name:</strong></p></div>
                <div className="col-md-8"><p>{contact.firstName} {contact.lastName}</p></div>
              </div>
              <div className="row">
                <div className="col-md-4 text-right"><p><strong>Type:</strong></p></div>
                <div className="col-md-8"><p>Business</p></div>
              </div>
              <div className="row">
                <div className="col-md-4 text-right"><p><strong>Phone Number:</strong></p></div>
                <div className="col-md-8"><p>000 000 000</p></div>
              </div>
              <div className="row">
                <div className="col-md-4 text-right"><p><strong>Email Address:</strong></p></div>
                <div className="col-md-8"><p>{contact.details}</p></div>
              </div>
              <div className="row">
                <div className="col-md-4 text-right"><p><strong>Address:</strong></p></div>
                <div className="col-md-8">
                  <p>
                    <address>15 Broadway,<br />
                      Ultimo NSW 2007
                    </address>
                  </p>
                </div>
              </div>
              <hr />
          </div>
        </div>
        <Link className="btn btn-default" to={`/contact/${contact.id}/edit`}>
          <span className="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;
          <span>Edit</span>
        </Link>
        &nbsp;
        <Link className="btn btn-default" to="/">
          <span className="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp;
          <span>Home</span>
        </Link>
      </div>
    );
  }
render ( ) { const { contact } = this . props ; return ( < div > < Helmet title = "Viewing contact | React Address Book" / > < div className = "container" > < div className = "row" > < div className = "row page-header" > < div className = "col-md-4 text-center" > < div className = "panel panel-default" > < div className = "panel-body" > < span className = "glyphicon glyphicon-user" aria-hidden = "true" > < / span > < / div > < / div > < / div > < div className = "col-md-8" > < h1 > { contact . firstName } { contact . lastName } < small > Business < / small > < / h1 > < / div > < / div > < / div > < div className = "row" > < div className = "row" > < div className = "col-md-4 text-right" > < p > < strong > Title: < / strong > < / p > < / div > < div className = "col-md-8" > < p > Mr. < / p > < / div > < / div > < div className = "row" > < div className = "col-md-4 text-right" > < p > < strong > Name: < / strong > < / p > < / div > < div className = "col-md-8" > < p > { contact . firstName } { contact . lastName } < / p > < / div > < / div > < div className = "row" > < div className = "col-md-4 text-right" > < p > < strong > Type: < / strong > < / p > < / div > < div className = "col-md-8" > < p > Business < / p > < / div > < / div > < div className = "row" > < div className = "col-md-4 text-right" > < p > < strong > Phone Number: < / strong > < / p > < / div > < div className = "col-md-8" > < p > 000 000 000 < / p > < / div > < / div > < div className = "row" > < div className = "col-md-4 text-right" > < p > < strong > Email Address: < / strong > < / p > < / div > < div className = "col-md-8" > < p > { contact . details } < / p > < / div > < / div > < div className = "row" > < div className = "col-md-4 text-right" > < p > < strong > Address: < / strong > < / p > < / div > < div className = "col-md-8" > < p > < address > 15 Broadway, < br / > 
                      Ultimo NSW 2007
                     < / address > < / p > < / div > < / div > < hr / > < / div > < / div > < Link className = "btn btn-default" to = { ` ${ contact . id } ` } > < span className = "glyphicon glyphicon-pencil" aria-hidden = "true" > < / span > &nbsp;
           < span > Edit < / span > < / Link > 
        &nbsp;
         < Link className = "btn btn-default" to = "/" > < span className = "glyphicon glyphicon-home" aria-hidden = "true" > < / span > &nbsp;
           < span > Home < / span > < / Link > < / div > ) ; }
Select Bootstrap HTML elements to structure the view contact template.
Select Bootstrap HTML elements to structure the view contact template .