I have my program like this:
And this is my code:
fieldset {
border-radius: 5px;
border:5px solid #1F497D;
background: #ddd;
}
fieldset legend {
background: #1F497D;
color: #fff;
padding: 5px 10px ;
font-size: 15px;
border-radius: 5px;
box-shadow: 0 0 0 3px #ddd;
}
<div class="panel-footer">
<div id="demo-frame" title="click para arrastrar el elemento">
<fieldset>
<legend>Lista 1</legend>
<ul id="lista1" >
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</fieldset>
<div class="botonera1" title="click para mover todos los elementos">
<fieldset>
<legend>Move rows</legend>
<button onclick="moveriz()" id="button1">« Move All</button>
<br>
<button onclick="moverder()" id="button2">Move All »</button>
</fieldset>
</div>
<fieldset>
<legend>Lista 2</legend>
<ul id="lista2">
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
</ul>
</fieldset>
</div>
</div>
And I just want to accommodate my boards. Anyone who can help me?
So that such? plnkr . Just section a
div
with classrow
into subdivs with.col-xs-4
and remove the styles you created. You could start from this base :)