This Joomla 4 override allows you to display a login form stylished with Bootstrap 4 simply using Joomla's mod_login module. At the bottom of this article, you can download the files of the override.

Joomla 4 frontend rendering

PhP markup

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_login
 * @author	    web-eau.net
 * @copyright   (C) 2006 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\Component\ComponentHelper;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Plugin\PluginHelper;
use Joomla\CMS\Router\Route;

$app->getDocument()->getWebAssetManager()
	->useScript('core')
	->useScript('keepalive')
	->useScript('field.passwordview');

Text::script('JSHOWPASSWORD');
Text::script('JHIDEPASSWORD');
?>

<div class="container h-100">
	<div class="d-flex justify-content-center h-100">
		<div class="user_card">
			
			<div class="d-flex justify-content-center mb-2">
				<div class="brand_logo_container">
					<i class="pt-4 mt-2 fab fa-joomla fa-5x"></i> 		
				</div>
			</div>
			
			<div class="d-flex justify-content-center form_container">
				
				<form action="<?php echo JRoute::_('index.php', true, $params->get('usesecure', 0)); ?>" method="post" id="login-form" class="text-center form-inline">
				
					<!-- Username --->
					<div class="input-group text-center my-3">
						<?php if (!$params->get('usetext', 0)) : ?>
						<div class="input-prepend">
							<span class="add-on">
								<span class="icon-user hasTooltip" title="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME'); ?>"></span>
							</span>
							<input id="modlgn-username" type="text" name="username" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME'); ?>" />
						</div>
						<?php else : ?>
						<input id="modlgn-username" type="text" name="username" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME'); ?>" />
						<?php endif; ?>
					</div>
					
					<!-- Password -->
					<div class="input-group text-center mb-3">
						<?php if (!$params->get('usetext', 0)) : ?>
						<div class="input-prepend">
							<span class="add-on">
								<span class="icon-lock hasTooltip" title="<?php echo JText::_('JGLOBAL_PASSWORD'); ?>">
								</span>
							</span>
							<input id="modlgn-passwd" type="password" name="password" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('JGLOBAL_PASSWORD'); ?>" />
						</div>
						<?php else : ?>
						<input id="modlgn-passwd" type="password" name="password" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('JGLOBAL_PASSWORD'); ?>" />
						<?php endif; ?>
					</div>

					<?php if (count($twofactormethods) > 1) : ?>
					<div id="form-login-secretkey" class="control-group">
						<div class="controls">
							<?php if (!$params->get('usetext', 0)) : ?>
							<div class="input-prepend input-append">
								<span class="add-on">
									<span class="icon-star hasTooltip" title="<?php echo JText::_('JGLOBAL_SECRETKEY'); ?>">
									</span>
									<label for="modlgn-secretkey" class="element-invisible"><?php echo JText::_('JGLOBAL_SECRETKEY'); ?>
									</label>
								</span>
								<input id="modlgn-secretkey" autocomplete="off" type="text" name="secretkey" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('JGLOBAL_SECRETKEY'); ?>" />
								<span class="btn width-auto hasTooltip" title="<?php echo JText::_('JGLOBAL_SECRETKEY_HELP'); ?>">
									<span class="icon-help"></span>
								</span>
							</div>
							<?php else : ?>
							<label for="modlgn-secretkey"><?php echo JText::_('JGLOBAL_SECRETKEY'); ?></label>
							<input id="modlgn-secretkey" autocomplete="off" type="text" name="secretkey" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('JGLOBAL_SECRETKEY'); ?>" />
							<span class="btn width-auto hasTooltip" title="<?php echo JText::_('JGLOBAL_SECRETKEY_HELP'); ?>">
								<span class="icon-help"></span>
							</span>
							<?php endif; ?>
							
						</div>
					</div>
					<?php endif; ?>		
					
					<!-- Remember me -->
					<div class="form-group pt-2 text-center">
						<div class="custom-control custom-checkbox text-center">
						<?php if (JPluginHelper::isEnabled('system', 'remember')) : ?>
						<div id="form-login-remember" class="text-center control-group checkbox">
							<label for="modlgn-remember" class="control-label"><?php echo JText::_('MOD_LOGIN_REMEMBER_ME'); ?><input id="modlgn-remember" type="checkbox" name="remember" class="inputbox ml-3" value="yes"/></label> 							
						</div>
						<?php endif; ?>
						</div>
					</div>
					
					<!-- Login button -->
					<div class="d-flex ml-5 pl-4 mx-auto text-center pt-2 login_container">
						<button type="button" name="button" class="btn btn-sm btn-primary login_btn"><?php echo JText::_('JLOGIN'); ?></button>
					</div>
					
					<!-- Links -->
					<div class="my-3 text-center">
						<?php
						$usersConfig = JComponentHelper::getParams('com_users'); ?>
						
						<?php if ($usersConfig->get('allowUserRegistration')) : ?>	
						<div class="d-flex text-center links">
							<a href="<?php echo JRoute::_('index.php?option=com_users&view=registration'); ?>">
							<?php echo JText::_('MOD_LOGIN_REGISTER'); ?> <span class="icon-arrow-right"></span></a>
						</div>
						<?php endif; ?>
						
						<div class="d-flex justify-content-center links">
							<a href="<?php echo JRoute::_('index.php?option=com_users&view=remind'); ?>">
							<?php echo JText::_('MOD_LOGIN_FORGOT_YOUR_USERNAME'); ?></a>
						</div>
						<div class="d-flex justify-content-center links">
							<a href="<?php echo JRoute::_('index.php?option=com_users&view=reset'); ?>">
							<?php echo JText::_('MOD_LOGIN_FORGOT_YOUR_PASSWORD'); ?></a>						
						</div>						
					</div>
					
						<input type="hidden" name="option" value="com_users" />
						<input type="hidden" name="task" value="user.login" />
						<input type="hidden" name="return" value="<?php echo $return; ?>" />
						<?php echo JHtml::_('form.token'); ?>
				</form>
				
			</div>				
		</div>
	</div>
