Modal Tile And Search: Default

<!-- Button trigger modal -->
<button class="button-primary button-default button-default-size" onclick="this.blur();" data-toggle="modal" data-target="#exampleModalCenter"> Modal search</button>
<!-- Modal -->
<div class="movu-modal-search modal fade modal-dialog modal-dialog-centered in" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-headline">modal headline</h3>
            <div class="around-close pull-right" class="close" data-dismiss="modal" aria-label="Close">
                <i class="material-icons pull-right">close</i>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="search-box">
                    <div class="form-group has-search">
                        <i class="material-icons pull-left">search</i>
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                </div>
            </div>
        </div>
        <div class="row hidden-xs">
            <div class="items">
                <div class="col-xs-6 col-sm-4 no-padding-right">
                    <div class="item-box">
                        <span class="item-icon"><i class="material-icons">crop_original</i></span>
                        <h4 class="item-title">TITLE LABEL</h4>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-4 padding-7-left padding-7-right">
                    <div class="item-box">
                        <span class="item-icon"><i class="material-icons">crop_original</i></span>
                        <h4 class="item-title">TITLE LABEL</h4>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-4 no-padding-left">
                    <div class="item-box">
                        <span class="item-icon"><i class="material-icons">crop_original</i></span>
                        <h4 class="item-title">TITLE LABEL</h4>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-4 no-padding-right">
                    <div class="item-box">
                        <span class="item-icon"><i class="material-icons">crop_original</i></span>
                        <h4 class="item-title">TITLE LABEL</h4>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-4 padding-7-left padding-7-right">
                    <div class="item-box">
                        <span class="item-icon"><i class="material-icons">crop_original</i></span>
                        <h4 class="item-title">TITLE WITH AN EXTRAMLEY LONG LABEL</h4>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-4 no-padding-left">
                    <div class="item-box">
                        <span class="item-icon"><i class="material-icons">crop_original</i></span>
                        <h4 class="item-title">TITLE LABEL</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="row visible-xs">
            <div class="items">
                <div class="col-xs-6 padding-4-right">
                    <div class="item-box">
                        <span class="item-icon"><i class="material-icons">crop_original</i></span>
                        <h4 class="item-title">TITLE LABEL</h4>
                    </div>
                </div>
                <div class="col-xs-6 padding-4-left">
                    <div class="item-box">
                        <span class="item-icon"><i class="material-icons">crop_original</i></span>
                        <h4 class="item-title">TITLE LABEL</h4>
                    </div>
                </div>
                <div class="col-xs-6 padding-4-right">
                    <div class="item-box">
                        <span class="item-icon"><i class="material-icons">crop_original</i></span>
                        <h4 class="item-title">TITLE WITH AN EXTRAMLEY LONG LABEL</h4>
                    </div>
                </div>
                <div class="col-xs-6 padding-4-left">
                    <div class="item-box">
                        <span class="item-icon"><i class="material-icons">crop_original</i></span>
                        <h4 class="item-title">TITLE LABEL</h4>
                    </div>
                </div>
                <div class="col-xs-6 padding-4-right">
                    <div class="item-box">
                        <span class="item-icon"><i class="material-icons">crop_original</i></span>
                        <h4 class="item-title">TITLE LABEL</h4>
                    </div>
                </div>
                <div class="col-xs-6 padding-4-left">
                    <div class="item-box">
                        <span class="item-icon"><i class="material-icons">crop_original</i></span>
                        <h4 class="item-title">TITLE LABEL</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>