Search with Bootstrap 4

: mod_search

Live Demo 

Markup


<?php
defined ('_JEXEC') or die();
?>
<div class="container">
	<div class="row justify-content-center">
		<div class="col-12 col-md-10 col-lg-8">
  		<div class="search">
  
  
	<form class="card card-sm" action="<?php echo JRoute::_('index.php'); ?>" method="post">
		<div class="card-body row no-gutters align-items-center">
    
  			<?php
  			
  			$input  = '<div class="mt-1 col-auto"><i class="fa fa-search fa-2x h4 text-body"></i></div><div class="col"><input name="searchword" id="mod-search-searchword' . $module->id . '" class="form-control-lg form-control-borderless form-control" type="search" placeholder="' . $text . '"></div>';
			$output = '';
			
            
			if ($button) :
				if ($imagebutton) :
					$btn_output = '<div class="col-auto"><i class="fa fa-search fa-2x h4 text-body"></i></div><div class="col"><input type="image" alt="' . $button_text . '" class="btn btn-primary" src="' . $img . '" onclick="this.form.searchword.focus();"></div>';
				else :
					$btn_output = '<button class="btn btn-lg btn-success" onclick="this.form.searchword.focus();">' . $button_text . '</button>';
				endif;

				$output .= '<div class="input-group">';
				$output .= $input;
				$output .= '<div class="col-auto"><span class="input-group-btn">';
				$output .= $btn_output;
				$output .= '</span></div>';
				$output .= '</div>';
			else :
				$output .= $input;
			endif;

			echo $output;
		?>
		<input type="hidden" name="task" value="search">
		<input type="hidden" name="option" value="com_search">
		<input type="hidden" name="Itemid" value="<?php echo $mitemid; ?>">
	</div>
    </form>
          
</div>
          </div>
          </div>
          </div>

CSS

.form-control-borderless {
    border: none;
}

.form-control-borderless:hover, .form-control-borderless:active, .form-control-borderless:focus {
    border: none;
    outline: none;
    box-shadow: none;
}
A PROPOS DE L'AUTEUR :
Webmaster freelance passionné par Joomla depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Daniel est également très impliqué dans la communauté Joomla depuis 2014 en étant membre actif de plusieurs projets, conférencier et fondateur du JUG Breizh.