Formatted chapter member display (#14128)

diff --git a/erpnext/non_profit/doctype/chapter/templates/chapter.html b/erpnext/non_profit/doctype/chapter/templates/chapter.html
index 0110950..321828f 100644
--- a/erpnext/non_profit/doctype/chapter/templates/chapter.html
+++ b/erpnext/non_profit/doctype/chapter/templates/chapter.html
@@ -2,38 +2,40 @@
 
 {% block page_content %}
 <h1>{{ title }}</h1>
-<h3>Details</h3>
 <p>{{ introduction }}</p>
 {% if meetup_embed_html %}
 	{{ meetup_embed_html }}
 {% endif %}
-<h3>List of Members</h3>
+<h3>Member Details</h3>
 
 {% if members  %}
-	<table class="table table-bordered small" style="max-width: 500px;">
-		<tr>
-			<th width="15%" ></th>
-			<th>Member Details</th>
-		</tr>
+	<table class="table" style="max-width: 600px;">
 		{% set index = [1] %}
 		{% for user in members %}
 			{% if user.enabled == 1 %}
 				<tr>
-					<td>{{ index|length }}</td>
 					<td>
+						<div style="margin-bottom: 30px; max-width: 600px" class="with-border">
 						<div class="row">
-							<div class="col-lg-6 col-md-6 col-sm-6">{{ frappe.db.get_value('User', user.user, 'full_name') }}</div>
-							<div class="col-lg-6 col-md-6 col-sm-6 text-right">
+							<div class="col-lg-6 col-md-6 col-sm-6">
+             <div class="pull-left">
+								<b>{{ index|length }}. {{ frappe.db.get_value('User', user.user, 'full_name') }}</b></div>
+							</div>
+								<div class="pull-right">
 								{% if user.website_url %}
-									<a href="{{ user.website_url }}">{{ user.website_url or '' }}</a>
+									<a href="{{ user.website_url }}">{{ user.website_url | truncate (50) or '' }}</a>
 								{% endif %}
 							</div>
+							<div class="clearfix"></div>
+							</div>
+							<br><br>
 							<div class="col-lg-12">
 							{% if user.introduction %}
 								{{ user.introduction }}
 							{% endif %}
 							</div>
 						</div>
+					</div>
 					</td>
 				</tr>
 				{% set __ = index.append(1) %}
@@ -45,11 +47,13 @@
 {% endif %}
 
 <h3>Chapter Head</h3>
-<table class="table table-bordered small" style="max-width: 500px;">
+<div style="margin-bottom: 30px; max-width: 600px" class="with-border">
+
+<table class="table table-bordered small" style="max-width: 600px;">
 	{% set doc = frappe.get_doc('Member',chapter_head) %}
 	<tr>
 		<td style='width: 15%'>Name</td>
-		<td>{{ doc.member_name }}</td>
+		<td><b>{{ doc.member_name }}<b></td>
 	</tr>
 	<tr>
 		<td>Email</td>
@@ -60,8 +64,14 @@
 		<td>{{ frappe.db.get_value('User', doc.email, 'phone') or '' }}</td>
 	</tr>
 </table>
+</div>
+
+{% if address  %}
 <h3>Address</h3>
-<p>{{ address }}</p>
+<div style="margin-bottom: 30px; max-width: 600px" class="with-border">
+<p>{{ address or ''}}</p>
+</div>
+{% endif %}
 
 <p style="margin: 20px 0 30px;"><a href="/non_profit/join-chapter?name={{ name }}" class='btn btn-primary'>Join this Chapter</a></p>
 <p style="margin: 20px 0 30px;"><a href="/non_profit/leave-chapter?name={{ name }}" class=''>Leave this Chapter</a></p>