</div>

CSS

.user_card {
	height: 400px;
	width: 300px;
	margin-top: auto;
	margin-bottom: auto;
	background: #B2DBFF;
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 5px;	
}
.brand_logo_container {
	position: absolute;
	height: 150px;
	width: 150px;
	top: -55px;
	border-radius: 50%;
	background: #fff;
	text-align: center;
	color: #17568C;
  	border: 1px solid #B2DBFF;
}
.brand_logo {
	height: 150px;
	width: 150px;
	border-radius: 50%;
	border: 2px solid white;
}
.form_container {
	margin-top: 100px;
}
.login_btn {
	width: 100%;
	background: #17568C;
	color: white;
}
.login_btn:focus {
	box-shadow: none;
	outline: 0px;
}
.login_container {
	padding: 0 2rem;
}
.input-group-text {
	background: #17568C;
	color: white;
	border: 0;
	border-radius: 0.25rem 0 0 0.25rem;
}
.input_user,
.input_pass:focus {
	box-shadow: none;
	outline: 0px;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
	background-color: #c0392b;
}

This Joomla 3 override allows you to display a login form stylished with Bootstrap 4 simply using Joomla's mod_login module. At the bottom of this article, you can download the files of the override.

Joomla 3 frontend rendering

PhP markup

<?php
	/**
		* @package     Joomla.Site
		* @subpackage  mod_login
		* @Author	   web-eau.net
		* @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
		* @license     GNU General Public License version 2 or later; see LICENSE.txt
	*/
	
	defined('_JEXEC') or die;
	
	JLoader::register('UsersHelperRoute', JPATH_SITE . '/components/com_users/helpers/route.php');
	
	JHtml::_('behavior.keepalive');
	JHtml::_('bootstrap.tooltip');
	
?>

