From 6304488bea4d078ddd6e9fca82e5446e42728beb Mon Sep 17 00:00:00 2001
From: Alexandre Tranchant <Alexandre.Tranchant@gmail.com>
Date: Thu, 26 Dec 2013 14:24:52 +0100
Subject: [PATCH] =?UTF-8?q?MAJB303=20:=20UCP=20:=20Amis,=20ignor=C3=A9s,?=
 =?UTF-8?q?=20pr=C3=A9f=C3=A9rences=20et=20profil=20(fin=20de=20l'ucp=5F*)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../template/custom_profile_fields.html       |  20 +-
 .../template/ucp_prefs_personal.html          | 276 +++++++++---------
 phpBBBootstrap/template/ucp_prefs_post.html   | 125 ++++----
 phpBBBootstrap/template/ucp_prefs_view.html   | 252 ++++++++--------
 .../template/ucp_profile_profile_info.html    | 224 +++++++-------
 .../template/ucp_profile_reg_details.html     | 138 ++++-----
 phpBBBootstrap/template/ucp_zebra_foes.html   |  64 ++--
 .../template/ucp_zebra_friends.html           |  66 +++--
 phpBBBootstrap/theme/initialisation.js        |   9 +
 9 files changed, 607 insertions(+), 567 deletions(-)

diff --git a/phpBBBootstrap/template/custom_profile_fields.html b/phpBBBootstrap/template/custom_profile_fields.html
index b4a9764..5f077c5 100644
--- a/phpBBBootstrap/template/custom_profile_fields.html
+++ b/phpBBBootstrap/template/custom_profile_fields.html
@@ -9,8 +9,10 @@
 <!-- END text -->
 
 <!-- BEGIN string -->
-<span class="input-group-addon"><i class="icon-list"></i></span>
-<input class="form-control" type="text" name="{string.FIELD_IDENT}" id="{string.FIELD_IDENT}" maxlength="{string.FIELD_MAXLEN}" value="{string.FIELD_VALUE}" />
+<div class="input-group">			
+	<div class="input-group-addon"><i class="icon-align-justify"></i></div>
+	<input class="form-control" type="text" name="{string.FIELD_IDENT}" id="{string.FIELD_IDENT}" maxlength="{string.FIELD_MAXLEN}" value="{string.FIELD_VALUE}" />
+</div>
 <!-- END string -->
 
 <!-- BEGIN bool -->
@@ -22,12 +24,16 @@
 <!-- END bool -->
 
 <!-- BEGIN int -->
-<span class="input-group-addon"><i class="icon-list-ol"></i></span>
-<input class="form-control" type="text" name="{int.FIELD_IDENT}" id="{int.FIELD_IDENT}" value="{int.FIELD_VALUE}" />
+<div class="input-group">			
+	<div class="input-group-addon"><i class="icon-list-ol"></i></div>
+	<input class="form-control" type="text" name="{int.FIELD_IDENT}" id="{int.FIELD_IDENT}" value="{int.FIELD_VALUE}" />
+</div>
 <!-- END int -->
 
 <!-- BEGIN date -->
-<label for="{date.FIELD_IDENT}_day">{L_DAY}: <select class="form-control" name="{date.FIELD_IDENT}_day" id="{date.FIELD_IDENT}_day">{date.S_DAY_OPTIONS}</select></label> 
-<label for="{date.FIELD_IDENT}_month">{L_MONTH}: <select class="form-control" name="{date.FIELD_IDENT}_month" id="{date.FIELD_IDENT}_month">{date.S_MONTH_OPTIONS}</select></label> 
-<label for="{date.FIELD_IDENT}_year">{L_YEAR}: <select class="form-control"  name="{date.FIELD_IDENT}_year" id="{date.FIELD_IDENT}_year">{date.S_YEAR_OPTIONS}</select></label>
+<div class="form-inline">
+	<label for="{date.FIELD_IDENT}_day">{L_DAY}&nbsp;: <select class="form-control" name="{date.FIELD_IDENT}_day" id="{date.FIELD_IDENT}_day">{date.S_DAY_OPTIONS}</select></label> 
+	&nbsp;<label for="{date.FIELD_IDENT}_month">{L_MONTH}&nbsp;: <select class="form-control" name="{date.FIELD_IDENT}_month" id="{date.FIELD_IDENT}_month">{date.S_MONTH_OPTIONS}</select></label> 
+	&nbsp;<label for="{date.FIELD_IDENT}_year">{L_YEAR}&nbsp;: <select class="form-control"  name="{date.FIELD_IDENT}_year" id="{date.FIELD_IDENT}_year">{date.S_YEAR_OPTIONS}</select></label>
+</div>
 <!-- END date -->
diff --git a/phpBBBootstrap/template/ucp_prefs_personal.html b/phpBBBootstrap/template/ucp_prefs_personal.html
index 88d94bb..afb7ad8 100644
--- a/phpBBBootstrap/template/ucp_prefs_personal.html
+++ b/phpBBBootstrap/template/ucp_prefs_personal.html
@@ -1,129 +1,142 @@
 <!-- INCLUDE ucp_header.html -->
 
-<form id="ucp" method="post" action="{S_UCP_ACTION}"{S_FORM_ENCTYPE} class="form form-horizontal form-large">
+<form id="ucp" method="post" action="{S_UCP_ACTION}"{S_FORM_ENCTYPE} class="form-horizontal">
+<div class="panel panel-default">
+	<div class="panel-heading"><h2 class="panel-title"><i class="icon-cogs"></i> {L_TITLE}</h2></div>
+	<div class="panel-body">
+		<fieldset>
+			<!-- IF ERROR --><p class="alert alert-danger alert-block">{ERROR}</p><!-- ENDIF -->
 
-<h3><i class="icon-cogs"></i> {L_TITLE}</h3>
-
-<fieldset>
-	<!-- IF ERROR --><p class="alert alert-danger alert-block">{ERROR}</p><!-- ENDIF -->
-	<div class="form-group">
-		<span class="control-label">{L_SHOW_EMAIL}</span>
-		<div class="controls">
-			<label for="viewemail1" class="radio-inline">
-				<input type="radio" name="viewemail" id="viewemail1" value="1" <!-- IF S_VIEW_EMAIL --> checked="checked"<!-- ENDIF --> />
-				{L_YES}
-			</label>
-			<label for="viewemail0" class="radio-inline">
-				<input type="radio" name="viewemail" id="viewemail0" value="0"<!-- IF not S_VIEW_EMAIL --> checked="checked"<!-- ENDIF --> />
-				{L_NO}
-			</label>
-		</div>
-	</div>
-	
-	<div class="form-group">
-		<span class="control-label">{L_ADMIN_EMAIL}</span>
-		<div class="controls">
-			<label for="massemail1" class="radio-inline">
-				<input type="radio" name="massemail" id="massemail1" value="1"<!-- IF S_MASS_EMAIL --> checked="checked"<!-- ENDIF --> /> 
-				{L_YES}
-			</label> 
-			<label for="massemail0" class="radio-inline">
-				<input type="radio" name="massemail" id="massemail0" value="0"<!-- IF not S_MASS_EMAIL --> checked="checked"<!-- ENDIF --> /> 
-				{L_NO}
-			</label>
-		</div>
-	</div>
-	<div class="form-group">
-		<span class="control-label">{L_ALLOW_PM}</span>
-		<div class="controls">
-			<label for="allowpm1" class="radio-inline"><input type="radio" name="allowpm" id="allowpm1" value="1"<!-- IF S_ALLOW_PM --> checked="checked"<!-- ENDIF --> /> {L_YES}</label> 
-			<label for="allowpm0" class="radio-inline"><input type="radio" name="allowpm" id="allowpm0" value="0"<!-- IF not S_ALLOW_PM --> checked="checked"<!-- ENDIF --> /> {L_NO}</label>
-			<span class="help-block"><em>{L_ALLOW_PM_EXPLAIN}</em></span>
-		</div>
-	</div>
-	<!-- IF S_CAN_HIDE_ONLINE -->
-		<div class="form-group">
-			<span class="control-label">{L_HIDE_ONLINE}</span>
-			<div class="controls">
-				<label for="hideonline1" class="radio-inline"><input type="radio" name="hideonline" id="hideonline1" value="1"<!-- IF S_HIDE_ONLINE --> checked="checked"<!-- ENDIF --> /> {L_YES}</label> 
-				<label for="hideonline0" class="radio-inline"><input type="radio" name="hideonline" id="hideonline0" value="0"<!-- IF not S_HIDE_ONLINE --> checked="checked"<!-- ENDIF --> /> {L_NO}</label>
-				<span class="help-inline"><em>{L_HIDE_ONLINE_EXPLAIN}</em></span>
+			<div class="form-group">
+				<label class="control-label col-sm-6">{L_SHOW_EMAIL}</label>
+				<div class="col-sm-6">
+					<div class="input-group">
+					<label for="viewemail1" class="radio-inline">
+						<input type="radio" name="viewemail" id="viewemail1" value="1" <!-- IF S_VIEW_EMAIL --> checked="checked"<!-- ENDIF --> />
+						{L_YES}
+					</label>
+					<label for="viewemail0" class="radio-inline">
+						<input type="radio" name="viewemail" id="viewemail0" value="0"<!-- IF not S_VIEW_EMAIL --> checked="checked"<!-- ENDIF --> />
+						{L_NO}
+					</label>
+					</div>
+				</div>
 			</div>
-		</div>
-	<!-- ENDIF -->		
-	<!-- IF S_SELECT_NOTIFY -->
-		<div class="form-group">
-			<span class="control-label">{L_NOTIFY_METHOD}</span>
-			<div class="controls">
-				<label for="notifymethod0" class="radio-inline"><input type="radio" name="notifymethod" id="notifymethod0" value="0"<!-- IF S_NOTIFY_EMAIL --> checked="checked"<!-- ENDIF --> /> {L_NOTIFY_METHOD_EMAIL}</label> 
-				<label for="notifymethod1" class="radio-inline"><input type="radio" name="notifymethod" id="notifymethod1" value="1"<!-- IF S_NOTIFY_IM --> checked="checked"<!-- ENDIF --> /> {L_NOTIFY_METHOD_IM}</label> 
-				<label for="notifymethod2" class="radio-inline"><input type="radio" name="notifymethod" id="notifymethod2" value="2"<!-- IF S_NOTIFY_BOTH --> checked="checked"<!-- ENDIF --> /> {L_NOTIFY_METHOD_BOTH}</label>
+			
+			<div class="form-group">
+				<label class="control-label  col-sm-6">{L_ADMIN_EMAIL}</label>
+				<div class="col-sm-6">
+					<label for="massemail1" class="radio-inline">
+						<input type="radio" name="massemail" id="massemail1" value="1"<!-- IF S_MASS_EMAIL --> checked="checked"<!-- ENDIF --> /> 
+						{L_YES}
+					</label> 
+					<label for="massemail0" class="radio-inline">
+						<input type="radio" name="massemail" id="massemail0" value="0"<!-- IF not S_MASS_EMAIL --> checked="checked"<!-- ENDIF --> /> 
+						{L_NO}
+					</label>
+				</div>
 			</div>
-		</div>
-	<!-- ENDIF -->
-	<div class="form-group">
-		<span class="control-label">{L_NOTIFY_ON_PM}</span>
-		<div class="controls">
-			<label for="notifypm1" class="radio-inline"><input type="radio" name="notifypm" id="notifypm1" value="1"<!-- IF S_NOTIFY_PM --> checked="checked"<!-- ENDIF --> /> {L_YES}</label> 
-			<label for="notifypm0" class="radio-inline"><input type="radio" name="notifypm" id="notifypm0" value="0"<!-- IF not S_NOTIFY_PM --> checked="checked"<!-- ENDIF --> /> {L_NO}</label>
-		</div>
-	</div>
-	<div class="form-group">
-		<span class="control-label">{L_POPUP_ON_PM}</span>
-		<div class="controls">
-			<label for="popuppm1" class="radio-inline"><input type="radio" name="popuppm" id="popuppm1" value="1"<!-- IF S_POPUP_PM --> checked="checked"<!-- ENDIF --> /> {L_YES}</label> 
-			<label for="popuppm0" class="radio-inline"><input type="radio" name="popuppm" id="popuppm0" value="0"<!-- IF not S_POPUP_PM --> checked="checked"<!-- ENDIF --> /> {L_NO}</label>
-		</div>
-	</div>
-	<!-- IF S_MORE_LANGUAGES -->
-	<div class="form-group">
-		<label class="control-label" for="lang">{L_BOARD_LANGUAGE}</label>
-		<div class="controls">
-			<select name="lang" id="lang">{S_LANG_OPTIONS}</select>
-		</div>
-	</div>
-	<!-- ENDIF -->
-	<!-- IF S_STYLE_OPTIONS and S_MORE_STYLES -->
-	<div class="form-group">
-		<label class="control-label" for="style">{L_BOARD_STYLE}</label>
-		<div class="controls">
-			<select name="style" id="style">{S_STYLE_OPTIONS}</select>
-		</div>
-	</div>
-	<!-- ENDIF -->
-	<div class="form-group">
-		<label class="control-label"  for="timezone">{L_BOARD_TIMEZONE}</label>
-		<div class="controls">
-			<select name="tz" id="timezone" class="autowidth">{S_TZ_OPTIONS}</select>
-		</div>
-	</div>
-	<div class="form-group">
-		<span class="control-label"  for="dst1">{L_BOARD_DST}</span>
-		<div class="controls">
-			<label class="radio-inline" for="dst1"><input type="radio" name="dst" id="dst1" value="1"<!-- IF S_DST --> checked="checked"<!-- ENDIF --> /> {L_YES}</label> 
-			<label class="radio-inline" for="dst0"><input type="radio" name="dst" id="dst0" value="0"<!-- IF not S_DST --> checked="checked"<!-- ENDIF --> /> {L_NO}</label>
-		</div>
-	</div>
-	<div class="form-group">
-		<label class="control-label" for="dateformat">{L_BOARD_DATE_FORMAT}</label>
-		<div class="controls">
-			<select name="dateoptions" id="dateoptions" onchange="if(this.value=='custom'){dE('custom_date',1);}else{dE('custom_date',-1);} if (this.value == 'custom') { document.getElementById('dateformat').value = default_dateformat; } else { document.getElementById('dateformat').value = this.value; }">
-				{S_DATEFORMAT_OPTIONS}
-			</select>
-			<span id="custom_date" style="display:none;"><input type="text" name="dateformat" id="dateformat" value="{DATE_FORMAT}" maxlength="30" class="inputbox narrow" style="margin-top: 3px;" /></span>
-			<span class="help-block">
-				<em>{L_BOARD_DATE_FORMAT_EXPLAIN}</em><br/>				
-			</span>
-		</div>		
+			<div class="form-group">
+				<label class="control-label  col-sm-6">{L_ALLOW_PM}</label>
+				<div class="col-sm-6">
+					<label for="allowpm1" class="radio-inline"><input type="radio" name="allowpm" id="allowpm1" value="1"<!-- IF S_ALLOW_PM --> checked="checked"<!-- ENDIF --> /> {L_YES}</label> 
+					<label for="allowpm0" class="radio-inline"><input type="radio" name="allowpm" id="allowpm0" value="0"<!-- IF not S_ALLOW_PM --> checked="checked"<!-- ENDIF --> /> {L_NO}</label>
+					<span class="help-block"><em>{L_ALLOW_PM_EXPLAIN}</em></span>
+				</div>
+			</div>
+			<!-- IF S_CAN_HIDE_ONLINE -->
+				<div class="form-group">
+					<label class="control-label  col-sm-6">{L_HIDE_ONLINE}</label>
+					<div class="col-sm-6">
+						<label for="hideonline1" class="radio-inline"><input type="radio" name="hideonline" id="hideonline1" value="1"<!-- IF S_HIDE_ONLINE --> checked="checked"<!-- ENDIF --> /> {L_YES}</label> 
+						<label for="hideonline0" class="radio-inline"><input type="radio" name="hideonline" id="hideonline0" value="0"<!-- IF not S_HIDE_ONLINE --> checked="checked"<!-- ENDIF --> /> {L_NO}</label>
+						<span class="help-block"><em>{L_HIDE_ONLINE_EXPLAIN}</em></span>
+					</div>
+				</div>
+			<!-- ENDIF -->		
+			<!-- IF S_SELECT_NOTIFY -->
+				<div class="form-group">
+					<label class="control-label  col-sm-6">{L_NOTIFY_METHOD}</label>
+					<div class="col-sm-6">
+						<label for="notifymethod0" class="radio-inline"><input type="radio" name="notifymethod" id="notifymethod0" value="0"<!-- IF S_NOTIFY_EMAIL --> checked="checked"<!-- ENDIF --> /> {L_NOTIFY_METHOD_EMAIL}</label> 
+						<label for="notifymethod1" class="radio-inline"><input type="radio" name="notifymethod" id="notifymethod1" value="1"<!-- IF S_NOTIFY_IM --> checked="checked"<!-- ENDIF --> /> {L_NOTIFY_METHOD_IM}</label> 
+						<label for="notifymethod2" class="radio-inline"><input type="radio" name="notifymethod" id="notifymethod2" value="2"<!-- IF S_NOTIFY_BOTH --> checked="checked"<!-- ENDIF --> /> {L_NOTIFY_METHOD_BOTH}</label>
+					</div>
+				</div>
+			<!-- ENDIF -->
+			<div class="form-group">
+				<label class="control-label  col-sm-6">{L_NOTIFY_ON_PM}</label>
+				<div class="col-sm-6">
+					<label for="notifypm1" class="radio-inline"><input type="radio" name="notifypm" id="notifypm1" value="1"<!-- IF S_NOTIFY_PM --> checked="checked"<!-- ENDIF --> /> {L_YES}</label> 
+					<label for="notifypm0" class="radio-inline"><input type="radio" name="notifypm" id="notifypm0" value="0"<!-- IF not S_NOTIFY_PM --> checked="checked"<!-- ENDIF --> /> {L_NO}</label>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label  col-sm-6">{L_POPUP_ON_PM}</label>
+				<div class="col-sm-6">
+					<label for="popuppm1" class="radio-inline"><input type="radio" name="popuppm" id="popuppm1" value="1"<!-- IF S_POPUP_PM --> checked="checked"<!-- ENDIF --> /> {L_YES}</label> 
+					<label for="popuppm0" class="radio-inline"><input type="radio" name="popuppm" id="popuppm0" value="0"<!-- IF not S_POPUP_PM --> checked="checked"<!-- ENDIF --> /> {L_NO}</label>
+				</div>
+			</div>
+			<!-- IF S_MORE_LANGUAGES -->
+			<div class="form-group">
+				<label class="control-label col-sm-6" for="lang">{L_BOARD_LANGUAGE}</label>
+				<div class="col-sm-6">
+					<select name="lang" class="form-control" id="lang">{S_LANG_OPTIONS}</select>
+				</div>
+			</div>
+			<!-- ENDIF -->
+			<!-- IF S_STYLE_OPTIONS and S_MORE_STYLES -->
+			<div class="form-group">
+				<label class="control-label  col-sm-6" for="style">{L_BOARD_STYLE}</label>
+				<div class="col-sm-6">
+					<select name="style" class="form-control" id="style">{S_STYLE_OPTIONS}</select>
+				</div>
+			</div>
+			<!-- ENDIF -->
+			<div class="form-group">
+				<label class="control-label  col-sm-6"  for="timezone">{L_BOARD_TIMEZONE}</label>
+				<div class="col-sm-6">
+					<select name="tz" class="form-control" id="timezone" >{S_TZ_OPTIONS}</select>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-6"  for="dst1">{L_BOARD_DST}</label>
+				<div class="col-sm-6">
+					<label class="radio-inline" for="dst1"><input type="radio" name="dst" id="dst1" value="1"<!-- IF S_DST --> checked="checked"<!-- ENDIF --> /> {L_YES}</label> 
+					<label class="radio-inline" for="dst0"><input type="radio" name="dst" id="dst0" value="0"<!-- IF not S_DST --> checked="checked"<!-- ENDIF --> /> {L_NO}</label>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-6" for="dateformat">{L_BOARD_DATE_FORMAT}</label>
+				<div class="col-sm-3">
+					<select name="dateoptions" id="dateoptions" class="form-control" onchange="if(this.value=='custom'){$('#custom_date').show();}else{$('#custom_date').hide();} if (this.value == 'custom') { $('#dateformat').val(default_dateformat); } else { $('#dateformat').val(this.value); }">
+						{S_DATEFORMAT_OPTIONS}
+					</select>
+				</div>
+				<div class="col-sm-3">
+					<span id="custom_date" style="display:none;"><input type="text" name="dateformat" id="dateformat" value="{DATE_FORMAT}" maxlength="30" class="form-control" /></span>
+				</div>
+				<div class="col-sm-offset-6 col-sm-6">
+					<span class="help-block">
+						<em>{L_BOARD_DATE_FORMAT_EXPLAIN}</em><br/>				
+					</span>
+				</div>		
+			</div>
+		</fieldset>
 	</div>
-	</fieldset>
-
-	<fieldset class="form-actions">
+	<div class="panel-footer">
 		{S_HIDDEN_FIELDS}
-		<input type="reset" value="{L_RESET}" name="reset" class="btn btn-default" />&nbsp; 
-		<input type="submit" name="submit" value="{L_SUBMIT}" class="btn btn-primary" />
+		<fieldset class="btn-group">
+			<input type="reset" value="{L_RESET}" name="reset" class="btn btn-default" /> 
+			<input type="submit" name="submit" value="{L_SUBMIT}" class="btn btn-primary" />
+		</fieldset>
 		{S_FORM_TOKEN}
-	</fieldset>
+	</div>
+</div>
+
+
+
 </form>
 
 <script type="text/javascript">
@@ -133,28 +146,11 @@ <h3><i class="icon-cogs"></i> {L_TITLE}</h3>
 
 	function customDates()
 	{
-		var e = document.getElementById('dateoptions');
-	
-		e.selectedIndex = e.length - 1;
-	
-		// Loop and match date_format in menu
-		for (var i = 0; i < e.length; i++)
-		{
-			if (e.options[i].value == date_format)
-			{
-				e.selectedIndex = i;
-				break;
-			}
-		}
-	
-		// Show/hide custom field
-		if (e.selectedIndex == e.length - 1)
-		{
-			dE('custom_date',1);
-		}
-		else
-		{
-			dE('custom_date',-1);
+		
+		if ($('#dateoptions option:selected').val() == 'custom'){
+			$('#custom_date').show();
+		}else{
+			$('#custom_date').hide();
 		}
 	}
 
diff --git a/phpBBBootstrap/template/ucp_prefs_post.html b/phpBBBootstrap/template/ucp_prefs_post.html
index 6fa2859..3222472 100644
--- a/phpBBBootstrap/template/ucp_prefs_post.html
+++ b/phpBBBootstrap/template/ucp_prefs_post.html
@@ -1,69 +1,72 @@
 <!-- INCLUDE ucp_header.html -->
-
-<form id="ucp" method="post" action="{S_UCP_ACTION}"{S_FORM_ENCTYPE} class="form form-horizontal">
-
-<h3><i class="icon-cogs"></i> {L_TITLE}</h3>
-
-	<!-- IF ERROR --><p class="alert alert-danger alert-block">{ERROR}</p><!-- ENDIF -->
-	<div class="form-group">
-		<span class="control-label">{L_DEFAULT_BBCODE}</span>
-		<div class="controls">
-			<label for="bbcode1" class="radio-inline">
-				<input type="radio" name="bbcode" id="bbcode1" value="1" <!-- IF S_BBCODE --> checked="checked"<!-- ENDIF --> />
-				{L_YES}
-			</label>
-			<label for="bbcode0" class="radio-inline">
-				<input type="radio" name="bbcode" id="bbcode0" value="0"<!-- IF not S_BBCODE --> checked="checked"<!-- ENDIF --> />
-				{L_NO}
-			</label>
-		</div>
-	</div>
-	<div class="form-group">
-		<span class="control-label">{L_DEFAULT_SMILIES}</span>
-		<div class="controls">
-			<label for="smilies1" class="radio-inline">
-				<input type="radio" name="smilies" id="smilies1" value="1" <!-- IF S_SMILIES --> checked="checked"<!-- ENDIF --> />
-				{L_YES}
-			</label>
-			<label for="smilies0" class="radio-inline">
-				<input type="radio" name="smilies" id="smilies0" value="0"<!-- IF not S_SMILIES --> checked="checked"<!-- ENDIF --> />
-				{L_NO}
-			</label>
+<form id="ucp" method="post" action="{S_UCP_ACTION}"{S_FORM_ENCTYPE} class="form-horizontal">
+<div class="panel panel-default">
+	<div class="panel-heading"><h2 class="panel-title"><i class="icon-cogs"></i> {L_TITLE}</h2></div>
+	<div class="panel-body">
+		<!-- IF ERROR --><p class="alert alert-danger alert-block">{ERROR}</p><!-- ENDIF -->
+		<div class="form-group">
+			<label class="control-label col-sm-4">{L_DEFAULT_BBCODE}</label>
+			<div class="col-sm-8">
+				<label for="bbcode1" class="radio-inline">
+					<input type="radio" name="bbcode" id="bbcode1" value="1" <!-- IF S_BBCODE --> checked="checked"<!-- ENDIF --> />
+					{L_YES}
+				</label>
+				<label for="bbcode0" class="radio-inline">
+					<input type="radio" name="bbcode" id="bbcode0" value="0"<!-- IF not S_BBCODE --> checked="checked"<!-- ENDIF --> />
+					{L_NO}
+				</label>
+			</div>
 		</div>
-	</div>
-	<div class="form-group">
-		<span class="control-label">{L_DEFAULT_ADD_SIG}</span>
-		<div class="controls">
-			<label for="sig1" class="radio-inline">
-				<input type="radio" name="sig" id="sig1" value="1" <!-- IF S_SIG --> checked="checked"<!-- ENDIF --> />
-				{L_YES}
-			</label>
-			<label for="sig0" class="radio-inline">
-				<input type="radio" name="sig" id="sig0" value="0"<!-- IF not S_SIG --> checked="checked"<!-- ENDIF --> />
-				{L_NO}
-			</label>
+		<div class="form-group">
+			<label class="control-label col-sm-4">{L_DEFAULT_SMILIES}</label>
+			<div class="col-sm-8">
+				<label for="smilies1" class="radio-inline">
+					<input type="radio" name="smilies" id="smilies1" value="1" <!-- IF S_SMILIES --> checked="checked"<!-- ENDIF --> />
+					{L_YES}
+				</label>
+				<label for="smilies0" class="radio-inline">
+					<input type="radio" name="smilies" id="smilies0" value="0"<!-- IF not S_SMILIES --> checked="checked"<!-- ENDIF --> />
+					{L_NO}
+				</label>
+			</div>
 		</div>
-	</div>	
-	<div class="form-group">
-		<span class="control-label">{L_DEFAULT_NOTIFY}</span>
-		<div class="controls">
-			<label for="notify1" class="radio-inline">
-				<input type="radio" name="notify" id="notify1" value="1" <!-- IF S_NOTIFY --> checked="checked"<!-- ENDIF --> />
-				{L_YES}
-			</label>
-			<label for="notify0" class="radio-inline">
-				<input type="radio" name="notify" id="notify0" value="0"<!-- IF not S_NOTIFY --> checked="checked"<!-- ENDIF --> />
-				{L_NO}
-			</label>
+		<div class="form-group">
+			<label class="control-label col-sm-4">{L_DEFAULT_ADD_SIG}</label>
+			<div class="col-sm-8">
+				<label for="sig1" class="radio-inline">
+					<input type="radio" name="sig" id="sig1" value="1" <!-- IF S_SIG --> checked="checked"<!-- ENDIF --> />
+					{L_YES}
+				</label>
+				<label for="sig0" class="radio-inline">
+					<input type="radio" name="sig" id="sig0" value="0"<!-- IF not S_SIG --> checked="checked"<!-- ENDIF --> />
+					{L_NO}
+				</label>
+			</div>
+		</div>	
+		<div class="form-group">
+			<label class="control-label col-sm-4">{L_DEFAULT_NOTIFY}</label>
+			<div class="col-sm-8">
+				<label for="notify1" class="radio-inline">
+					<input type="radio" name="notify" id="notify1" value="1" <!-- IF S_NOTIFY --> checked="checked"<!-- ENDIF --> />
+					{L_YES}
+				</label>
+				<label for="notify0" class="radio-inline">
+					<input type="radio" name="notify" id="notify0" value="0"<!-- IF not S_NOTIFY --> checked="checked"<!-- ENDIF --> />
+					{L_NO}
+				</label>
+			</div>
 		</div>
-	</div>	
+	</div>
+	<div class="panel-footer">
+		{S_HIDDEN_FIELDS}
+		<fieldset class="btn-group">
+			<input type="reset" value="{L_RESET}" name="reset" class="btn btn-default" /> 
+			<input type="submit" name="submit" value="{L_SUBMIT}" class="btn btn-primary" />
+		</fieldset>
+		{S_FORM_TOKEN}
+	</div>
+</div>
 
-<fieldset class="form-actions">
-	{S_HIDDEN_FIELDS}
-	<input type="reset" value="{L_RESET}" name="reset" class="btn btn-default" /> 
-	<input type="submit" name="submit" value="{L_SUBMIT}" class="btn btn-primary" />
-	{S_FORM_TOKEN}
-</fieldset>
 </form>
 
 <!-- INCLUDE ucp_footer.html -->
\ No newline at end of file
diff --git a/phpBBBootstrap/template/ucp_prefs_view.html b/phpBBBootstrap/template/ucp_prefs_view.html
index 7b681ea..3ddaddb 100644
--- a/phpBBBootstrap/template/ucp_prefs_view.html
+++ b/phpBBBootstrap/template/ucp_prefs_view.html
@@ -1,141 +1,147 @@
 <!-- INCLUDE ucp_header.html -->
 
-<h3><i class="icon-eye-open"></i> {L_TITLE}</h3>
-
-<form id="ucp" method="post" action="{S_UCP_ACTION}"{S_FORM_ENCTYPE} class="form form-horizontal form-large">
-
-	<fieldset>
-		<!-- IF ERROR --><p class="alert alert-danger alert-block">{ERROR}</p><!-- ENDIF -->
-		<div class="form-group">
-			<span class="control-label">{L_VIEW_IMAGES}</span>
-			<div class="controls">
-				<label for="images1" class="radio-inline">
-					<input type="radio" name="images" id="images1" value="1" <!-- IF S_IMAGES --> checked="checked"<!-- ENDIF --> />
-					{L_YES}
-				</label>
-				<label for="images0" class="radio-inline">
-					<input type="radio" name="images" id="images0" value="0"<!-- IF not S_IMAGES --> checked="checked"<!-- ENDIF --> />
-					{L_NO}
-				</label>
-			</div>
-		</div>
-		<div class="form-group">
-			<span class="control-label">{L_VIEW_FLASH}</span>
-			<div class="controls">
-				<label for="flash1" class="radio-inline">
-					<input type="radio" name="flash" id="flash1" value="1" <!-- IF S_FLASH --> checked="checked"<!-- ENDIF --> />
-					{L_YES}
-				</label>
-				<label for="flash0" class="radio-inline">
-					<input type="radio" name="flash" id="flash0" value="0"<!-- IF not S_FLASH --> checked="checked"<!-- ENDIF --> />
-					{L_NO}
-				</label>
+<form id="ucp" method="post" action="{S_UCP_ACTION}"{S_FORM_ENCTYPE} class="form-horizontal">
+<div class="panel panel-default">
+	<div class="panel-heading"><h2 class="panel-title"><i class="icon-eye-open"></i> {L_TITLE}</h2></div>
+	<div class="panel-body">
+<fieldset>
+			<!-- IF ERROR --><p class="alert alert-danger alert-block">{ERROR}</p><!-- ENDIF -->
+			<div class="form-group">
+				<label class="control-label col-sm-6">{L_VIEW_IMAGES}</label>
+				<div class="col-sm-6">
+					<label for="images1" class="radio-inline">
+						<input type="radio" name="images" id="images1" value="1" <!-- IF S_IMAGES --> checked="checked"<!-- ENDIF --> />
+						{L_YES}
+					</label>
+					<label for="images0" class="radio-inline">
+						<input type="radio" name="images" id="images0" value="0"<!-- IF not S_IMAGES --> checked="checked"<!-- ENDIF --> />
+						{L_NO}
+					</label>
+				</div>
 			</div>
-		</div>
-		<div class="form-group">
-			<span class="control-label">{L_VIEW_SMILIES}</span>
-			<div class="controls">
-				<label for="smilies1" class="radio-inline">
-					<input type="radio" name="smilies" id="smilies1" value="1" <!-- IF S_SMILIES --> checked="checked"<!-- ENDIF --> />
-					{L_YES}
-				</label>
-				<label for="smilies0" class="radio-inline">
-					<input type="radio" name="smilies" id="smilies0" value="0"<!-- IF not S_SMILIES --> checked="checked"<!-- ENDIF --> />
-					{L_NO}
-				</label>
+			<div class="form-group">
+				<label class="control-label col-sm-6">{L_VIEW_FLASH}</label>
+				<div class="col-sm-6">
+					<label for="flash1" class="radio-inline">
+						<input type="radio" name="flash" id="flash1" value="1" <!-- IF S_FLASH --> checked="checked"<!-- ENDIF --> />
+						{L_YES}
+					</label>
+					<label for="flash0" class="radio-inline">
+						<input type="radio" name="flash" id="flash0" value="0"<!-- IF not S_FLASH --> checked="checked"<!-- ENDIF --> />
+						{L_NO}
+					</label>
+				</div>
 			</div>
-		</div>
-		<div class="form-group">
-			<span class="control-label">{L_VIEW_SIGS}</span>
-			<div class="controls">
-				<label for="sigs1" class="radio-inline">
-					<input type="radio" name="sigs" id="sigs1" value="1" <!-- IF S_SIGS --> checked="checked"<!-- ENDIF --> />
-					{L_YES}
-				</label>
-				<label for="sigs0" class="radio-inline">
-					<input type="radio" name="sigs" id="sigs0" value="0"<!-- IF not S_SIGS --> checked="checked"<!-- ENDIF --> />
-					{L_NO}
-				</label>
+			<div class="form-group">
+				<label class="control-label col-sm-6">{L_VIEW_SMILIES}</label>
+				<div class="col-sm-6">
+					<label for="smilies1" class="radio-inline">
+						<input type="radio" name="smilies" id="smilies1" value="1" <!-- IF S_SMILIES --> checked="checked"<!-- ENDIF --> />
+						{L_YES}
+					</label>
+					<label for="smilies0" class="radio-inline">
+						<input type="radio" name="smilies" id="smilies0" value="0"<!-- IF not S_SMILIES --> checked="checked"<!-- ENDIF --> />
+						{L_NO}
+					</label>
+				</div>
 			</div>
-		</div>
-		<div class="form-group">
-			<span class="control-label">{L_VIEW_AVATARS}</span>
-			<div class="controls">
-				<label for="avatars1" class="radio-inline">
-					<input type="radio" name="avatars" id="avatars1" value="1" <!-- IF S_AVATARS --> checked="checked"<!-- ENDIF --> />
-					{L_YES}
-				</label>
-				<label for="avatars0" class="radio-inline">
-					<input type="radio" name="avatars" id="avatars0" value="0"<!-- IF not S_AVATARS --> checked="checked"<!-- ENDIF --> />
-					{L_NO}
-				</label>
+			<div class="form-group">
+				<label class="control-label col-sm-6">{L_VIEW_SIGS}</label>
+				<div class="col-sm-6">
+					<label for="sigs1" class="radio-inline">
+						<input type="radio" name="sigs" id="sigs1" value="1" <!-- IF S_SIGS --> checked="checked"<!-- ENDIF --> />
+						{L_YES}
+					</label>
+					<label for="sigs0" class="radio-inline">
+						<input type="radio" name="sigs" id="sigs0" value="0"<!-- IF not S_SIGS --> checked="checked"<!-- ENDIF --> />
+						{L_NO}
+					</label>
+				</div>
 			</div>
-		</div>
-		<!-- IF S_CHANGE_CENSORS -->
-		<div class="form-group">
-			<span class="control-label">{L_DISABLE_CENSORS}</span>
-			<div class="controls">
-				<label for="wordcensor1" class="radio-inline">
-					<input type="radio" name="wordcensor" id="wordcensor1" value="1" <!-- IF S_DISABLE_CENSORS --> checked="checked"<!-- ENDIF --> />
-					{L_YES}
-				</label>
-				<label for="wordcensor0" class="radio-inline">
-					<input type="radio" name="wordcensor" id="wordcensor0" value="0"<!-- IF not S_DISABLE_CENSORS --> checked="checked"<!-- ENDIF --> />
-					{L_NO}
-				</label>
+			<div class="form-group">
+				<label class="control-label col-sm-6">{L_VIEW_AVATARS}</label>
+				<div class="col-sm-6">
+					<label for="avatars1" class="radio-inline">
+						<input type="radio" name="avatars" id="avatars1" value="1" <!-- IF S_AVATARS --> checked="checked"<!-- ENDIF --> />
+						{L_YES}
+					</label>
+					<label for="avatars0" class="radio-inline">
+						<input type="radio" name="avatars" id="avatars0" value="0"<!-- IF not S_AVATARS --> checked="checked"<!-- ENDIF --> />
+						{L_NO}
+					</label>
+				</div>
 			</div>
-		</div>
-	</fieldset>
-	<!-- ENDIF -->
-	<hr />
-	<fieldset>
-		<div class="form-group">
-			<label class="control-label" for="topic_st">{L_VIEW_TOPICS_DAYS}</label>
-			<div class="controls">
-				{S_TOPIC_SORT_DAYS}
+			<!-- IF S_CHANGE_CENSORS -->
+			<div class="form-group">
+				<label class="control-label col-sm-6">{L_DISABLE_CENSORS}</label>
+				<div class="col-sm-6">
+					<label for="wordcensor1" class="radio-inline">
+						<input type="radio" name="wordcensor" id="wordcensor1" value="1" <!-- IF S_DISABLE_CENSORS --> checked="checked"<!-- ENDIF --> />
+						{L_YES}
+					</label>
+					<label for="wordcensor0" class="radio-inline">
+						<input type="radio" name="wordcensor" id="wordcensor0" value="0"<!-- IF not S_DISABLE_CENSORS --> checked="checked"<!-- ENDIF --> />
+						{L_NO}
+					</label>
+				</div>
 			</div>
-		</div>
-		<div class="form-group">
-			<label class="control-label" for="topic_sk">{L_VIEW_TOPICS_KEY}</label>
-			<div class="controls">
-				{S_TOPIC_SORT_KEY}
+		</fieldset>
+		<!-- ENDIF -->
+		<hr />
+		<fieldset>
+			<div class="form-group">
+				<label class="control-label col-sm-6" for="topic_st">{L_VIEW_TOPICS_DAYS}</label>
+				<div class="col-sm-6">
+					{S_TOPIC_SORT_DAYS}
+				</div>
 			</div>
-		</div>
-		<div class="form-group">
-			<label class="control-label" for="topic_sd">{L_VIEW_TOPICS_DIR}</label>
-			<div class="controls">
-				{S_TOPIC_SORT_DIR}
+			<div class="form-group">
+				<label class="control-label col-sm-6" for="topic_sk">{L_VIEW_TOPICS_KEY}</label>
+				<div class="col-sm-6">
+					{S_TOPIC_SORT_KEY}
+				</div>
 			</div>
-		</div>
-	</fieldset>
-	<hr />
-	<fieldset>
-		<div class="form-group">
-			<label class="control-label" for="post_st">{L_VIEW_POSTS_DAYS}</label>
-			<div class="controls">
-				{S_POST_SORT_DAYS}
+			<div class="form-group">
+				<label class="control-label col-sm-6" for="topic_sd">{L_VIEW_TOPICS_DIR}</label>
+				<div class="col-sm-6">
+					{S_TOPIC_SORT_DIR}
+				</div>
 			</div>
-		</div>
+		</fieldset>
+		<hr />
+		<fieldset>
 			<div class="form-group">
-			<label class="control-label" for="post_sk">{L_VIEW_POSTS_KEY}</label>
-			<div class="controls">
-				{S_POST_SORT_KEY}
+				<label class="control-label col-sm-6" for="post_st">{L_VIEW_POSTS_DAYS}</label>
+				<div class="col-sm-6">
+					{S_POST_SORT_DAYS}
+				</div>
 			</div>
-		</div>
-		<div class="form-group">
-			<label class="control-label" for="post_sd">{L_VIEW_POSTS_DIR}</label>
-			<div class="controls">
-				{S_POST_SORT_DIR}
+				<div class="form-group">
+				<label class="control-label col-sm-6" for="post_sk">{L_VIEW_POSTS_KEY}</label>
+				<div class="col-sm-6">
+					{S_POST_SORT_KEY}
+				</div>
 			</div>
-		</div>
-	</fieldset>
-
-	<fieldset class="form-actions">
+			<div class="form-group">
+				<label class="control-label col-sm-6" for="post_sd">{L_VIEW_POSTS_DIR}</label>
+				<div class="col-sm-6">
+					{S_POST_SORT_DIR}
+				</div>
+			</div>
+		</fieldset>
+	
+	</div>
+	<div class="panel-footer">
 		{S_HIDDEN_FIELDS}
-			<input type="reset" value="{L_RESET}" name="reset" class="btn btn-default" /> 
-			<input type="submit" name="submit" value="{L_SUBMIT}" class="btn btn-primary" />
-			{S_FORM_TOKEN}
-	</fieldset>
+		<fieldset class="btn-group">
+				<input type="reset" value="{L_RESET}" name="reset" class="btn btn-default" /> 
+				<input type="submit" name="submit" value="{L_SUBMIT}" class="btn btn-primary" />
+		</fieldset>
+		{S_FORM_TOKEN}
+	</div>
+</div>
+
+		
 </form>
 
 <!-- INCLUDE ucp_footer.html -->
\ No newline at end of file
diff --git a/phpBBBootstrap/template/ucp_profile_profile_info.html b/phpBBBootstrap/template/ucp_profile_profile_info.html
index c4fb04d..66f5f40 100644
--- a/phpBBBootstrap/template/ucp_profile_profile_info.html
+++ b/phpBBBootstrap/template/ucp_profile_profile_info.html
@@ -1,119 +1,125 @@
 <!-- INCLUDE ucp_header.html -->
 
-<form id="ucp" method="post" action="{S_UCP_ACTION}"{S_FORM_ENCTYPE} class="form form-horizontal">
-
-<h3><i class="icon-user"></i> {L_TITLE}</h3>
-
-	<p class="text-justify">{L_PROFILE_INFO_NOTICE}</p>
-
-	<fieldset>
-	<!-- IF ERROR --><p class="alert alert-block alert-danger">{ERROR}</p><!-- ENDIF -->
-	<div class="form-group">
-		<label class="control-label" for="icq">{L_UCP_ICQ}</label>
-		<div class="controls">
-	  		<div class="input-group">
-  				<span class="input-group-addon">@</span>
-  				<input type="text" name="icq" id="icq" maxlength="15" value="{ICQ}" class="" />
+<form id="ucp" method="post" action="{S_UCP_ACTION}"{S_FORM_ENCTYPE} class="form-horizontal">
+<div class="panel panel-default">
+	<div class="panel-heading"><h2 class="panel-title"><i class="icon-user"></i> {L_TITLE}</h2></div>
+	<div class="panel-body">
+		<p class="text-justify">{L_PROFILE_INFO_NOTICE}</p>
+	
+		<fieldset>
+			<!-- IF ERROR --><p class="alert alert-block alert-danger">{ERROR}</p><!-- ENDIF -->
+			<div class="form-group">
+				<label class="control-label col-sm-4" for="icq">{L_UCP_ICQ}</label>
+				<div class="col-sm-8">
+			  		<div class="input-group">
+		  				<div class="input-group-addon">@</div>
+		  				<input type="text" name="icq" id="icq" maxlength="15" value="{ICQ}" class="form-control" />
+					</div>
+				</div>
 			</div>
-		</div>
-	</div>
-	<div class="form-group">
-		<label class="control-label" for="aim">{L_UCP_AIM}</label>
-		<div class="controls">
-			<div class="input-group">
-  				<span class="input-group-addon">@</span>
-	  			<input type="text" name="aim" id="aim" maxlength="255" value="{AIM}" class="" />
-	  		</div>
-		</div>
-	</div>
-	<div class="form-group">
-		<label class="control-label" for="msn">{L_UCP_MSNM}</label>
-		<div class="controls">
-			<div class="input-group">
-  				<span class="input-group-addon"><i class="icon-skype"></i></span>
-	  			<input type="text" name="msn" id="msn" maxlength="255" value="{MSN}" class="" />
-	  		</div>
-		</div>
-	</div>
-	<div class="form-group">
-		<label class="control-label" for="yim">{L_UCP_YIM}</label>
-		<div class="controls">
-			<div class="input-group">
-  				<span class="input-group-addon"><i class="icon-yahoo"></i></span>
-		  		<input type="text" name="yim" id="yim" maxlength="255" value="{YIM}" class="" />
-		  	</div>
-		</div>
-	</div>
-	<div class="form-group">
-		<label class="control-label" for="jabber">{L_UCP_JABBER}</label>
-		<div class="controls">
-			<div class="input-group">
-  				<span class="input-group-addon">@</span>
-		  		<input type="text" name="jabber" id="jabber" maxlength="255" value="{JABBER}" class="" />
-		  	</div>
-		</div>
-	</div>
-	<div class="form-group">
-		<label class="control-label" for="website">{L_WEBSITE}</label>
-		<div class="controls">
-			<div class="input-group">
-  				<span class="input-group-addon"><i class="icon-link"></i></span>
-				<input type="text" name="website" id="website" maxlength="255" value="{WEBSITE}" class="" />
+			<div class="form-group">
+				<label class="control-label col-sm-4" for="aim">{L_UCP_AIM}</label>
+				<div class="col-sm-8">
+					<div class="input-group">
+		  				<div class="input-group-addon">@</div>
+			  			<input type="text" name="aim" id="aim" maxlength="255" value="{AIM}" class="form-control" />
+			  		</div>
+				</div>
 			</div>
-		</div>
-	</div>
-	<div class="form-group">
-		<label class="control-label" for="location">{L_LOCATION}</label>
-		<div class="controls">
-			<div class="input-group">
-  				<span class="input-group-addon"><i class="icon-globe"></i></span>
-		  		<input type="text" name="location" id="location" maxlength="255" value="{LOCATION}" class="" />
-		  	</div>
-		</div>
-	</div>
-	<div class="form-group">
-		<label class="control-label" for="occupation">{L_OCCUPATION}</label>
-		<div class="controls">
-	  		<textarea name="occupation" id="occupation" class="input-block-level" rows="3" cols="30">{OCCUPATION}</textarea>
-		</div>
-	</div>
-	<div class="form-group">
-		<label class="control-label" for="interests">{L_INTERESTS}</label>
-		<div class="controls">
-	  		<textarea name="interests" id="interests" class="input-block-level" rows="3" cols="30">{INTERESTS}</textarea>
-		</div>
-	</div>
-	<!-- IF S_BIRTHDAYS_ENABLED -->
-		<div class="form-group">
-			<label class="control-label" for="bday_day">{L_BIRTHDAY}</label>
-		<div class="controls form-inline">
-			<label for="bday_day">{L_DAY}: <select name="bday_day" id="bday_day" style="width: 4em;">{S_BIRTHDAY_DAY_OPTIONS}</select></label> 
-			<label for="bday_month">{L_MONTH}: <select name="bday_month" id="bday_month" style="width: 4em;">{S_BIRTHDAY_MONTH_OPTIONS}</select></label> 
-			<label for="bday_year">{L_YEAR}: <select name="bday_year" id="bday_year" style="width: 6em;">{S_BIRTHDAY_YEAR_OPTIONS}</select></label>
-			<span class="help-block"><em>{L_BIRTHDAY_EXPLAIN}</em></span>
-		</div>
-	</div>
-	<!-- ENDIF -->
-	<!-- BEGIN profile_fields -->
-		<div class="form-group <!-- IF profile_fields.ERROR -->error<!-- ENDIF -->">
-			<label class="control-label" for="<!-- IF profile_fields.FIELD_ID -->{profile_fields.FIELD_ID}<!-- ENDIF -->">{profile_fields.LANG_NAME}<!-- IF profile_fields.S_REQUIRED --> *<!-- ENDIF --></label>						
-			<div class="controls">			
-	  			{profile_fields.FIELD}
-	  			<!-- IF profile_fields.ERROR --><span class="help-inline">{profile_fields.ERROR}</span><!-- ENDIF -->
-	  			<!-- IF profile_fields.LANG_EXPLAIN --><span class="help-block"><em>{profile_fields.LANG_EXPLAIN}</em></span><!-- ENDIF -->
+			<div class="form-group">
+				<label class="control-label col-sm-4" for="msn">{L_UCP_MSNM}</label>
+				<div class="col-sm-8">
+					<div class="input-group">
+		  				<div class="input-group-addon"><i class="icon-skype"></i></div>
+			  			<input type="text" name="msn" id="msn" maxlength="255" value="{MSN}" class="form-control" />
+			  		</div>
+				</div>
 			</div>
-		</div>
-	<!-- END profile_fields -->
-	</fieldset>
-
-	<fieldset class="form-actions">
+			<div class="form-group">
+				<label class="control-label col-sm-4" for="yim">{L_UCP_YIM}</label>
+				<div class="col-sm-8">
+					<div class="input-group">
+		  				<div class="input-group-addon"><i class="icon-google-plus-square"></i></div>
+				  		<input type="text" name="yim" id="yim" maxlength="255" value="{YIM}" class="form-control" />
+				  	</div>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-4" for="jabber">{L_UCP_JABBER}</label>
+				<div class="col-sm-8">
+					<div class="input-group">
+		  				<div class="input-group-addon">@</div>
+				  		<input type="text" name="jabber" id="jabber" maxlength="255" value="{JABBER}" class="form-control" />
+				  	</div>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-4" for="website">{L_WEBSITE}</label>
+				<div class="col-sm-8">
+					<div class="input-group">
+		  				<div class="input-group-addon"><i class="icon-link"></i></div>
+						<input type="text" name="website" id="website" maxlength="255" value="{WEBSITE}" class="form-control" />
+					</div>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-4" for="location">{L_LOCATION}</label>
+				<div class="col-sm-8">
+					<div class="input-group">
+		  				<div class="input-group-addon"><i class="icon-globe"></i></div>
+				  		<input type="text" name="location" id="location" maxlength="255" value="{LOCATION}" class="form-control" />
+				  	</div>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-4" for="occupation">{L_OCCUPATION}</label>
+				<div class="col-sm-8">
+			  		<textarea name="occupation" id="occupation" class="form-control" rows="3">{OCCUPATION}</textarea>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-4" for="interests">{L_INTERESTS}</label>
+				<div class="col-sm-8">
+			  		<textarea name="interests" id="interests" class="form-control" rows="3">{INTERESTS}</textarea>
+				</div>
+			</div>
+			<!-- IF S_BIRTHDAYS_ENABLED -->
+				<div class="form-group">
+					<label class="control-label col-sm-4" for="bday_day">{L_BIRTHDAY}</label>
+				<div class="col-sm-8">
+					<div class="form-inline">
+					<label for="bday_day">{L_DAY}&nbsp;: <select name="bday_day" id="bday_day" class="form-control" >{S_BIRTHDAY_DAY_OPTIONS}</select></label>&nbsp; 
+					<label for="bday_month">{L_MONTH}&nbsp;: <select name="bday_month" id="bday_month" class="form-control" >{S_BIRTHDAY_MONTH_OPTIONS}</select></label>&nbsp; 
+					<label for="bday_year">{L_YEAR}&nbsp;: <select name="bday_year" id="bday_year" class="form-control" >{S_BIRTHDAY_YEAR_OPTIONS}</select></label>
+					<span class="help-block"><em>{L_BIRTHDAY_EXPLAIN}</em></span>
+					</div>
+				</div>
+			</div>
+			<!-- ENDIF -->
+			<!-- BEGIN profile_fields -->
+				<div class="form-group <!-- IF profile_fields.ERROR -->has-error<!-- ENDIF -->">
+					<label class="control-label col-sm-4" for="<!-- IF profile_fields.FIELD_ID -->{profile_fields.FIELD_ID}<!-- ENDIF -->">{profile_fields.LANG_NAME}<!-- IF profile_fields.S_REQUIRED --> *<!-- ENDIF --></label>						
+					<div class="col-sm-8">
+		  				{profile_fields.FIELD}
+			  			<!-- IF profile_fields.ERROR --><span class="help-block text-error">{profile_fields.ERROR}</span><!-- ENDIF -->
+			  			<!-- IF profile_fields.LANG_EXPLAIN --><span class="help-block"><em>{profile_fields.LANG_EXPLAIN}</em></span><!-- ENDIF -->
+					</div>
+				</div>
+			<!-- END profile_fields -->
+		</fieldset>
+	</div>
+	<div class="panel-footer">
 		{S_HIDDEN_FIELDS}
-		<div class="btn-group">
-			<button type="submit" name="submit" value="{L_SAVE}" class="btn btn-primary"><i class="icon-save"></i> {L_SAVE}</button>
-			<button type="reset" value="{L_RESET}" name="reset" class="btn btn-default"><i class="icon-repeat"></i> {L_RESET}</button>
-		</div>
+		<fieldset class="btn-group">
+				<button type="submit" name="submit" value="{L_SAVE}" class="btn btn-primary"><i class="icon-save"></i> {L_SAVE}</button>
+				<button type="reset" value="{L_RESET}" name="reset" class="btn btn-default"><i class="icon-repeat"></i> {L_RESET}</button>
+		</fieldset>
 		{S_FORM_TOKEN}
-	</fieldset>
+	</div>
+</div>
+
+
+
 </form>
 
 <!-- INCLUDE ucp_footer.html -->
\ No newline at end of file
diff --git a/phpBBBootstrap/template/ucp_profile_reg_details.html b/phpBBBootstrap/template/ucp_profile_reg_details.html
index 1113e87..17b3a2a 100644
--- a/phpBBBootstrap/template/ucp_profile_reg_details.html
+++ b/phpBBBootstrap/template/ucp_profile_reg_details.html
@@ -1,78 +1,82 @@
 <!-- INCLUDE ucp_header.html -->
 
 <form id="ucp" method="post" action="{S_UCP_ACTION}"{S_FORM_ENCTYPE} class="form-horizontal">
-
-<h3><i class="icon-cog"></i> {L_TITLE}</h3>
-
-<!-- IF S_FORCE_PASSWORD -->
-	<p>{L_FORCE_PASSWORD_EXPLAIN}</p>
-<!-- ENDIF -->
-
-<fieldset>
-	<!-- IF ERROR --><p class="alert alert-danger alert-block">{ERROR}</p><!-- ENDIF -->
-	<div class="form-group">
-		<label class="control-label" for="username">{L_USERNAME}</label>
-		<div class="controls">
-			<!-- IF S_CHANGE_USERNAME -->
-			<input type="text" name="username" id="username" class="input-xlarge" value="{USERNAME}" title="{L_USERNAME}" />
-			<!-- ELSE -->
-			<span class="input-xlarge uneditable-input">{USERNAME}</span>
-			<!-- ENDIF -->
-			<span class="help-block"><em>{L_USERNAME_EXPLAIN}</em></span>
-		</div>
-	</div>
-	<div class="form-group">
-		<label class="control-label" for="email">{L_EMAIL_ADDRESS}</label>
-		<div class="controls">
+<div class="panel panel-default">
+	<div class="panel-heading"><h2 class="panel-title"><i class="icon-cog"></i> {L_TITLE}</h2></div>
+	<div class="panel-body">
+		<!-- IF S_FORCE_PASSWORD -->
+		<p>{L_FORCE_PASSWORD_EXPLAIN}</p>
+		<!-- ENDIF -->
+		
+		<fieldset>
+			<!-- IF ERROR --><p class="alert alert-danger alert-block">{ERROR}</p><!-- ENDIF -->
+			<div class="form-group">
+				<label class="control-label col-sm-5" for="username">{L_USERNAME}</label>
+				<div class="col-sm-7">
+					<!-- IF S_CHANGE_USERNAME -->
+					<input type="text" name="username" id="username" class="form-control" value="{USERNAME}" title="{L_USERNAME}" />
+					<!-- ELSE -->
+					<span class="form-control uneditable-input">{USERNAME}</span>
+					<!-- ENDIF -->
+					<span class="help-block"><em>{L_USERNAME_EXPLAIN}</em></span>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-5" for="email">{L_EMAIL_ADDRESS}</label>
+				<div class="col-sm-7">
+					<!-- IF S_CHANGE_EMAIL -->
+					<input type="text" name="email" id="email" maxlength="100" value="{EMAIL}" class="form-control" title="{L_EMAIL_ADDRESS}" />
+					<!-- ELSE -->
+					<span class="form-control uneditable-input">{EMAIL}</span>
+					<!-- ENDIF -->
+				</div>
+			</div>
 			<!-- IF S_CHANGE_EMAIL -->
-			<input type="text" name="email" id="email" maxlength="100" value="{EMAIL}" class="input-xlarge" title="{L_EMAIL_ADDRESS}" />
-			<!-- ELSE -->
-			<span class="input-xlarge uneditable-input">{EMAIL}</span>
+			<div class="form-group">
+				<label class="control-label col-sm-5" for="email_confirm">{L_CONFIRM_EMAIL}</label>
+				<div class="col-sm-7">
+					<input type="text" name="email_confirm" id="email_confirm" maxlength="100" value="{CONFIRM_EMAIL}" class="form-control" title="{L_CONFIRM_EMAIL}" />
+					<span class="help-block">{L_CONFIRM_EMAIL_EXPLAIN}</span>
+				</div>
+			</div>
 			<!-- ENDIF -->
-		</div>
-	</div>
-	<!-- IF S_CHANGE_EMAIL -->
-	<div class="form-group">
-		<label class="control-label" for="email_confirm">{L_CONFIRM_EMAIL}</label>
-		<div class="controls">
-			<input type="text" name="email_confirm" id="email_confirm" maxlength="100" value="{CONFIRM_EMAIL}" class="input-xlarge" title="{L_CONFIRM_EMAIL}" />
-			<span class="help-block">{L_CONFIRM_EMAIL_EXPLAIN}</span>
-		</div>
-	</div>
-	<!-- ENDIF -->
-	<!-- IF S_CHANGE_PASSWORD -->
-	<div class="form-group">
-		<label class="control-label" for="new_password">{L_NEW_PASSWORD}</label>
-		<div class="controls">
-			<input type="password" name="new_password" id="new_password" maxlength="255" value="{NEW_PASSWORD}" class="input-xlarge" title="{L_CHANGE_PASSWORD}" />
-			<span class="help-block">{L_CHANGE_PASSWORD_EXPLAIN}</span>
-		</div>
+			<!-- IF S_CHANGE_PASSWORD -->
+			<div class="form-group">
+				<label class="control-label col-sm-5" for="new_password">{L_NEW_PASSWORD}</label>
+				<div class="col-sm-7">
+					<input type="password" name="new_password" id="new_password" maxlength="255" value="{NEW_PASSWORD}" class="form-control" title="{L_CHANGE_PASSWORD}" />
+					<span class="help-block">{L_CHANGE_PASSWORD_EXPLAIN}</span>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-5" for="new_password">{L_CONFIRM_PASSWORD}</label>
+				<div class="col-sm-7">
+					<input type="password" name="password_confirm" id="password_confirm" maxlength="255" value="{PASSWORD_CONFIRM}" class="form-control" title="{L_CONFIRM_PASSWORD}" />
+					<span class="help-block"><em>{L_CONFIRM_PASSWORD_EXPLAIN}</em></span>
+				</div>
+			</div>
+			<!-- ENDIF -->
+			<div class="form-group">
+				<label class="control-label col-sm-5" for="cur_password">{L_CURRENT_PASSWORD}</label>
+				<div class="col-sm-7">
+					<input type="password" name="cur_password" id="cur_password" maxlength="255" value="{CUR_PASSWORD}" class="form-control" title="{L_CURRENT_PASSWORD}" />
+					<span class="help-block"><em><!-- IF S_CHANGE_PASSWORD -->{L_CURRENT_CHANGE_PASSWORD_EXPLAIN}<!-- ELSE -->{L_CURRENT_PASSWORD_EXPLAIN}<!-- ENDIF --></em></span>
+				</div>
+			</div>
+		</fieldset>
 	</div>
-	<div class="form-group">
-		<label class="control-label" for="new_password">{L_CONFIRM_PASSWORD}</label>
-		<div class="controls">
-			<input type="password" name="password_confirm" id="password_confirm" maxlength="255" value="{PASSWORD_CONFIRM}" class="input-xlarge" title="{L_CONFIRM_PASSWORD}" />
-			<span class="help-block"><em>{L_CONFIRM_PASSWORD_EXPLAIN}</em></span>
-		</div>
+	<div class="panel-footer">
+		{S_HIDDEN_FIELDS}
+		<fieldset class="btn-group">
+			<input type="reset" value="{L_RESET}" name="reset" class="btn btn-default" />
+			<input type="submit" name="submit" value="{L_SUBMIT}" class="btn btn-primary" />
+		</fieldset>
+		{S_FORM_TOKEN}	
 	</div>
-	<!-- ENDIF -->
-	</fieldset>
-	<fieldset>
-		<div class="form-group">
-			<label class="control-label" for="cur_password">{L_CURRENT_PASSWORD}</label>
-			<div class="controls">
-				<input type="password" name="cur_password" id="cur_password" maxlength="255" value="{CUR_PASSWORD}" class="input-xlarge" title="{L_CURRENT_PASSWORD}" />
-				<span class="help-block"><em><!-- IF S_CHANGE_PASSWORD -->{L_CURRENT_CHANGE_PASSWORD_EXPLAIN}<!-- ELSE -->{L_CURRENT_PASSWORD_EXPLAIN}<!-- ENDIF --></em></span>
-			</div>
-		</div>
-	</fieldset>
+</div>
 
-	<fieldset class="form-actions">
-		{S_HIDDEN_FIELDS}
-		<input type="reset" value="{L_RESET}" name="reset" class="btn btn-default" />
-		<input type="submit" name="submit" value="{L_SUBMIT}" class="btn btn-primary" />
-		{S_FORM_TOKEN}
-	</fieldset>
+		
+	
 </form>
 
 <!-- INCLUDE ucp_footer.html -->
\ No newline at end of file
diff --git a/phpBBBootstrap/template/ucp_zebra_foes.html b/phpBBBootstrap/template/ucp_zebra_foes.html
index b5b0070..34c49a6 100644
--- a/phpBBBootstrap/template/ucp_zebra_foes.html
+++ b/phpBBBootstrap/template/ucp_zebra_foes.html
@@ -2,38 +2,44 @@
 
 <form id="ucp" method="post" action="{S_UCP_ACTION}"{S_FORM_ENCTYPE} class="form form-horizontal">
 
-<h2><i class="icon-user"></i> {L_TITLE}</h2>
-
-	<p class="text-justify">{L_FOES_EXPLAIN}</p>
-
-	<fieldset>
-	<!-- IF ERROR --><p class="alert alert-danger alert-block">{ERROR}</p><!-- ENDIF -->
-	<div class="form-group">
-		<label class="control-label" for="<!-- IF S_USERNAME_OPTIONS -->usernames<!-- ENDIF -->">{L_YOUR_FOES}</label>
-		<div class="controls">
-			<!-- IF S_USERNAME_OPTIONS -->
-				<select name="usernames[]" id="usernames" multiple="multiple" size="5">{S_USERNAME_OPTIONS}</select>
-			<!-- ELSE -->
-				<strong>{L_NO_FOES}</strong>
-			<!-- ENDIF -->
-			<span class="help-block">{L_YOUR_FOES_EXPLAIN}</span>
-		</div>
+<div class="panel panel-default">
+	<div class="panel-heading"><h2 class="panel-title"><i class="icon-user"></i> {L_TITLE}</h2></div>
+	<div class="panel-body">
+		<p class="text-justify">{L_FOES_EXPLAIN}</p>
+	
+		<fieldset>
+			<!-- IF ERROR --><p class="alert alert-danger alert-block">{ERROR}</p><!-- ENDIF -->
+			<div class="form-group">
+				<label class="control-label col-sm-4" for="<!-- IF S_USERNAME_OPTIONS -->usernames<!-- ENDIF -->">{L_YOUR_FOES}</label>
+				<div class="col-sm-8">
+					<!-- IF S_USERNAME_OPTIONS -->
+						<select name="usernames[]" id="usernames" class="form-control" multiple="multiple" size="5">{S_USERNAME_OPTIONS}</select>
+					<!-- ELSE -->
+						<strong>{L_NO_FOES}</strong>
+					<!-- ENDIF -->
+					<span class="help-block">{L_YOUR_FOES_EXPLAIN}</span>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-4" for="add">{L_ADD_FOES}</label>
+				<div class="col-sm-8">
+					<textarea name="add" id="add" rows="3" cols="30" class="form-control">{USERNAMES}</textarea>
+					<span class="help-block"><strong><a href="{U_FIND_USERNAME}" onclick="find_username(this.href); return false;"><i class="icon-search"></i> {L_FIND_USERNAME}</a></strong></span>
+					<span class="help-block">{L_ADD_FOES_EXPLAIN}</span>
+				</div>
+			</div>
+		</fieldset>
 	</div>
-	<div class="form-group">
-		<label class="control-label" for="add">{L_ADD_FOES}</label>
-		<div class="controls">
-			<textarea name="add" id="add" rows="3" cols="30" class="inputbox">{USERNAMES}</textarea>
-			<span class="help-inline"><strong><a href="{U_FIND_USERNAME}" onclick="find_username(this.href); return false;"><i class="icon-search"></i> {L_FIND_USERNAME}</a></strong></span>
-			<span class="help-block">{L_ADD_FOES_EXPLAIN}</span>
-		</div>
+	<div class="panel-footer">
+		{S_HIDDEN_FIELDS}
+		<fieldset class="btn-group">
+			<input type="reset" value="{L_RESET}" name="reset" class="btn btn-default" /> 
+			<input type="submit" name="submit" value="{L_SUBMIT}" class="btn btn-primary" />
+		</fieldset>
+		{S_FORM_TOKEN}
 	</div>
-	</fieldset>
+</div>
 
-<fieldset class="form-actions">
-	{S_HIDDEN_FIELDS}<input type="reset" value="{L_RESET}" name="reset" class="btn btn-default" /> 
-	<input type="submit" name="submit" value="{L_SUBMIT}" class="btn btn-default" />
-	{S_FORM_TOKEN}
-</fieldset>
 </form>
 
 <!-- INCLUDE ucp_footer.html -->
\ No newline at end of file
diff --git a/phpBBBootstrap/template/ucp_zebra_friends.html b/phpBBBootstrap/template/ucp_zebra_friends.html
index 7c979c4..2140491 100644
--- a/phpBBBootstrap/template/ucp_zebra_friends.html
+++ b/phpBBBootstrap/template/ucp_zebra_friends.html
@@ -1,40 +1,44 @@
 <!-- INCLUDE ucp_header.html -->
 
 <form id="ucp" method="post" action="{S_UCP_ACTION}"{S_FORM_ENCTYPE} class="form form-horizontal">
-
-<h2><i class="icon-user"></i> {L_TITLE}</h2>
-
-	<p class="text-justify">{L_FRIENDS_EXPLAIN}</p>
-
-	<fieldset>
-	<!-- IF ERROR --><p class="alert alert-danger alert-block">{ERROR}</p><!-- ENDIF -->
+<div class="panel panel-default">
+	<div class="panel-heading"><h2 class="panel-title"><i class="icon-user"></i> {L_TITLE}</h2></div>
+	<div class="panel-body">
+		<p class="text-justify">{L_FRIENDS_EXPLAIN}</p>
 	
-	<div class="form-group">
-		<label class="control-label" for="<!-- IF S_USERNAME_OPTIONS -->usernames<!-- ENDIF -->">{L_YOUR_FRIENDS}</label>
-		<div class="controls">
-			<!-- IF S_USERNAME_OPTIONS -->
-				<select name="usernames[]" id="usernames" multiple="multiple" size="5">{S_USERNAME_OPTIONS}</select>
-			<!-- ELSE -->
-				<strong>{L_NO_FRIENDS}</strong>
-			<!-- ENDIF -->
-			<span class="help-block">{L_YOUR_FRIENDS_EXPLAIN}</span>
-		</div>
+		<fieldset>
+			<!-- IF ERROR --><p class="alert alert-danger alert-block">{ERROR}</p><!-- ENDIF -->
+			
+			<div class="form-group">
+				<label class="control-label col-sm-4" for="<!-- IF S_USERNAME_OPTIONS -->usernames<!-- ENDIF -->">{L_YOUR_FRIENDS}</label>
+				<div class="col-sm-8">
+					<!-- IF S_USERNAME_OPTIONS -->
+						<select class="form-control" name="usernames[]" id="usernames" multiple="multiple" size="5">{S_USERNAME_OPTIONS}</select>
+					<!-- ELSE -->
+						<strong>{L_NO_FRIENDS}</strong>
+					<!-- ENDIF -->
+					<span class="help-block">{L_YOUR_FRIENDS_EXPLAIN}</span>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="control-label col-sm-4" for="add">{L_ADD_FRIENDS}</label>
+				<div class="col-sm-8">
+					<textarea name="add" id="add" rows="3" cols="30" class="form-control">{USERNAMES}</textarea>
+					<span class="help-inline"><strong><a href="{U_FIND_USERNAME}" onclick="find_username(this.href); return false;"><i class="icon-search"></i> {L_FIND_USERNAME}</a></strong></span>
+					<span class="help-block">{L_ADD_FRIENDS_EXPLAIN}</span>
+				</div>
+			</div>
+		</fieldset>	
 	</div>
-	<div class="form-group">
-		<label class="control-label" for="add">{L_ADD_FRIENDS}</label>
-		<div class="controls">
-			<textarea name="add" id="add" rows="3" cols="30" class="inputbox">{USERNAMES}</textarea>
-			<span class="help-inline"><strong><a href="{U_FIND_USERNAME}" onclick="find_username(this.href); return false;"><i class="icon-search"></i> {L_FIND_USERNAME}</a></strong></span>
-			<span class="help-block">{L_ADD_FRIENDS_EXPLAIN}</span>
-		</div>
+	<div class="panel-footer">
+		{S_HIDDEN_FIELDS}
+		<fieldset class="btn-group">
+			<input type="reset" value="{L_RESET}" name="reset" class="btn btn-default" /> 
+			<input type="submit" name="submit" value="{L_SUBMIT}" class="btn btn-primary" />	
+		</fieldset>
+		{S_FORM_TOKEN}
 	</div>
-	</fieldset>
-
-<fieldset class="form-actions">
-	{S_HIDDEN_FIELDS}<input type="reset" value="{L_RESET}" name="reset" class="btn btn-default" /> 
-	<input type="submit" name="submit" value="{L_SUBMIT}" class="btn btn-default" />
-	{S_FORM_TOKEN}
-</fieldset>
+</div>
 </form>
 
 <!-- INCLUDE ucp_footer.html -->
\ No newline at end of file
diff --git a/phpBBBootstrap/theme/initialisation.js b/phpBBBootstrap/theme/initialisation.js
index 98554b6..d867dd3 100644
--- a/phpBBBootstrap/theme/initialisation.js
+++ b/phpBBBootstrap/theme/initialisation.js
@@ -126,6 +126,15 @@ function sort_desc_sd(){
     $('select#st').addClass('form-control ');
     $('select#sk').addClass('form-control ');
     $('select#sd').addClass('sr-only');
+    
+    //@todo Optimiser pour ne le faire que si nécessaire (en même temps on pourrait ajouter cette classe à tous les select...)
+	$("select[name='topic_st']").addClass('form-control');
+	$("select[name='topic_sk']").addClass('form-control');
+	$("select[name='topic_sd']").addClass('form-control');
+	$("select[name='post_st']").addClass('form-control');
+	$("select[name='post_sk']").addClass('form-control');
+	$("select[name='post_sd']").addClass('form-control');
+
 
   })
 }(window.jQuery)
\ No newline at end of file