How do I use this Bootstrap snippet?

Load Bootstrap 3.1.1, paste the HTML, add the CSS styles, and include the JS if present to match the live demo.

Can I use it commercially?

Yes. Snippets are free for personal and commercial projects. Review the snippets license page for details.

Is the layout responsive?

Yes. It is built on Bootstrap 3.1.1 and inherits its responsive grid and components.

Bootstrap html snippet. select from dual list

HTML code

Clean, semantic HTML that powers this Bootstrap 3.1.1 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.

<div class="container bootstrap snippets bootdey">
  <div class="row">
        <div class="col-md-12 text-center text-primary"><h3>Interact with the elements of lists</h3></div>
  </div>
  <hr>
  <div class="row">

      	<div class="col-sm-4 col-sm-offset-1">
          <div class="list-group" id="list1">
          <a href="#" class="list-group-item active"><span class="glyphicon glyphicon-th-large"></span>List 1 <input title="toggle all" type="checkbox" class="all pull-right"></a>
          <a href="#" class="list-group-item">Second item <input type="checkbox" class="pull-right"></a>
          <a href="#" class="list-group-item">Third item <input type="checkbox" class="pull-right"></a>
          <a href="#" class="list-group-item">More item <input type="checkbox" class="pull-right"></a>
          <a href="#" class="list-group-item">Another <input type="checkbox" class="pull-right"></a>
          </div>
        </div>
        <div class="col-md-2 v-center">
     		<button title="Send to list 2" class="btn btn-default center-block add"><i class="glyphicon glyphicon-chevron-right"></i></button>
            <button title="Send to list 1" class="btn btn-default center-block remove"><i class="glyphicon glyphicon-chevron-left"></i></button>
        </div>
        <div class="col-sm-4">
    	  <div class="list-group" id="list2">
          <a href="#" class="list-group-item active"><span class="glyphicon glyphicon-th-large"></span>List 2 <input title="toggle all" type="checkbox" class="all pull-right"></a>
          <a href="#" class="list-group-item">Alpha <input type="checkbox" class="pull-right"></a>
          <a href="#" class="list-group-item">Charlie <input type="checkbox" class="pull-right"></a>
          <a href="#" class="list-group-item">Bravo <input type="checkbox" class="pull-right"></a>
          </div>
        </div>
  </div>
</div>

CSS code

Scoped CSS that styles the component. Paste it after Bootstrap 3.1.1 to keep the design, spacing, and responsiveness consistent.

body{
background:#ddd;
}
.v-center {
  min-height:200px;
  display: flex;
  justify-content:center;
  flex-flow: column wrap;
}

Javascript/Jquery code

Lightweight JS to power any interactions this snippet needs. Drop it under your scripts (after Bootstrap 3.1.1) to mirror the live demo.

$('.add').click(function(){
    $('.all').prop("checked",false);
    var items = $("#list1 input:checked:not('.all')");
    var n = items.length;
  	if (n > 0) {
      items.each(function(idx,item){
        var choice = $(item);
        choice.prop("checked",false);
        choice.parent().appendTo("#list2");
      });
  	}
    else {
  		alert("Choose an item from list 1");
    }
});

$('.remove').click(function(){
    $('.all').prop("checked",false);
    var items = $("#list2 input:checked:not('.all')");
	items.each(function(idx,item){
      var choice = $(item);
      choice.prop("checked",false);
      choice.parent().appendTo("#list1");
    });
});

/* toggle all checkboxes in group */
$('.all').click(function(e){
	e.stopPropagation();
	var $this = $(this);
    if($this.is(":checked")) {
    	$this.parents('.list-group').find("[type=checkbox]").prop("checked",true);
    }
    else {
    	$this.parents('.list-group').find("[type=checkbox]").prop("checked",false);
        $this.prop("checked",false);
    }
});

$('[type=checkbox]').click(function(e){
  e.stopPropagation();
});

/* toggle checkbox when list group item is clicked */
$('.list-group a').click(function(e){
  
    e.stopPropagation();
  
  	var $this = $(this).find("[type=checkbox]");
    if($this.is(":checked")) {
    	$this.prop("checked",false);
    }
    else {
    	$this.prop("checked",true);
    }
  
    if ($this.hasClass("all")) {
    	$this.trigger('click');
    }
});