<div class="container h-100">
	<div class="d-flex justify-content-center h-100">
		<div class="user_card">
			
			<div class="d-flex justify-content-center">
				<div class="brand_logo_container">
					<i class="pt-4 mt-2 fa fa-joomla fa-5x"></i> 		
				</div>
			</div>
			
			<div class="d-flex justify-content-center form_container">
				
				<form action="<?php echo JRoute::_('index.php', true, $params->get('usesecure', 0)); ?>" method="post" id="login-form" class="text-center form-inline">
					
					<!-- Username --->
					<div class="input-group text-center my-3">
						<div class="input-group-append ml-4">
							<span class="input-group-text"><i class="fa fa-user"></i></span>
						</div>
						<?php if (!$params->get('usetext', 0)) : ?>
						<div class="input-prepend">
							<span class="add-on">
								<span class="icon-user hasTooltip" title="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME'); ?>"></span>
							</span>
							<input id="modlgn-username" type="text" name="username" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME'); ?>" />
						</div>
						<?php else : ?>
						<input id="modlgn-username" type="text" name="username" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME'); ?>" />
						<?php endif; ?>
					</div>
					
					<!-- Password -->
					<div class="input-group text-center mb-3">
						<div class="input-group-append ml-4">
							<span class="input-group-text"><i class="fa fa-key"></i></span>
						</div>
						<?php if (!$params->get('usetext', 0)) : ?>
						<div class="input-prepend">
							<span class="add-on">
								<span class="icon-lock hasTooltip" title="<?php echo JText::_('JGLOBAL_PASSWORD'); ?>">
								</span>
							</span>
							<input id="modlgn-passwd" type="password" name="password" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('JGLOBAL_PASSWORD'); ?>" />
						</div>
						<?php else : ?>
						<input id="modlgn-passwd" type="password" name="password" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('JGLOBAL_PASSWORD'); ?>" />
						<?php endif; ?>
					</div>
					
					<?php if (count($twofactormethods) > 1) : ?>
					<div id="form-login-secretkey" class="control-group">
						<div class="controls">
							<?php if (!$params->get('usetext', 0)) : ?>
							<div class="input-prepend input-append">
								<span class="add-on">
									<span class="icon-star hasTooltip" title="<?php echo JText::_('JGLOBAL_SECRETKEY'); ?>">
									</span>
									<label for="modlgn-secretkey" class="element-invisible"><?php echo JText::_('JGLOBAL_SECRETKEY'); ?>
									</label>
								</span>
								<input id="modlgn-secretkey" autocomplete="off" type="text" name="secretkey" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('JGLOBAL_SECRETKEY'); ?>" />
								<span class="btn width-auto hasTooltip" title="<?php echo JText::_('JGLOBAL_SECRETKEY_HELP'); ?>">
									<span class="icon-help"></span>
								</span>
							</div>
							<?php else : ?>
							<label for="modlgn-secretkey"><?php echo JText::_('JGLOBAL_SECRETKEY'); ?></label>
							<input id="modlgn-secretkey" autocomplete="off" type="text" name="secretkey" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('JGLOBAL_SECRETKEY'); ?>" />
							<span class="btn width-auto hasTooltip" title="<?php echo JText::_('JGLOBAL_SECRETKEY_HELP'); ?>">
								<span class="icon-help"></span>
							</span>
							<?php endif; ?>
							
						</div>
					</div>
					<?php endif; ?>		
					
					<!-- Remember me -->
					<div class="form-group pt-2 text-center">
						<div class="custom-control custom-checkbox text-center">
							<?php if (JPluginHelper::isEnabled('system', 'remember')) : ?>
							<div id="form-login-remember" class="text-center control-group checkbox">
								<label for="modlgn-remember" class="control-label"><?php echo JText::_('MOD_LOGIN_REMEMBER_ME'); ?><input id="modlgn-remember" type="checkbox" name="remember" class="inputbox ml-3" value="yes"/></label> 							
							</div>
							<?php endif; ?>
						</div>
					</div>
					
					<!-- Login button -->
					<div class="d-flex ml-5 pl-4 text-center pt-2 login_container">
						<button type="button" name="button" class="btn login_btn"><?php echo JText::_('JLOGIN'); ?></button>
					</div>
					
					<!-- Links -->
					<div class="mt-3 text-center">
						<?php
						$usersConfig = JComponentHelper::getParams('com_users'); ?>
						
						<?php if ($usersConfig->get('allowUserRegistration')) : ?>	
						<div class="d-flex text-center links">
							<a href="/<?php echo JRoute::_('index.php?option=com_users&view=registration'); ?>">
							<?php echo JText::_('MOD_LOGIN_REGISTER'); ?> <span class="icon-arrow-right"></span></a>
						</div>
						<?php endif; ?>
						
						<div class="d-flex pl-4 text-center links">
							<a href="/<?php echo JRoute::_('index.php?option=com_users&view=remind'); ?>">
							<?php echo JText::_('MOD_LOGIN_FORGOT_YOUR_USERNAME'); ?></a>
						</div>
						<div class="d-flex pl-4 text-center links">
							<a href="/<?php echo JRoute::_('index.php?option=com_users&view=reset'); ?>">
							<?php echo JText::_('MOD_LOGIN_FORGOT_YOUR_PASSWORD'); ?></a>						
						</div>						
					</div>
					
					<input type="hidden" name="option" value="com_users" />
					<input type="hidden" name="task" value="user.login" />
					<input type="hidden" name="return" value="<?php echo $return; ?>" />
					<?php echo JHtml::_('form.token'); ?>
				</form>
				
			</div>				
		</div>
	</div>
</div>

CSS

.user_card {
	height: 400px;
	width: 300px;
	margin-top: auto;
	margin-bottom: auto;
	background: #B2DBFF;
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 5px;	
}
.brand_logo_container {
	position: absolute;
	height: 150px;
	width: 150px;
	top: -55px;
	border-radius: 50%;
	background: #fff;
	text-align: center;
	color: #17568C;
  	border: 1px solid #B2DBFF;
}
.brand_logo {
	height: 150px;
	width: 150px;
	border-radius: 50%;
	border: 2px solid white;
}
.form_container {
	margin-top: 100px;
}
.login_btn {
	width: 100%;
	background: #17568C;
	color: white;
}
.login_btn:focus {
	box-shadow: none;
	outline: 0px;
}
.login_container {
	padding: 0 2rem;
}
.input-group-text {
	background: #17568C;
	color: white;
	border: 0;
	border-radius: 0.25rem 0 0 0.25rem;
}
.input_user,
.input_pass:focus {
	box-shadow: none;
	outline: 0px;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
	background-color: #c0392b;
}

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net