---
title: Action Wrappers
layout: nested-component.html
---
<form class="form-inline search-form">
    <div class="form-group action-wrapper">
        <button class="btn btn-transparent action-wrap-action action-wrap-left">
            <i class="fa fa-search"></i>
        </button>
        <input type="text" placeholder="Search" class="form-control action-wrap-item action-wrap-left" id="searchInput"/>
    </div>
</form>
<form class="form-inline search-form">
    <div class="form-group action-wrapper">
        <button class="btn btn-transparent action-wrap-action action-wrap-right">
            <i class="fa fa-search"></i>
        </button>
        <input type="text" placeholder="Search" class="form-control action-wrap-item action-wrap-right" id="searchInput"/>
    </div>
</form>
<form class="form-inline search-form">
    <div class="form-group action-wrapper">
        <button class="btn btn-transparent action-wrap-action action-wrap-left">
            <i class="fa fa-search"></i>
        </button>
        <button class="btn btn-transparent action-wrap-action action-wrap-right">
            <i class="fa fa-times"></i>
        </button>
        <input type="text" placeholder="Search" class="form-control action-wrap-item action-wrap-left action-wrap-right" id="searchInput"/>
    </div>
</form>