Bootstrap List Group Horizontal


	<div class="container">
	<div class="row" style="padding-top:50px">
		
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 text-center">

            <div class="list-group list-group-horizontal">
                <a href="javascript:;" class="list-group-item active">Item One</a>
                <a href="javascript:;" class="list-group-item">Item Two</a>
                <a href="javascript:;" class="list-group-item">Item Three</a>
                <a href="javascript:;" class="list-group-item">Item Four</a>
            </div>

        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 text-center">

            <div class="list-group list-group-horizontal">
                <a href="javascript:;" class="list-group-item">Item One</a>
                <a href="javascript:;" class="list-group-item active">Item Two</a>
                <a href="javascript:;" class="list-group-item">Item Three</a>
                <a href="javascript:;" class="list-group-item">Item Four</a>
            </div>

        </div>

	</div>
</div>
	<script type="text/javascript">
	
	</script>

    .list-group-horizontal .list-group-item {
    display: inline-block;
}
.list-group-horizontal .list-group-item {
	margin-bottom: 0;
	margin-left:-4px;
	margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
	border-top-right-radius:0;
	border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
	border-top-right-radius:4px;
	border-bottom-left-radius:0;
}