How to achieve bootstrap checklistbox classes for asp.net listcheckbox .

See more:

ASP.NET

bootstrap

Hi ,

I am trying to convert my asp.net checkboxlist to boostrap like design

My expected outcome i want like this

<style>
	/* CSS REQUIRED */
	.state-icon {
		left: -5px;
	}

	.list-group-item-primary {
		color: rgb(255, 255, 255);
		background-color: rgb(66, 139, 202);
	}

	/* DEMO ONLY - REMOVES UNWANTED MARGIN */
	.well .list-group {
		margin-bottom: 0px;
	}
</style>

<div class="col-xs-6">
	<h3 class="text-center">Colorful Example</h3>
	<div class="well" style="max-height: 300px;overflow: auto;">
		<ul id="check-list-box" class="list-group checked-list-box">
		  <li class="list-group-item">Cras justo odio</li>
		  <li class="list-group-item" data-color="success">Dapibus ac facilisis in</li>
		  <li class="list-group-item" data-color="info">Morbi leo risus</li>
		  <li class="list-group-item" data-color="warning">Porta ac consectetur ac</li>
		  <li class="list-group-item" data-color="danger">Vestibulum at eros</li>
		</ul>
		<br />
		<button class="btn btn-primary col-xs-12" id="get-checked-data">Get Checked Data</button>
	</div>
	<pre id="display-json"></pre>
</div>

Below is what I have tried so far

<div class="col-xs-6">
	<h3 class="text-center">Colorful Example</h3>
	<div class="well" style="max-height: 300px; overflow: auto;">
		<ul id="check-list-box" class="list-group checked-list-box">
			<li class="list-group-item">
				<asp:CheckBoxList  ID="CheckBoxList1" runat="server">
					<asp:ListItem Text="Aryan" Value="1"></asp:ListItem>
					<asp:ListItem Text="Mayank" Value="2"></asp:ListItem>
					<asp:ListItem Text="Anjan" Value="3"></asp:ListItem>
					<asp:ListItem Text="Ankita" Value="4"></asp:ListItem>
					<asp:ListItem Text="Nikita" Value="5"></asp:ListItem>
					<asp:ListItem Text="Abha" Value="6"></asp:ListItem>
				</asp:CheckBoxList></li>
		</ul>
		<br />
		<button class="btn btn-primary col-xs-12" id="get-checked-data">Get Checked Data</button>
	</div>
</div>