javascript - Dynamic button groups in Bootstrap -

i wonder if there way make button group dynamic, example: http://www.bootply.com/lkjq2wdubh in result can see first line , second line.

how create or make dynamic when click on button adjust position , gets active state?

when button 1 active:

when button 2 active:

and on...

so 1 button group or toolbar acts 2 groups, right duplicate code.

idea active button stands out, right duplicate code , perhaps there more dynamic solution, appreciate guidance or help.

<div class="btn-toolbar" role="toolbar" aria-label="toolbar button groups">   <div class="btn-group" role="group" aria-label="first group">     <button type="button" class="btn btn-primary active">1</button>   </div>   <div class="btn-group" role="group" aria-label="second group">     <button type="button" class="btn btn-primary">2</button>     <button type="button" class="btn btn-primary">3</button>     <button type="button" class="btn btn-primary">4</button>     <button type="button" class="btn btn-primary">5</button>     <button type="button" class="btn btn-primary">6</button>     <button type="button" class="btn btn-primary">7</button>   </div> </div> <br> <div class="btn-toolbar" role="toolbar" aria-label="toolbar button groups">   <div class="btn-group" role="group" aria-label="first group">     <button type="button" class="btn btn-primary">1</button>   </div>   <div class="btn-group" role="group" aria-label="first groups">      <button type="button" class="btn btn-primary active">2</button>   </div>   <div class="btn-group" role="group" aria-label="second group">      <button type="button" class="btn btn-primary">3</button>     <button type="button" class="btn btn-primary">4</button>     <button type="button" class="btn btn-primary">5</button>     <button type="button" class="btn btn-primary">6</button>     <button type="button" class="btn btn-primary">7</button>   </div> </div> 

thank you.

do this:

<div class="btn-toolbar" role="toolbar" aria-label="toolbar button groups">    <div class="btn-group" role="group" aria-label="first group">       <button type="button" class="btn btn-primary new">1</button>       <button type="button" class="btn btn-primary new">2</button>       <button type="button" class="btn btn-primary new">3</button>       <button type="button" class="btn btn-primary new">4</button>       <button type="button" class="btn btn-primary new">5</button>       <button type="button" class="btn btn-primary new">6</button>       <button type="button" class="btn btn-primary new">7</button>   </div> </div> 

then, little bit of jquery, can add class clicked button , remove others achieve style want on clicked button:

  $("button.new").click(function() {       $("button.new").removeclass("buttonchange").removeclass("buttonroundleft").removeclass("buttonroundright");      $(this).addclass("buttonchange");      $(this).prev().addclass("buttonroundleft");      $(this).next().addclass("buttonroundright");  }); 

the required css classes this:

.buttonchange  {     margin: 0 10px !important;     border-radius: 5px !important;  }   .buttonroundleft {     border-top-right-radius: 5px !important;     border-bottom-right-radius: 5px !important;  }  .buttonroundright {     border-top-left-radius: 5px !important;     border-bottom-left-radius: 5px !important;  } 

check out working example on codepen

update:

easier way have class focus state of button this:

button.new:focus {    margin: 0 10px !important;    border-radius: 5px !important; } 

this works if not want have rounded corner adjacent buttons. easy next button using same syntax not possible previous button.