I want to allow multiple buttons to be selected in List group

Question

This is my Code and also dropdown menu is not displaying dropdown items. It does not display dropdown items.Help me with this , that would be very helpful. Also i want to , allow multiple selection of the buttons, that includes, changing the color of each button that i select

 .list-group-horizontal .list-group-item {
    display: inline-block;
    
}
.list-group-horizontal .list-group-item:focus {
    display: inline-block;
    color:#fff;
    background-color: #41AADA !important; 
}

.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;
    
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="form-check list-inline list-group-horizontal" data-toggle="list-group-item"> 
        <button type="checkbox" id="btnGroupDrop1" type="button"  class="dropdown-toggle list-group-item" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            2018
          </button>
          <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
            <a class="dropdown-item" href="#">2017</a>
            <a class="dropdown-item" href="#">2016</a>
          </div>
      <button type="checkbox" class="form-check list-group-item">Quater 1</button>
      <button type="checkbox" class="form-check list-group-item">Quater 2</button>
      <button type="checkbox" class="form-check list-group-item">Quater 3</button>
      <button type="checkbox" class="form-check list-group-item">Quater 4</button>
  </div>

Answer 1

You can try the following solution:

.list-group-horizontal .list-group-item {
  display: inline-block; 
}
.list-group-horizontal .list-group-item:focus {
  background-color: #41AADA !important; 
  color:#fff;
  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;   
}
.form-check label {
  padding:.75rem 1.25rem;
  margin-bottom:0;
}
.form-check label input[type="checkbox"] {
  opacity:0;
}

<!-- include the CSS files -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- include the JavaScript files -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<!-- the HTML -->
<div class="form-check list-inline list-group-horizontal btn-group" role="group" data-toggle="buttons"> 
  <button type="checkbox" id="btnGroupDrop1" type="button"  class="dropdown-toggle list-group-item" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-toggle="buttons">
    2018
  </button>
  <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
    <a class="dropdown-item" href="#">2017</a>
    <a class="dropdown-item" href="#">2016</a>
  </div>
  <label class="btn btn-light">
    <input type="checkbox" class="form-check list-group-item">Quater 1
  </label>
  <label class="btn btn-light">
    <input type="checkbox" class="form-check list-group-item">Quater 2
  </label>
  <label class="btn btn-light">
    <input type="checkbox" class="form-check list-group-item">Quater 3
  </label>
  <label class="btn btn-light">
    <input type="checkbox" class="form-check list-group-item">Quater 4
  </label>
</div>